/* ============================================================
   Tech Template — design tokens
   From the Claude Design project "Tech Template Design System"
   (colors_and_type.css). Changes for kazkazi.de:
   - JetBrains Mono is self-hosted from /fonts/ instead of the
     Google Fonts CDN (privacy policy + CSP allow no third parties).
   - Utility classes not used by the blog are omitted.
   ============================================================ */

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/JetBrainsMono-Italic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'); }

:root {
  /* Color — neutrals */
  --ink:        #000000;
  --paper:      #FFFFFF;
  --ink-90:     #1A1A1A;
  --ink-70:     #4D4D4D;
  --ink-50:     #808080;
  --ink-30:     #B3B3B3;
  --ink-15:     #D9D9D9;
  --ink-05:     #F2F2F2;

  /* Color — semantic (states only) */
  --ok:         #0A7D2C;
  --warn:       #B8860B;
  --err:        #B00020;
  --ok-tint:    #E8F4EC;
  --warn-tint:  #FAF2DE;
  --err-tint:   #F8E3E6;

  /* Type */
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display:  56px;
  --fs-h1:       40px;
  --fs-h2:       28px;
  --fs-h3:       20px;
  --fs-body:     15px;
  --fs-small:    13px;
  --fs-caption:  11px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.45;
  --lh-loose:    1.6;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* Spacing — 4px base */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* Borders & radii */
  --r-0:  0px;
  --r-1:  2px;

  --bw-hair:   1px;
  --bw-rule:   2px;
  --bw-heavy:  3px;

  --border-default: var(--bw-hair) solid var(--ink);
  --border-muted:   var(--bw-hair) solid var(--ink-30);
  --border-rule:    var(--bw-rule) solid var(--ink);

  /* Elevation — hard offset only */
  --shadow-none:  none;
  --shadow-hard:  4px 4px 0 0 var(--ink);
  --shadow-hard-sm: 2px 2px 0 0 var(--ink);

  /* Motion */
  --ease:       cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:   90ms;
  --dur-med:    180ms;
  --dur-slow:   320ms;
}