:root {
  /* ==========================================================================
     Beef Studios Design Tokens
     Single source of truth for color, type, spacing, motion.
     Author once here; consume everywhere via var(--token).
     ========================================================================== */

  /* ---------- Color: Foundation (Vinyl-Black Baseline) ---------- */
  /* Warmed the entire dark stack ~2 degrees toward obsidian so the          */
  /* tungsten accent sits on a compatible ground instead of fighting a cool  */
  /* blue bias. Still reads as black; no color-cast is perceptible without   */
  /* a side-by-side.                                                         */
  --color-bg:              #0a0908;   /* page background, deepest plane */
  --color-bg-elevated:     #161412;   /* cards, surfaces, sticky nav */
  --color-bg-raised:       #1e1b18;   /* hover surface, modal, popover */
  --color-bg-sunken:       #070605;   /* hero floor, footer well */

  --color-text:            #ededea;   /* primary copy, headings (bone) */
  --color-text-muted:      #969089;   /* secondary copy, meta, captions */
  --color-text-faint:      #5e5953;   /* dividers labels, disabled text */
  --color-text-inverse:    #0a0908;   /* text on accent fill */

  --color-border:          #29241f;   /* hairline borders, separators */
  --color-border-strong:   #3a332c;   /* card outlines, focused inputs */

  /* ---------- Color: Accent (Tungsten Filament) ---------- */
  /* Warm sodium-amber LED / tube-filament glow. The ONE chromatic signal.  */
  --color-accent:          #e8a04a;   /* primary brand accent */
  --color-accent-hover:    #f2b462;   /* hover state, filament flaring  */
  --color-accent-pressed:  #c8832d;   /* active/pressed state */
  --color-accent-soft:     rgba(232, 160, 74, 0.10);  /* tint background */
  --color-accent-ring:     rgba(232, 160, 74, 0.38);  /* focus ring */
  --color-accent-glow:     rgba(232, 160, 74, 0.55);  /* hero/CTA bloom */

  /* ---------- Color: Signal (sparing, for status) ---------- */
  --color-signal-success:  #7ab893;
  --color-signal-danger:   #d8616a;

  /* ---------- Typography ---------- */
  /* Display: Fraunces variable serif (opsz + soft + wght axes). Body: Inter */
  /* workhorse. Mono: JetBrains Mono for operator-grade eyebrows + numerics.*/
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fraunces axis presets - applied per role in `css/styles.css`. */
  --fvs-display:  "opsz" 96, "SOFT" 80, "wght" 400;
  --fvs-h1:       "opsz" 72, "SOFT" 60, "wght" 500;
  --fvs-h2:       "opsz" 48, "SOFT" 50, "wght" 500;
  --fvs-h3:       "opsz" 32, "SOFT" 40, "wght" 500;
  --fvs-italic:   "opsz" 72, "SOFT" 100, "wght" 400;

  /* Modular scale, base 16px, ratio ~1.25 (major third), clamped for fluidity */
  --fs-12:  0.75rem;     /* 12px - meta, labels */
  --fs-14:  0.875rem;    /* 14px - small body, nav */
  --fs-16:  1rem;        /* 16px - body */
  --fs-18:  1.125rem;    /* 18px - lede paragraphs */
  --fs-20:  1.25rem;     /* 20px - card titles */
  --fs-24:  1.5rem;      /* 24px - h4 */
  --fs-32:  2rem;        /* 32px - h3 */
  --fs-h2:  clamp(2rem, 1.4rem + 2.4vw, 3rem);          /* 32 -> 48 */
  --fs-h1:  clamp(2.75rem, 1.6rem + 4.8vw, 4.5rem);     /* 44 -> 72 */
  --fs-hero: clamp(3.25rem, 1.6rem + 7vw, 5.75rem);     /* 52 -> 92 */

  --lh-tight:   1.05;   /* display, hero */
  --lh-snug:    1.2;    /* h1-h3 */
  --lh-normal:  1.5;    /* body */
  --lh-loose:   1.7;    /* long-form paragraphs */

  --ls-tight:    -0.02em;  /* large display */
  --ls-snug:     -0.01em;  /* headings */
  --ls-normal:    0;
  --ls-wide:      0.02em;
  --ls-mono-cap:  0.14em;  /* uppercase mono labels */

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

  /* ---------- Spacing (4px base) ---------- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  --section-y:        clamp(4rem, 3rem + 5vw, 7.5rem);   /* vertical section padding */
  --section-y-tight:  clamp(2.5rem, 2rem + 2vw, 4rem);

  /* ---------- Layout / Container ---------- */
  --container-max:    1240px;   /* main content width */
  --container-narrow: 880px;    /* prose, forms */
  --container-wide:   1440px;   /* edge-to-edge media rows */
  --gutter:           clamp(1rem, 0.5rem + 2vw, 2rem);
  --grid-gap:         clamp(1rem, 0.75rem + 1vw, 2rem);

  --nav-height:       72px;
  --nav-height-sm:    60px;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-hairline: 1px solid var(--color-border);
  --border-strong:   1px solid var(--color-border-strong);

  /* ---------- Shadows (low-key, hardware-feel) ---------- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-glow:  0 0 0 1px var(--color-accent-ring), 0 12px 40px var(--color-accent-glow);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);

  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --dur-stage:   720ms;

  --transition-color:  color var(--dur-fast) var(--ease-standard),
                       background-color var(--dur-fast) var(--ease-standard),
                       border-color var(--dur-fast) var(--ease-standard);
  --transition-transform: transform var(--dur-base) var(--ease-emphasis);
  --transition-shadow: box-shadow var(--dur-base) var(--ease-standard);

  /* ---------- Z-Index Scale ---------- */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;   /* nav */
  --z-overlay:  500;   /* page overlays, gradient curtains */
  --z-modal:    1000;
  --z-toast:    1500;
  --z-max:      9999;

  /* ---------- Focus / A11y ---------- */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* ---------- Component Tokens (semantic aliases) ---------- */
  --nav-bg:           rgba(10, 10, 15, 0.72);
  --nav-bg-blur:      saturate(140%) blur(14px);
  --nav-border:       1px solid rgba(255, 255, 255, 0.06);

  --card-bg:          var(--color-bg-elevated);
  --card-border:      var(--border-hairline);
  --card-radius:      var(--radius-lg);
  --card-shadow:      var(--shadow-md);

  --btn-radius:       var(--radius-pill);
  --btn-padding-y:    0.875rem;
  --btn-padding-x:    1.5rem;

  --input-bg:         var(--color-bg-raised);
  --input-border:     var(--border-strong);
  --input-radius:     var(--radius-md);

  --hr-color:         var(--color-border);
}

/* Reduced motion respects user preference. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --dur-stage:   0ms;
  }
}