/* ============================================================================
   Tokens — lusion.co's structure, Lightening Tech's identity.

   Measured on lusion.co (2026-09-05, _astro/about.*.css):
     grid 12 columns, --grid-gap 2vw, --base-padding-x max(5vw,40px),
     --base-padding-y clamp(30px,4vw,50px), --global-border-radius 20px,
     --cross-size clamp(.875rem,1vw,2rem), body font clamp(.875rem,1vw,2rem),
     easings cubic-bezier(.4,0,.1,1) and cubic-bezier(.35,0,0,1) ("lusion"),
     durations .3s–.5s, two grounds (off-white / black) that swap mid-page.

   Colours are ours, not theirs: the product's warm off-white ground, ink,
   and the four severity colours the report actually uses — those are the
   accent set (lusion cycles five balloon colours; we cycle these).
   ========================================================================= */
:root {
  /* grounds */
  --off-white: #FBF8F3;
  --off-white-sunk: #F4EFE6;
  --black: #0A0A09;
  --white: #FFFFFF;
  --ink: #13100C;
  --body: #4A443B;
  --muted: #6B6459;
  --line: #E4DED2;
  --line-dark: #2A2723;

  /* accent set (the product's semantic colours, theme.css) */
  --accent: #8A5F14;        /* gold, primary */
  --accent-bright: #E7C066; /* gold on black */
  --good: #3F6B33;
  --warn: #8A5A12;
  --bad: #8C3A29;
  --info: #2A4E63;

  /* live ground / ink — swapped by html.is-black-bg.
     --ground-tint is written on <html> by hero.js as the section accent tweens;
     it feeds the light theme only, so the black phase below still wins. */
  --bg: var(--ground-tint, var(--off-white));
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --rule: var(--line);
  /* --surface was only ever defined inside html[data-theme="dark"], so in the
     light theme every `background: var(--surface)` resolved to nothing and the
     cards had no ground at all. That is the real reason they read as
     cream-on-cream; they were not a close colour, they were absent. */
  --surface: var(--off-white-sunk);
  --pill-bg: var(--ink);
  --pill-fg: var(--off-white);
  /* A panel that sits ABOVE the page rather than in it -- the menu cards and
     the sound button. --white with an inherited colour left the whole menu as
     cream text on a white card in the dark theme, measured at 1.06:1. Kept
     separate from --surface because these two must also survive
     html.is-black-bg, which rewrites --fg and --surface for the corridor. */
  --panel: var(--white);
  --panel-fg: var(--ink);

  /* Used across pages.css and site.css and defined in neither, so six
     backgrounds, three shadows and one border quietly did nothing. Built from
     --accent and --bg so they follow the theme instead of needing a second set
     of constants kept in step by hand. */
  --bg-sunk: var(--off-white-sunk);
  --accent-soft: color-mix(in srgb, var(--accent) 34%, var(--bg));
  --shadow: 0 1px 2px rgba(19, 16, 12, .05), 0 8px 28px rgba(19, 16, 12, .07);

  /* rhythm (lusion) */
  --grid-gap: 2vw;
  --grid-space: calc((100% - 11 * var(--grid-gap)) / 12);
  --pad-x: max(5vw, 40px);
  --pad-y: clamp(30px, 4vw, 50px);
  --radius: 20px;
  --cross: clamp(.875rem, 1vw, 2rem);
  --vh: 1vh;

  /* type */
  --font-sans: 'Geist', 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-body: clamp(.875rem, 1vw, 2rem);
  --fs-header: clamp(1rem, 1vw, 1.5rem);

  /* motion */
  --e-lusion: cubic-bezier(.35, 0, 0, 1);
  --e-std: cubic-bezier(.4, 0, .1, 1);
  --e-expo: cubic-bezier(.16, 1, .3, 1);
  --d-1: .3s;
  --d-2: .4s;
  --d-3: .5s;
}

html.is-black-bg {
  --bg: var(--black);
  --fg: var(--off-white);
  --fg-muted: #9A948A;
  --rule: var(--line-dark);
  --pill-bg: var(--off-white);
  --pill-fg: var(--ink);
}

/* --------------------------------------------------------- the dark theme ---
   Set on <html> as data-theme, by a script that runs before first paint. An
   explicit --bg here also settles a conflict the light theme has: --bg is
   `var(--ground-tint, var(--off-white))`, and hero.js writes --ground-tint on
   <html> as the section accent tweens. A plain value wins over that, so the
   tint colours the light page only, which is where it was designed.

   --accent becomes the bright gold. #8A5F14 is a gold chosen to read on cream
   and it is 2.1:1 on this ground; #E7C066 is the one the corridor already uses
   on ink. */
html[data-theme="dark"] {
  /* --body and --muted are raw palette colours, not semantic ones, but
     pages.css uses --body directly as its body-text colour in fifteen places.
     #4A443B was picked to sit on cream and is 2.06:1 on this ground, which is
     78 unreadable strings on every flat page. They flip too. */
  --body: #B6AFA3;
  --muted: #9A948A;
  --line: var(--line-dark);

  --bg: var(--black);
  --fg: var(--off-white);
  --fg-muted: #9A948A;
  --rule: var(--line-dark);
  --surface: #16150F;
  --line: var(--line-dark);
  --accent: var(--accent-bright);
  --pill-bg: var(--off-white);
  --pill-fg: var(--ink);

  /* The status set was picked to read on cream and lands at 2.5-2.9:1 on this
     ground -- under the 3:1 a border or an icon needs to be seen at all. These
     are the same hues lifted to carry on ink. They were briefly scoped to the
     sample report; every page that marks a pass, a warning or a failure needs
     them, which is what a theme is for. */
  --good: #7FB36B;
  --warn: #D9A441;
  --bad:  #E08A76;
  --info: #78B2CE;

  --panel: #1C1B15;
  --panel-fg: var(--off-white);
  /* Three grounds, not two: the page at #0A0A09, a sunken panel just above it,
     and --surface #16150F for anything raised. A shadow is nearly invisible on
     ink, so the dark one is deeper and tighter rather than the same one dimmed. */
  --bg-sunk: #121109;
  --shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }