/* Design tokens (spec docs/superpowers/specs/2026-10-12-layout-design-system-design.md, section 6.1). Loaded first.
   1. Primitives: named for what they are. Only this file has raw values.
   2. Semantic tokens: named for what they do. Components and board rules read these (and the spacing, radius and text
      scales); a semantic token reads primitives. References point down only.
   3. Themes change only the semantic colours: light (whiteboard), dark by the system setting, dark by choice.
   The token test (test/design-tokens.test.js) checks these rules. */
:root{ /* primitives */
  /* spacing: a 4 px base; layout uses the 8 px steps */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --radius-1:8px; --radius-2:12px; --radius-pill:999px;
  /* text sizes */
  --text-1:12px; --text-2:14px; --text-3:16px; --text-4:20px; --text-5:28px;
  /* Long reading (a problem page's guide; owner, 2026-10-24): fluid, 16 px on a phone up to 18 px from about 1280 px
     wide, in rem plus vw so a player's text size and browser zoom both work (WCAG 1.4.4; range only x1.125). */
  --text-read:clamp(1rem, 0.85rem + 0.45vw, 1.125rem);
  /* font stacks */
  --font-inter:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-kalam:'Kalam','Segoe Print','Bradley Hand',cursive;
  --font-atkinson:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-plex-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  /* the whiteboard grays */
  --gray-0:#ffffff; --gray-25:#f6f8fa; --gray-100:#e9edf0; --gray-200:#c8d0d8; --gray-250:#cfd7de; --gray-600:#5b6876; --gray-900:#1d2733;
  /* the chalkboard grays (green-tinted) */
  --chalk-50:#e9efe9; --chalk-300:#9fb1aa; --chalk-700:#35473f; --chalk-750:#2c3b37; --chalk-850:#1f2c29; --chalk-900:#1c2825; --chalk-950:#121a18;
  /* hues */
  --blue-600:#2563c9; --blue-200:#8cc3ff;
  --orange-700:#9a4d00; --orange-600:#d26a12; --orange-200:#ffb066; --orange-50:#fff4e5; --orange-950:#3a2c17;
  --red-700:#b42318; --red-600:#cc3a2e; --red-300:#ff7d70; --red-50:#fff4f2; --red-950:#2a1715;
  --green-600:#24864c; --green-300:#80d99c;
  --yellow-300:#ffd93d; --yellow-100:#fff2b3; --yellow-400:#e6d35a; --yellow-700:#8a6a00; --yellow-900:#47421f;
  /* Okabe–Ito dot colours (colour-vision safe), with lighter versions for the chalkboard */
  --oi-blue:#0072B2; --oi-sky:#56B4E9; --oi-orange:#E69F00; --oi-orange-light:#F5B841; --oi-green:#009E73; --oi-green-light:#3FC79E;
  --oi-purple:#CC79A7; --oi-purple-light:#E3A6CB; --oi-olive:#8A7A00; --oi-yellow:#F0E442; --oi-gray:#8C8C8C; --oi-gray-light:#B5B5B5;
  --oi-navy:#00507F; --oi-sky-pale:#9CD3F2; --oi-violet:#7A4E9E; --oi-violet-light:#C7A6E6; --oi-khaki:#6B6B00; --oi-khaki-light:#D8D06A;
  --oi-vermilion:#D55E00; --oi-vermilion-light:#FF8A5B;
  /* see-through layers */
  --ink-a10:rgba(29,39,51,.10); --black-a35:rgba(0,0,0,.35); --night-a62:rgba(10,16,20,.62);
}
:root{ /* semantic: the same in every theme */
  --gap-edge:var(--space-4);    /* the one outside gutter: bar sides, island to window edge, island to island, page side */
  --pad-island:var(--space-3);  /* inside an island, a card or a popup */
  --bar-h:64px; --ctl-h:36px; --icon:20px; --page-w:760px; --panel-w:244px;
  --rail-w:76px; /* the Components column on a phone held sideways */
  --drawer-w:300px; /* the drawer, at most 85% of the window */
  --coach-w:320px; /* the coach panel: open width, folded maximum (the hint ladder; later the tutor chat) */
  --dock-h:calc(var(--ctl-h) + 2 * var(--space-1) + 3px); /* the zoom bar at the bottom right: a control row in an island */
  /* hand-drawn corners: radius-1 / radius-2 with a 1–2 px wobble (buttons, chips / islands, cards, popups), the sticky note */
  --radius-sketch-1:8px 10px 7px 9px; --radius-sketch-2:13px 10px 12px 11px; --radius-note:3px 10px 4px 8px;
  --font-display:var(--font-inter); --font-hand:var(--font-kalam); --font-body:var(--font-atkinson); --font-mono:var(--font-plex-mono);
}
/* Vietnamese (src/i18n): Atkinson Hyperlegible has no stacked tone marks (ế, ộ), so a word would mix two fonts; Inter has
   them (its vietnamese subset is self-hosted). Kalam stays: the board's box names are part names, which stay English. */
:root:lang(vi){--font-body:var(--font-inter)}
/* The bar is 56 px on a phone upright and 48 px on a phone held sideways (PHONE_Q, SHORT_Q in ui/ctx.js); every control
   is 44 px on a touch screen (WCAG 2.5.5). */
