/* ============================================================
   Extruon — Design Tokens
   Flat industrial system. Solid surfaces, hairline rules,
   one ember accent. No gradients, no shadows, no glows, and —
   since this pass — no alternating bands either: every section of
   every page sits on the one canvas, with nothing drawn between.

   Every surface is an opaque value on a single steel ramp, so
   nothing composites and no panel dulls the one beneath it.
   Never hard-code a colour outside this file.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Canvas ----------------------------------------------------------
     One value. There is no second band: chapters are told apart by their
     spacing and their type, and nothing — no rule, no step in value — is
     drawn where one chapter meets the next.                               */
  --bg-base:     #0a0c11;   /* steel black — the page, everywhere    */
  --bg-band:     var(--bg-base);
  --bg-elevated: #12161e;   /* popovers, drawers, menus              */

  /* ---- Surfaces — opaque steps on the same ramp ---- */
  --surface-1: #12161e;
  --surface-2: #171c25;
  --surface-3: #1f252f;

  /* ---- Hairlines — solid, never alpha ---- */
  --border-subtle:  #222835;
  --border-default: #333b4a;
  --border-strong:  #4e5868;
  --ring:           #ff8a4a;

  /* ---- Text ramp ---- */
  --text-primary:   #f3f6fa;   /* 17.0:1 on --bg-base */
  --text-secondary: #bfc7d4;   /* 10.3:1 */
  --text-muted:     #929bab;   /*  5.9:1 */
  --text-faint:     #798294;   /*  4.5:1 — placeholders, hints */
  --text-on-accent: #190700;

  /* ---- Accent — the ember thread ---- */
  --accent:       #ff6a2c;   /* press ember — 6.6:1 on --bg-base */
  --accent-hover: #ff8a4a;
  --accent-press: #e5541b;
  --accent-2:     #cfd8e3;   /* aluminium silver */
  --accent-3:     #ffc043;   /* billet glow */

  /* Opaque accent tints — real values on the accent→surface ramp, named by
     the surface they sit on. Used instead of translucent washes. */
  --tint-on-bg:      color-mix(in oklab, var(--accent) 10%, var(--bg-base));
  --tint-on-surface: color-mix(in oklab, var(--accent) 12%, var(--surface-1));
  --tint-strong:     color-mix(in oklab, var(--accent) 22%, var(--surface-1));
  --tint-metal:      color-mix(in oklab, var(--accent-2) 12%, var(--surface-1));
  --tint-chart:      color-mix(in oklab, var(--accent) 13%, var(--surface-2));
  --tint-gold:       color-mix(in oklab, var(--accent-3) 14%, var(--surface-1));
  --line-accent:     color-mix(in oklab, var(--accent) 45%, var(--border-default));

  /* ---- Semantic ---- */
  --success: #3ddc9a; --success-soft: color-mix(in oklab, #3ddc9a 16%, var(--surface-1));
  --warning: #fbbf24; --warning-soft: color-mix(in oklab, #fbbf24 16%, var(--surface-1));
  --error:   #fb7185; --error-soft:   color-mix(in oklab, #fb7185 16%, var(--surface-1));
  --info:    #7dd3fc; --info-soft:    color-mix(in oklab, #7dd3fc 16%, var(--surface-1));

  /* ---- Typography ----
     Saira carries the headlines: a slightly narrow industrial grotesque whose
     flat sides read like an extruded profile in section. Barlow carries
     running and interface text, and Overpass Mono carries die numbers, press
     tonnages and alloy codes. */
  --font-sans: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Saira", "Barlow", system-ui, -apple-system, sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.4rem + 5.2vw, 5rem);
  --fs-h1:      clamp(2.125rem, 1.5rem + 2.9vw, 3.5rem);
  --fs-h2:      clamp(1.6875rem, 1.3rem + 1.9vw, 2.625rem);
  --fs-h3:      clamp(1.3125rem, 1.15rem + 0.9vw, 1.75rem);
  --fs-h4:      clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  --fs-body:    1rem;
  --fs-body-lg: 1.0625rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;      /* floor — nothing smaller anywhere */

  /* ---- Spacing — 4pt base / 8pt rhythm ---- */
  --space-0: 0;     --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-28: 112px;--space-32: 128px;--space-40: 160px;

  /* ---- Radii — machined, not pillowy ---- */
  --radius-sm: 4px;  --radius-md: 6px;   --radius-lg: 8px;
  --radius-xl: 10px; --radius-2xl: 12px; --radius-pill: 999px;

  /* ---- Containers ---- */
  --container-sm: 680px;  --container-md: 820px;  --container-lg: 1060px;
  --container-xl: 1200px; --container-2xl: 1320px;
  --gutter: clamp(20px, 5vw, 48px);

  /* ---- Section rhythm ---- */
  --section-y: clamp(72px, 9vw, 132px);
  --section-y-lg: clamp(96px, 12vw, 176px);
  --stack: clamp(16px, 2vw, 24px);

  /* ---- Scroll tracks (pinned scenes) ---- */
  --track-short: 170vh;
  --track:       260vh;
  --track-long:  400vh;

  /* ---- Motion ---- */
  --dur-fast: 140ms;  --dur-base: 240ms;  --dur-slow: 460ms;  --dur-slower: 700ms;
  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-measured: cubic-bezier(0.165, 0.84, 0.44, 1);

  /* ---- Chrome ---- */
  --nav-h: 64px;
  --hairline: 1px;

  /* ---- z-index scale ---- */
  --z-base: 1;   --z-nav: 100;  --z-progress: 120;
  --z-menu: 150; --z-overlay: 200;
}

/* ------------------------------------------------------------------------
   Light theme — same flat system, inverted ramp. Dark stays the identity.
   ---------------------------------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  --bg-base:     #ffffff;
  --bg-band:     #f4f6f9;
  --bg-elevated: #ffffff;

  --surface-1: #ffffff;
  --surface-2: #f4f6f9;
  --surface-3: #e8ecf2;

  --border-subtle:  #e4e8ee;
  --border-default: #d2d8e1;
  --border-strong:  #b3bcca;
  --ring:           #b23c0c;

  --text-primary:   #0b0e14;
  --text-secondary: #39414f;
  --text-muted:     #5c6472;
  --text-faint:     #838b99;
  --text-on-accent: #ffffff;

  --accent:       #c2410c;   /* 5.3:1 on white */
  --accent-hover: #9a3412;
  --accent-press: #7c2d12;
  --accent-2:     #4a5a6e;
  --accent-3:     #a16207;
}