/* Shared design tokens for Senior loop and the DSA visualizers: the single source for colour, fonts and the type scale.
   Light is the default; dark is opt-in (theme.js sets data-theme="dark" on <html>, never from the OS setting).
   Check the palette after any colour change: python3 ~/senior-loop/qa/palette-check.py */
:root{
  color-scheme: light;
  /* neutrals: paper-like page; ink-1..3 are text, ink-4 is >=3:1 for borders only, never text */
  --board:#F7F8F7;
  --paper:#FFFFFF;
  --frame:#ECEFEE;
  --frame-2:#DCE1DF;
  --rule:#E3E7E5;
  --ink:#1C1F24;
  --ink-2:#40464E;
  --ink-3:#5F666E;
  --ink-4:#7D848B;

  /* one dry-erase marker per track: >=4.5:1 on paper, board and own 9% tint; lightness spread so pairs stay apart under deutan/protan */
  --dsa:#2152C9;
  --design:#017980;
  --lld:#4E2785;
  --backend:#643612;
  --behavioral:#8B025A;
  --ai:#706A04;
  --mocks:#1C1F24;
  --plan:#40464E;
  --on-track:#FFFFFF;

  /* feedback only (right/wrong, pass/fail, errors, warnings), never a track: >=4.5:1 as text, dE>=25 from every track */
  --ok:#0F7D41;
  --bad:#CD2F36;
  --warn:#A94D11;
  --ok-tint:color-mix(in srgb, var(--ok) 11%, var(--paper));
  --bad-tint:color-mix(in srgb, var(--bad) 8%, var(--paper));
  --warn-tint:color-mix(in srgb, var(--warn) 9%, var(--paper));
  /* filled ok/bad/warn take --on-track text (checked by palette-check.py) */

  /* visualizer highlights: DSA tint, "being compared" probe (border >=3:1 on paper, board and its tint), overlays */
  --dsa-tint:#E6ECF9;
  --probe:#B08000;
  --probe-tint:#FFF4C7;
  --glass:rgba(247,248,247,.92);
  --shadow:rgba(28,31,36,.22);

  /* font families: handwritten display (h1, brand only), body, mono (code, numbers that line up) */
  --hand:"Shantell Sans","Comic Neue","Segoe Print",cursive;
  --body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,sans-serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* type scale: one job per step (THEME-TYPE-AUDIT.md finding 4); --fs-prose drops to 17px at <=640px */
  --fs-label:13px;    --lh-label:1.4;
  --fs-small:15px;    --lh-small:1.5;
  --fs-body:17px;     --lh-body:1.6;
  --fs-prose:18px;    --lh-prose:1.65;
  --fs-title:20px;    --lh-title:1.3;
  --fs-headline:26px; --lh-headline:1.2;
  --fs-display:clamp(32px,5.4vw,46px); --lh-display:1.04;
  --fs-code:13px;     --lh-code:1.7;
  --measure:34em;     /* reading line length (finding 3); re-measure for 60-75 characters */
}
@media (max-width:640px){
  :root{--fs-prose:17px}
}
:root[data-theme="dark"]{
  color-scheme: dark;
  /* neutrals */
  --board:#15181B;
  --paper:#1C2024;
  --frame:#111417;
  --frame-2:#2A3036;
  --rule:#2A3036;
  --ink:#ECEEEF;
  --ink-2:#C4C9CE;
  --ink-3:#959DA5;
  --ink-4:#737B84;

  /* tracks: same hues, lifted for >=4.5:1 on dark paper, board and tint; dark --on-track text on fills */
  --dsa:#7FA6FF;
  --design:#4ECDD6;
  --lld:#A581CE;
  --backend:#BC8C6C;
  --behavioral:#E477AF;
  --ai:#C9BE5E;
  --mocks:#ECEEEF;
  --plan:#C4C9CE;
  --on-track:#0E1420;

  /* feedback only */
  --ok:#53A761;
  --bad:#F97069;
  --warn:#F49D30;
  --ok-tint:color-mix(in srgb, var(--ok) 16%, var(--paper));
  --bad-tint:color-mix(in srgb, var(--bad) 13%, var(--paper));
  --warn-tint:color-mix(in srgb, var(--warn) 13%, var(--paper));

  /* visualizer highlights */
  --dsa-tint:#1E2A45;
  --probe:#E3BE3E;
  --probe-tint:#3A3214;
  --glass:rgba(21,24,27,.92);
  --shadow:rgba(0,0,0,.55);
}