/* =====================================================================
   MUTATOOL — Design Tokens
   Dark-first devtool aesthetic, pixel as seasoning.
   Theme:  [data-theme="dark"] (default) | [data-theme="light"]
   Pixel:  [data-pixel="subtle"] | "balanced" (default) | "max"
   ===================================================================== */

/* ---------- Fonts ---------- */
/* Self-hosted (DSGVO: keine Google-Fonts-CDN-Anfrage). Geladen via static/css/fonts.css
   in base.html VOR diesem Stylesheet. Neu erzeugen mit tools/fetch_fonts.py. */

:root {
  /* Type families */
  --font-display: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-pixel:   'Silkscreen', 'JetBrains Mono', monospace;

  /* Type scale (fluid clamps, 1920 design width down to mobile) */
  --fs-pixel-xs: 10px;
  --fs-pixel-sm: 12px;
  --fs-eyebrow:  clamp(11px, 0.78vw, 13px);
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   clamp(16px, 1.1vw, 18px);
  --fs-lg:   clamp(18px, 1.4vw, 22px);
  --fs-xl:   clamp(22px, 2.0vw, 30px);
  --fs-2xl:  clamp(28px, 3.2vw, 44px);
  --fs-3xl:  clamp(38px, 5.4vw, 76px);
  --fs-4xl:  clamp(46px, 7.2vw, 104px);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.6;

  /* Spacing (8px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --maxw: 1200px;
  --maxw-narrow: 760px;

  /* Radius — overridden per pixel-intensity */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Pixel-decoration switches (overridden per pixel-intensity) */
  --pixel-grid-opacity: 0.5;     /* dotted bg grid */
  --pixel-scanline-opacity: 0;   /* hero scanlines */
  --pixel-deco-display: block;   /* corner ticks, pixel dividers */
  --pixel-step: 3px;             /* size of stepped pixel corners */
  --border-w: 1px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: 180ms;
  --dur-slow: 420ms;
}

/* ============================= DARK (default) ========================= */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0d0f13;
  --bg-2:      #0a0c0f;
  --grid-line: rgba(255,255,255,0.035);
  --surface:   #14171d;
  --surface-2: #1a1e26;
  --surface-3: #232936;
  --border:        #282d38;
  --border-strong: #3a4151;

  --text:       #eceef2;
  --text-dim:   #99a1ad;
  --text-faint: #687180;

  /* Brand accent — warm "potato gold" (functional/quiet base elsewhere) */
  --primary:      #f0a93c;
  --primary-hi:   #ffc25c;
  --primary-ink:  #1c1404;
  --primary-soft: rgba(240,169,60,0.13);
  --primary-line: rgba(240,169,60,0.32);

  /* Status / chroma — used functionally only */
  --green:        #46c98a;  --green-soft:   rgba(70,201,138,0.14);
  --magenta:      #e468b6;  --magenta-soft: rgba(228,104,182,0.14);
  --yellow:       #e3c34d;  --yellow-soft:  rgba(227,195,77,0.14);
  --red:          #ef6052;  --red-soft:     rgba(239,96,82,0.14);
  --cyan:         #5cc4e0;  --cyan-soft:    rgba(92,196,224,0.14);

  /* literal greenscreen used inside hero demo only */
  --chroma-green: #15c24c;
  --chroma-magenta: #e0179a;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-3: 0 24px 60px -18px rgba(0,0,0,.7);
  --glow: 0 0 0 1px var(--primary-line), 0 14px 40px -14px rgba(240,169,60,.4);

  --checker-a: #1c2128;
  --checker-b: #141920;
}

/* ============================= LIGHT ================================= */
[data-theme="light"] {
  color-scheme: light;
  --bg:        #f4f2ec;
  --bg-2:      #eeece4;
  --grid-line: rgba(20,20,30,0.045);
  --surface:   #fbfaf6;
  --surface-2: #f3f1e9;
  --surface-3: #e9e6db;
  --border:        #ddd9cc;
  --border-strong: #c7c2b1;

  --text:       #1b1d22;
  --text-dim:   #5a5f6b;
  --text-faint: #8a8f9b;

  --primary:      #c97e16;
  --primary-hi:   #b06f0d;
  --primary-ink:  #fff6e6;
  --primary-soft: rgba(201,126,22,0.10);
  --primary-line: rgba(201,126,22,0.30);

  --green:        #1f9d63;  --green-soft:   rgba(31,157,99,0.12);
  --magenta:      #c43d92;  --magenta-soft: rgba(196,61,146,0.12);
  --yellow:       #b08a12;  --yellow-soft:  rgba(176,138,18,0.12);
  --red:          #d4402f;  --red-soft:     rgba(212,64,47,0.12);
  --cyan:         #1f86a8;  --cyan-soft:    rgba(31,134,168,0.12);

  --chroma-green: #15c24c;
  --chroma-magenta: #e0179a;

  --shadow-1: 0 1px 2px rgba(40,36,20,.08);
  --shadow-2: 0 10px 26px -10px rgba(40,36,20,.18);
  --shadow-3: 0 26px 60px -20px rgba(40,36,20,.26);
  --glow: 0 0 0 1px var(--primary-line), 0 16px 40px -16px rgba(201,126,22,.3);

  --checker-a: #e4e0d4;
  --checker-b: #f1eee5;
}

/* ===================== PIXEL INTENSITY LEVELS ======================== */
[data-pixel="subtle"] {
  --r-sm: 10px; --r: 14px; --r-lg: 22px;
  --pixel-grid-opacity: 0.25;
  --pixel-scanline-opacity: 0;
  --pixel-deco-display: none;
  --pixel-step: 0px;
  --border-w: 1px;
}
[data-pixel="balanced"] {
  --r-sm: 6px; --r: 10px; --r-lg: 16px;
  --pixel-grid-opacity: 0.6;
  --pixel-scanline-opacity: 0.05;
  --pixel-deco-display: block;
  --pixel-step: 3px;
  --border-w: 1px;
}
[data-pixel="max"] {
  --r-sm: 0px; --r: 0px; --r-lg: 0px; --r-pill: 0px;
  --pixel-grid-opacity: 1;
  --pixel-scanline-opacity: 0.12;
  --pixel-deco-display: block;
  --pixel-step: 4px;
  --border-w: 2px;
}