/* ==========================================================================
   Duromex — Design Tokens
   Motion Storytelling design system, rebranded to appliance-white + cool-steel.
   FLAT: one background under every scene of every page — no scene tints, no
   gradients, no glows, no shadows, no blur, and no seam between sections.
   Single source of truth: never hard-code a colour, size or duration elsewhere.
   ========================================================================== */

:root {
  /* ---- Canvas + scene backgrounds (chapters transition between these) ---- */
  --bg-base:     #070a10;  /* the one canvas, under every chapter */
  --bg-scene-1:  var(--bg-base);
  --bg-scene-2:  var(--bg-base);
  --bg-scene-3:  var(--bg-base);
  --bg-scene-4:  var(--bg-base);
  --bg-elevated: #10131c;

  /* ---- No gradients ----
     Every former atmosphere or sheen resolves to nothing, and the accent
     gradient resolves to the accent itself. */
  --grad-scene:  none;
  --grad-accent: var(--accent);
  --grad-aurora: none;
  --grad-text:   none;
  --grad-steel:  none;

  /* ---- Surfaces ---- */
  --surface-1: #10131c;
  --surface-2: #161a26;
  --surface-3: #1c2130;
  --surface-glass: #10131c;   /* solid: nothing behind it is blurred */

  /* ---- Text ramp (AA at every motion state) ---- */
  --text-primary:   #f6f8fd;
  --text-secondary: #c3cadb;
  --text-muted:     #9aa2b7;
  --text-faint:     #646b81;   /* decorative only — never content */
  --text-on-accent: #04070f;

  /* ---- Hairlines (panels/inputs only — NEVER between scenes) ---- */
  --border-subtle:  rgba(255, 255, 255, .07);
  --border-default: rgba(255, 255, 255, .13);
  --border-strong:  rgba(255, 255, 255, .22);
  --ring:           #9dc0ff;

  /* ---- Accent: the thread that traces the story ---- */
  --accent:       #4d8dfd;
  --accent-hover: #6fa3fe;
  --accent-press: #3b78e6;
  --accent-2:     #2dd4bf;
  --accent-3:     #fbbf24;
  --accent-soft:  rgba(77, 141, 253, .16);
  --accent-2-soft: rgba(45, 212, 191, .15);
  --accent-3-soft: rgba(251, 191, 36, .14);

  /* ---- Semantic ---- */
  --success: #34d399; --success-soft: rgba(52, 211, 153, .16);
  --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, .16);
  --error:   #fb7185; --error-soft:   rgba(251, 113, 133, .16);
  --info:    #38bdf8; --info-soft:    rgba(56, 189, 248, .16);

  /* ---- Elevation ----
     Nothing is lifted or glowed: a panel is told from the page by a hairline. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --glow:      none;

  /* ---- Typography ----
     Urbanist carries the headlines: a geometric sans with near-circular bowls
     and a low-contrast finish that suits white goods. Mulish carries running
     and interface text, and Kode Mono carries cycle times, leak rates and
     model codes. */
  --font-sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, "Helvetica Neue", sans-serif;
  --font-display: "Urbanist", "Mulish", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Kode Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.75rem, 1.35rem + 5.6vw, 5.75rem);
  --fs-h1:      clamp(2.375rem, 1.45rem + 3.5vw, 4.5rem);
  --fs-h2:      clamp(1.875rem, 1.35rem + 2.1vw, 3.125rem);
  --fs-h3:      clamp(1.3125rem, 1.15rem + .7vw, 1.625rem);
  --fs-h4:      clamp(1.125rem, 1.06rem + .3vw, 1.25rem);
  --fs-lead:    clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  --fs-body:    1rem;
  --fs-body-lg: 1.0625rem;
  --fs-small:   .875rem;
  --fs-micro:   .75rem;

  /* ---- Spacing: 4-pt base, 8-pt 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 ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 14px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 999px;

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

  /* ---- Section / scene rhythm ---- */
  --section-y:    clamp(80px, 10vw, 144px);
  --section-y-lg: clamp(104px, 13vw, 192px);
  --stack:        clamp(16px, 2vw, 24px);

  /* ---- Scroll tracks ---- */
  --track-short: 150vh;
  --track:       250vh;
  --track-long:  400vh;

  /* ---- Motion ---- */
  --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; --dur-slower: 800ms;
  --ease-out:    cubic-bezier(.2, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-emph:   cubic-bezier(.16, 1, .3, 1);
  --ease-ref:    cubic-bezier(.165, .84, .44, 1);

  /* ---- Layout constants ---- */
  --nav-h: 68px;
}

/* Optional light theme — cinematic dark remains the default identity. */
[data-theme="light"] {
  --bg-base: #f6f8fc;
  --bg-scene-1: var(--bg-base);
  --bg-scene-2: var(--bg-base);
  --bg-scene-3: var(--bg-base);
  --bg-scene-4: var(--bg-base);
  --bg-elevated: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f2f5fb;
  --surface-3: #e8edf7;
  --surface-glass: #ffffff;
  --text-primary: #080b12;
  --text-secondary: #38405a;
  --text-muted: #5a627c;
  --text-faint: #8b93a8;
  --text-on-accent: #ffffff;
  --border-subtle: rgba(8, 11, 18, .08);
  --border-default: rgba(8, 11, 18, .14);
  --border-strong: rgba(8, 11, 18, .24);
  --ring: #1d4ed8;
  --accent: #1f60d8;
  --accent-hover: #1a51ba;
  --accent-press: #16449c;
  --accent-2: #0d8f80;
  --accent-3: #a16207;
  --accent-soft: rgba(31, 96, 216, .12);
  --grad-text: none;
  --grad-aurora: none;
  --shadow-md: none;
  --shadow-lg: none;
}