/* ==========================================================================
   MYTHIC BRAIN WEBSITE — design tokens
   Part 1 is the platform token set, VERBATIM from mythic_platform/shared/tokens.css
   (the website and the Lookout share one vocabulary: petrol ink, amber, pebble
   controls, hard drops, stepped skies, Onest). Part 2 (bottom) is the website's
   "Nightfall" layer: darker, roomier, more premium. Change tokens, not components.
   ========================================================================== */

@font-face {
  font-family: "Onest";
  src: url("../assets/fonts/onest-var.8c628b9ee7.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
/* Metric-matched fallback so the swap does not shift layout (CLS). */
@font-face {
  font-family: "Onest Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* ---- ink (text, borders, hard shadows) ---- */
  --ink-950: #0a171d;
  --ink-900: #0f1e24;
  --ink-800: #173036;
  --ink-700: #1f3a40;   /* default ink */
  --ink-600: #2c4a52;
  --ink-500: #3f5f66;
  --ink-400: #5e7d82;
  --ink-300: #88a2a4;
  --ink: var(--ink-700);
  --edge: var(--ink-700); /* border colour of plates and controls */

  /* ---- paper (panels, inputs) ---- */
  --paper-50: #fdf8ee;
  --paper-100: #f6ead3;  /* cream */
  --paper-200: #ecdcbc;
  --paper-300: #dcc59c;
  --paper-400: #c7ab7c;

  /* ---- accents ---- */
  --amber-300: #f7c46f;
  --amber-500: #f2a33a;  /* primary action */
  --amber-700: #b8691f;
  --amber-800: #94520f;  /* amber as text on paper: 5.1:1 */
  --coral-300: #f29a7c;
  --coral-500: #e8704a;
  --coral-700: #a9462a;
  --rust-500: #b23a2e;   /* destructive */
  --rust-700: #7e2219;
  --sage-300: #b6cf92;
  --sage-500: #8db36a;   /* success */
  --sage-700: #557a2f;
  --teal-300: #7fb2ae;
  --teal-500: #2f6b6e;
  --teal-700: #1d4a4c;
  --cyan-400: #5fe3e0;   /* live / online only */
  --cyan-600: #1fa7a4;
  --plum-300: #b79bc1;
  --plum-500: #7d5a86;
  --plum-700: #4e3656;
  --gold-400: #f7cb5c;   /* XP, achievements */
  --gold-700: #c9912c;

  /* ---- semantic ---- */
  --c-text: var(--ink-700);
  --c-text-2: var(--ink-500);
  --c-text-inv: var(--paper-50);
  --c-surface: var(--paper-100);
  --c-surface-2: var(--paper-50);
  --c-surface-lip: var(--paper-200);
  --c-line: var(--paper-300);
  --c-focus: var(--amber-500);
  --c-live: var(--cyan-400);

  /* ---- type (Onest only) ---- */
  --f: "Onest", "Onest Fallback", system-ui, sans-serif;
  --t-hero: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  --t-h1: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  --t-h2: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
  --t-h3: 1.18rem;
  --t-body: 1rem;
  --t-sm: .875rem;
  --t-xs: .75rem;
  --t-eyebrow: .72rem;

  /* ---- shape ---- */
  --bw: 3px;             /* ink border */
  --bw-sm: 2px;
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pebble: 15px 18px 15px 19px / 18px 15px 19px 15px;  /* hand-cut, for chunky controls */
  --r-pebble-lg: 24px 30px 26px 32px / 28px 24px 32px 26px;

  /* ---- hard drops (no blur, ever) ---- */
  --drop-1: 0 3px 0 var(--ink);
  --drop-2: 0 5px 0 var(--ink);
  --drop-3: 0 8px 0 var(--ink);
  --lip: inset 0 -4px 0 var(--c-surface-lip);
  --shine: inset 0 2px 0 rgb(255 255 255 / .35);

  /* ---- space (4px grid) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --gutter: clamp(16px, 3.4vw, 40px);
  --maxw: 1320px;

  /* ---- motion ---- */
  --e-pop: cubic-bezier(.2, 1.7, .4, 1);      /* overshoot: presses, stamps */
  --e-out: cubic-bezier(.2, .9, .3, 1);       /* entrances */
  --e-in-out: cubic-bezier(.65, 0, .35, 1);   /* wipes, irises */
  --d-fast: 120ms; --d-med: 240ms; --d-slow: 480ms;

  /* ---- layers ---- */
  --z-sky: 0; --z-fx: 5; --z-content: 10; --z-bar: 40; --z-dock: 45; --z-menu: 60;
  --z-dialog: 80; --z-toast: 90; --z-veil: 95; --z-mock: 100;

  /* ---- sky (overridden per [data-sky]) — golden hour is the brand default ---- */
  --sky-1: #e8704a; --sky-2: #ef8a57; --sky-3: #f4a367; --sky-4: #f6bb79;
  --sky-5: #f4c987; --sky-6: #f6d9a6; --sky-7: #f8e7c4;
  --sun: #fbebc8; --sun-ring: rgb(251 235 200 / .28);
  --ridge-1: #c98f86; --ridge-2: #9a7482; --ridge-3: #5e5f72; --ridge-4: #344c58; --ridge-fg: #1f3a40;
  --title-ink: var(--ink-700);

  color-scheme: light;
}

/* Stepped bands, hard stops. The only "gradient" the system allows. */
.sky-bands {
  background: linear-gradient(180deg,
    var(--sky-1) 0 14%, var(--sky-2) 14% 26%, var(--sky-3) 26% 37%, var(--sky-4) 37% 47%,
    var(--sky-5) 47% 56%, var(--sky-6) 56% 64%, var(--sky-7) 64% 100%);
}

/* ---- times of day (Home follows the player's clock when sky = auto) ---- */
[data-sky="dawn"] {
  --sky-1: #7d6f9c; --sky-2: #a283a3; --sky-3: #c9959f; --sky-4: #e2a99d;
  --sky-5: #efbf9f; --sky-6: #f6d5b0; --sky-7: #fbe8cb;
  --sun: #fff1d6; --sun-ring: rgb(255 241 214 / .3);
  --ridge-1: #c99aa0; --ridge-2: #9c7f97; --ridge-3: #6a6485; --ridge-4: #3e4a66; --ridge-fg: #243049;
}
[data-sky="day"] {
  --sky-1: #5f9fb0; --sky-2: #78b0bb; --sky-3: #93c0c3; --sky-4: #add0c8;
  --sky-5: #c7dfcd; --sky-6: #dde9d4; --sky-7: #efefdd;
  --sun: #fff8e6; --sun-ring: rgb(255 248 230 / .35);
  --ridge-1: #9dbdb8; --ridge-2: #6e9b98; --ridge-3: #44767a; --ridge-4: #2a5359; --ridge-fg: #1b3a40;
}
[data-sky="golden"] { /* defaults above */ }
[data-sky="dusk"] {
  --sky-1: #3e3a66; --sky-2: #5a4677; --sky-3: #7d5a86; --sky-4: #a56a88;
  --sky-5: #c97e85; --sky-6: #e0967f; --sky-7: #efb38a;
  --sun: #f9d9a8; --sun-ring: rgb(249 217 168 / .26);
  --ridge-1: #8e6282; --ridge-2: #65507a; --ridge-3: #433f66; --ridge-4: #2a2c4a; --ridge-fg: #1a1d33;
}
[data-sky="night"] {
  --sky-1: #0c1a22; --sky-2: #10222c; --sky-3: #142a36; --sky-4: #193442;
  --sky-5: #1e3d4c; --sky-6: #244857; --sky-7: #2c5462;
  --sun: #f6ead3; --sun-ring: rgb(246 234 211 / .12);
  --ridge-1: #294a58; --ridge-2: #1f3b48; --ridge-3: #172e39; --ridge-4: #10222b; --ridge-fg: #0a171d;
}

/* ---- Night Shift: the Control Center theme (dark plates, cream ink) ---- */
[data-theme="night-shift"] {
  --c-text: var(--paper-100);
  --c-text-2: #9fb6b8;
  --c-surface: #173036;
  --c-surface-2: #1f3a40;
  --c-surface-lip: #102429;
  --c-line: #2c4a52;
  --edge: #06151a;
  --drop-1: 0 3px 0 #06120f;
  --drop-2: 0 5px 0 #06120f;
  --drop-3: 0 8px 0 #06120f;
  --shine: inset 0 1px 0 rgb(255 255 255 / .06);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-med: 1ms; --d-slow: 1ms; }
}

/* ---- chart series: one hue per game, FIXED order (phantom, vanguard, codex, siege, olymbo).
   Validated with the dataviz validator: lightness band, chroma floor, adjacent CVD ΔE ≥ 8,
   normal-vision floor, contrast ≥ 3:1 — PASS on #fdf8ee (light) and #173036 (dark). ---- */
:root {
  --g-phantom-dawn: #0a86a8; --g-treadriot: #c46a12; --g-the-codex: #7a55c7; --g-the-long-siege: #b8402e; --g-overline: #3565c9;
}
[data-theme="night-shift"] {
  --g-phantom-dawn: #2298c0; --g-treadriot: #d06f22; --g-the-codex: #8f6fd6; --g-the-long-siege: #e0654c; --g-overline: #5a8be6;
}

/* ==========================================================================
   PART 2 — WEBSITE "NIGHTFALL" LAYER
   The website is the dark valley; the platform is the lit lookout above it.
   Same ink, same amber, same pebble controls, deeper floors and more air.
   Premium comes from space, scale and restraint, not from glow: the flat-light
   rules still hold (no blur, no bloom, no soft shadows; hard drops only).
   ========================================================================== */
:root {
  /* floors, deepest first (petrol, never black) */
  --nf-0: #061116;
  --nf-1: #0a171d;   /* = --ink-950, page floor */
  --nf-2: #0f1e24;   /* = --ink-900, alternate sections */
  --nf-3: #132830;   /* raised bands */
  --nf-4: #173036;   /* plates  (= Night Shift surface) */
  --nf-5: #1f3a40;   /* plate hover, inputs */
  --nf-line: #2c4a52;
  --nf-edge: #041015;   /* borders on dark */
  --nf-drop: #020b0e;   /* hard drops on dark */
  --cream: #f6ead3;     /* = --paper-100, body text on dark */
  --cream-dim: #b9c8c6; /* secondary text on dark: 10.5:1 on --nf-1, 8.0:1 on plates */
  --cream-mute: #88a2a4; /* tertiary / captions: 6.7:1 on --nf-1, 5.1:1 on plates */

  /* website scale: bigger display, roomier sections */
  --t-mega: clamp(3.1rem, 1rem + 8.2vw, 9.4rem);
  --t-display: clamp(2.6rem, 1.15rem + 4.9vw, 6.1rem);
  --t-h2-site: clamp(2.05rem, 1.25rem + 2.6vw, 3.7rem);
  --t-h3-site: clamp(1.25rem, 1.1rem + .5vw, 1.55rem);
  --t-lede: clamp(1.06rem, .98rem + .38vw, 1.3rem);
  --section-y: clamp(84px, 10vw, 156px);
  --maxw-site: 1360px;
  --gutter-site: clamp(18px, 4.2vw, 56px);

  /* motion extras */
  --e-soft: cubic-bezier(.3, .7, .2, 1);    /* scroll-linked travel */
  --d-cine: 900ms;                          /* hero/cinematic entrances */
}

/* Nightfall theme: dark plates, cream ink. Components need no dark-mode code
   (same mechanism as the platform's Night Shift). */
[data-theme="nightfall"] {
  --c-text: var(--cream);
  --c-text-2: var(--cream-dim);
  --c-text-inv: var(--ink-800);
  --c-surface: var(--nf-4);
  --c-surface-2: var(--nf-5);
  --c-surface-lip: #0d2127;
  --c-line: var(--nf-line);
  --edge: var(--nf-edge);
  --ink: var(--nf-edge);
  --drop-1: 0 3px 0 var(--nf-drop);
  --drop-2: 0 5px 0 var(--nf-drop);
  --drop-3: 0 8px 0 var(--nf-drop);
  --lip: inset 0 -4px 0 #0d2127;
  --shine: inset 0 1px 0 rgb(255 255 255 / .07);
  --sky-7: var(--nf-1);
  /* chart series on dark (validated set from the platform's Night Shift) */
  --g-phantom-dawn: #2298c0; --g-treadriot: #d06f22; --g-the-codex: #8f6fd6; --g-the-long-siege: #e0654c; --g-overline: #5a8be6;
  color-scheme: dark;
}

/* Golden hour restated explicitly so [data-sky="golden"] works inside a night page
   (the platform only defines it on :root). Values = platform defaults. */
[data-sky="golden"] {
  --sky-1: #e8704a; --sky-2: #ef8a57; --sky-3: #f4a367; --sky-4: #f6bb79;
  --sky-5: #f4c987; --sky-6: #f6d9a6; --sky-7: #f8e7c4;
  --sun: #fbebc8; --sun-ring: rgb(251 235 200 / .28);
  --ridge-1: #c98f86; --ridge-2: #9a7482; --ridge-3: #5e5f72; --ridge-4: #344c58; --ridge-fg: #1f3a40;
}

/* Website skies (2026-09-29): petrol, teal, sand and amber only. The platform's dawn and dusk (Part 1) step
   through violet, mauve and pink, which read as flag stripes on the website, so the website restates dawn and
   dusk and gives golden hour rust and petrol ridges. Mirrored in shared/site.js SKY_TONES (band wipes). */
[data-sky="dawn"] {
  --sky-1: #2f5560; --sky-2: #4b6f70; --sky-3: #768a78; --sky-4: #a69f7c;
  --sky-5: #d2b37e; --sky-6: #efcb92; --sky-7: #fae5bf;
  --sun: #fff3d9; --sun-ring: rgb(255 243 217 / .3);
  --ridge-1: #8f9c86; --ridge-2: #62786f; --ridge-3: #3e5a5a; --ridge-4: #274347; --ridge-fg: #172d31;
}
[data-sky="golden"] { --ridge-1: #c7804f; --ridge-2: #95603f; --ridge-3: #4f5753; --ridge-4: #2f474d; --ridge-fg: #1f3a40; }
[data-sky="dusk"] {
  --sky-1: #16292f; --sky-2: #223a3f; --sky-3: #3c4a45; --sky-4: #6b5a44;
  --sky-5: #a0663d; --sky-6: #cc7a3e; --sky-7: #e79a55;
  --sun: #f9d9a8; --sun-ring: rgb(249 217 168 / .26);
  --ridge-1: #8a5638; --ridge-2: #5a4232; --ridge-3: #2f3a39; --ridge-4: #1d2b2e; --ridge-fg: #121e21;
}

/* Animatable sky vars so a section can cross-fade its stepped bands (C: chapters). */
@property --band-1 { syntax: "<color>"; inherits: true; initial-value: #0a171d; }
@property --band-2 { syntax: "<color>"; inherits: true; initial-value: #0f1e24; }
@property --band-3 { syntax: "<color>"; inherits: true; initial-value: #132830; }
@property --band-4 { syntax: "<color>"; inherits: true; initial-value: #173036; }
@property --band-5 { syntax: "<color>"; inherits: true; initial-value: #1f3a40; }
@property --band-6 { syntax: "<color>"; inherits: true; initial-value: #2c4a52; }