@media (max-width:720px) and (min-height:501px){:root{--bar-h:56px}}
@media (max-height:500px){:root{--bar-h:48px}}
@media (pointer:coarse){:root{--ctl-h:44px}}
/* Themes: semantic colours only. Light = the whiteboard. */
:root,:root[data-theme="light"]{
  --color-paper:var(--gray-100); --color-board:var(--gray-25); --color-grid:var(--gray-200); --color-surface:var(--gray-0);
  --color-ink:var(--gray-900); --color-muted:var(--gray-600); --color-line:var(--gray-250); --color-on-mark:var(--gray-900);
  --color-accent:var(--blue-600); --color-warn:var(--orange-600); --color-danger:var(--red-600); --color-ok:var(--green-600);
  --color-alert:var(--red-700); --color-alert-bg:var(--red-50);
  /* --color-twist-bg: the briefing's twist box, amber like the twist banner (taste review, 2026-10-21). */
  --color-twist-bg:var(--orange-50);
  /* --color-twist-ink: the Twist segment in the bar, amber like the twist banner (red means Failed): 6.1:1 on white. */
  --color-twist-ink:var(--orange-700);
  /* --color-tip-ink: the Tip word and icon (coach v2): 5.07:1 on white, 9.53:1 on the dark panel. */
  --color-mark:var(--yellow-300); --color-mark-soft:var(--yellow-100); --color-tip-ink:var(--yellow-700); --color-shadow:var(--ink-a10); --color-backdrop:var(--night-a62);
  --dot-read:var(--oi-blue); --dot-write:var(--oi-orange); --dot-photo:var(--oi-green); --dot-email:var(--oi-purple); --dot-bot:var(--oi-purple); --dot-cart:var(--oi-olive);
  --dot-search:var(--oi-gray); --dot-index:var(--oi-gray); --dot-hotread:var(--oi-navy); --dot-click:var(--oi-violet); --dot-id:var(--oi-khaki); --dot-timeline:var(--oi-violet); --dot-hydrate:var(--oi-khaki); --dot-lost:var(--oi-vermilion);
  --dot-deliver:var(--oi-green); --dot-ask:var(--oi-gray); --dot-push:var(--oi-purple); --dot-status:var(--oi-olive); --dot-reconnect:var(--oi-navy);
  --dot-mail:var(--oi-orange); --dot-sms:var(--oi-green);
  --loss-cap:.45;
}
/* Dark = the chalkboard: by the system setting, unless the page asks for light. Keep the two dark blocks the same. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --color-paper:var(--chalk-950); --color-board:var(--chalk-900); --color-grid:var(--chalk-750); --color-surface:var(--chalk-850);
  --color-ink:var(--chalk-50); --color-muted:var(--chalk-300); --color-line:var(--chalk-700); --color-on-mark:var(--gray-900);
  --color-accent:var(--blue-200); --color-warn:var(--orange-200); --color-danger:var(--red-300); --color-ok:var(--green-300);
  --color-alert:var(--red-300); --color-alert-bg:var(--red-950); --color-twist-bg:var(--orange-950); --color-twist-ink:var(--orange-200);
  --color-mark:var(--yellow-400); --color-mark-soft:var(--yellow-900); --color-tip-ink:var(--yellow-400); --color-shadow:var(--black-a35); --color-backdrop:var(--night-a62);
  --dot-read:var(--oi-sky); --dot-write:var(--oi-orange-light); --dot-photo:var(--oi-green-light); --dot-email:var(--oi-purple-light); --dot-bot:var(--oi-purple-light); --dot-cart:var(--oi-yellow);
  --dot-search:var(--oi-gray-light); --dot-index:var(--oi-gray-light); --dot-hotread:var(--oi-sky-pale); --dot-click:var(--oi-violet-light); --dot-id:var(--oi-khaki-light); --dot-timeline:var(--oi-violet-light); --dot-hydrate:var(--oi-khaki-light); --dot-lost:var(--oi-vermilion-light);
  --dot-deliver:var(--oi-green-light); --dot-ask:var(--oi-gray-light); --dot-push:var(--oi-purple-light); --dot-status:var(--oi-yellow); --dot-reconnect:var(--oi-sky-pale);
  --dot-mail:var(--oi-orange-light); --dot-sms:var(--oi-green-light);
  --loss-cap:.28; color-scheme:dark;
}}
/* Dark by choice. */
:root[data-theme="dark"]{
  --color-paper:var(--chalk-950); --color-board:var(--chalk-900); --color-grid:var(--chalk-750); --color-surface:var(--chalk-850);
  --color-ink:var(--chalk-50); --color-muted:var(--chalk-300); --color-line:var(--chalk-700); --color-on-mark:var(--gray-900);
  --color-accent:var(--blue-200); --color-warn:var(--orange-200); --color-danger:var(--red-300); --color-ok:var(--green-300);
  --color-alert:var(--red-300); --color-alert-bg:var(--red-950); --color-twist-bg:var(--orange-950); --color-twist-ink:var(--orange-200);
  --color-mark:var(--yellow-400); --color-mark-soft:var(--yellow-900); --color-tip-ink:var(--yellow-400); --color-shadow:var(--black-a35); --color-backdrop:var(--night-a62);
  --dot-read:var(--oi-sky); --dot-write:var(--oi-orange-light); --dot-photo:var(--oi-green-light); --dot-email:var(--oi-purple-light); --dot-bot:var(--oi-purple-light); --dot-cart:var(--oi-yellow);
  --dot-search:var(--oi-gray-light); --dot-index:var(--oi-gray-light); --dot-hotread:var(--oi-sky-pale); --dot-click:var(--oi-violet-light); --dot-id:var(--oi-khaki-light); --dot-timeline:var(--oi-violet-light); --dot-hydrate:var(--oi-khaki-light); --dot-lost:var(--oi-vermilion-light);
  --dot-deliver:var(--oi-green-light); --dot-ask:var(--oi-gray-light); --dot-push:var(--oi-purple-light); --dot-status:var(--oi-yellow); --dot-reconnect:var(--oi-sky-pale);
  --dot-mail:var(--oi-orange-light); --dot-sms:var(--oi-green-light);
  --loss-cap:.28; color-scheme:dark;
}