/* Kshana unified design tokens (site + playground, 2026-09-27).
   Single source: explorations/2026-09-27-combo/src/tokens.css. build.py copies it to the site
   root and to the playground, so the two stay byte-identical. Edit here, then run build.py.
   Text colours are chosen for WCAG AA (4.5:1) on the ground they sit on, in both themes.
   Fonts (Google Fonts), add to <head>:
   <link href="../fonts/bricolage-grotesque-geist-geist-mono.css" rel="stylesheet">
   Theme: bare :root = light; prefers-color-scheme dark applies unless data-theme="light";
   data-theme="dark" | "light" on <html> forces a theme. "space" tokens stay dark in both themes.
   Type scale (used by the landing page):
     display  .h2  720 clamp(2.5rem,5.6vw,5.2rem)/.95 var(--f-display), wdth 84
     hero     760 clamp(3rem,7.6vw,7.6rem)/.9 var(--f-display), wdth 82
     h3 card  700 clamp(21px,1.9vw,27px)/1.08 var(--f-display), wdth 88
     lede     clamp(17px,1.45vw,19.5px)/1.5 var(--f-text)
     body     400 17px/1.5 var(--f-text), letter-spacing -.011em
     small    13-14px var(--f-text); labels 11-12.5px var(--f-mono), uppercase, .06-.08em tracking
   Domain colours (one per failure domain, used everywhere):
     --int interference · --spf spoofing · --tim timing · --orb orbits · --itg integrity/validated · --nav navigation
   Spacing: section padding clamp(96px,12vw,160px); gutter var(--gut); grid gaps 14-24px.
*/
/* ================= Tokens ================= */
:root{
  --bg:#E8ECF3; --bg-2:#DEE4EE; --surface:#F5F7FB; --surface-2:#EDF1F7; /* 0.29.2: soft ground, cards a step lighter */
  --ink:#182033; --ink-2:#3A455E; --ink-3:#4E5971; --line:rgba(28,44,84,.12); --line-2:rgba(28,44,84,.2);
  /* six failure domains: one colour each, used across the whole page */
  --int:#B8262B; --spf:#6236E0; --tim:#1C4FE0; --orb:#006C7D; --itg:#0A6F38; --nav:#7C4800;
  --int-card:#E5383B; --spf-card:#6B3FF0; --tim-card:#1F55F0; --orb-card:#008795; --itg-card:#0F8A47; --nav-card:#F5A300;
  /* "space" surfaces stay dark in both themes: the sky, the scope, the console */
  --space:#05060C; --space-2:#0C0E18; --space-3:#151826; --space-ink:#EEF0FA; --space-ink-2:#A3AAC2; --space-ink-3:#8088A6; --space-line:rgba(255,255,255,.08);
  --s-int:#FF5B54; --s-spf:#A58BFF; --s-tim:#6A98FF; --s-orb:#2CD0DE; --s-itg:#3DDC84; --s-nav:#FFB224;
  --sh-1:0 1px 2px rgba(24,40,80,.07); --sh-2:0 0 0 1px rgba(28,44,84,.06),0 2px 4px rgba(24,40,80,.04),0 12px 30px -14px rgba(24,40,80,.2);
  --sh-3:0 1px 1px rgba(0,0,0,.04),0 8px 16px -4px rgba(0,0,0,.08),0 32px 64px -16px rgba(0,0,0,.18),0 80px 140px -40px rgba(0,0,0,.26);
  --r-card:28px; --r-win:16px; --r-sm:12px;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --max:1200px; --gut:clamp(16px,4vw,44px);
  --f-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-text:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#07080E; --bg-2:#0D0F18; --surface:#12141F; --surface-2:#181B28;
    --ink:#F2F4FB; --ink-2:#A6ADC4; --ink-3:#858CA6; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.14);
    --int:#FF5B54; --spf:#9C7DFF; --tim:#5A8CFF; --orb:#24C8D6; --itg:#33CC78; --nav:#FFB224;
    --sh-1:0 0 0 1px rgba(255,255,255,.05); --sh-2:0 0 0 1px rgba(255,255,255,.06),0 24px 48px -24px rgba(0,0,0,.7);
    --sh-3:0 0 0 1px rgba(255,255,255,.08),0 32px 64px -16px rgba(0,0,0,.7),0 80px 160px -40px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#07080E; --bg-2:#0D0F18; --surface:#12141F; --surface-2:#181B28;
  --ink:#F2F4FB; --ink-2:#A6ADC4; --ink-3:#858CA6; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.14);
  --int:#FF5B54; --spf:#9C7DFF; --tim:#5A8CFF; --orb:#24C8D6; --itg:#33CC78; --nav:#FFB224;
  --sh-1:0 0 0 1px rgba(255,255,255,.05); --sh-2:0 0 0 1px rgba(255,255,255,.06),0 24px 48px -24px rgba(0,0,0,.7);
  --sh-3:0 0 0 1px rgba(255,255,255,.08),0 32px 64px -16px rgba(0,0,0,.7),0 80px 160px -40px rgba(0,0,0,.9);
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}
/* print (the Studio report view): paper, not the tinted screen ground */
@media print and (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bg:#FFFFFF; --bg-2:#F2F4F8; --surface:#FFFFFF; --surface-2:#F6F8FB}}
@media print{:root[data-theme="light"]{--bg:#FFFFFF; --bg-2:#F2F4F8; --surface:#FFFFFF; --surface-2:#F6F8FB}}