/* Site palette and type scale. Every page links this file first and builds on these tokens.
   Palette (from the CCAO-F recap deck): #FFFFFB paper · #FFF1DC cream · #FFD2A6 peach · #EE9D44 orange · #2A3446 slate · #1D242F navy.
   Contrast: orange is a fill colour (dark text on it). For orange-coloured TEXT use --orange-ink, which passes AA on paper/cream. */
/* Atkinson Hyperlegible (Braille Institute, SIL OFL 1.1), self-hosted in fonts/: no request to Google. See NOTICE.md. */
@font-face{font-family:"Atkinson Hyperlegible"; src:url("fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:"Atkinson Hyperlegible"; src:url("fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:"Atkinson Hyperlegible"; src:url("fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap;}
@font-face{font-family:"Atkinson Hyperlegible"; src:url("fonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2"); font-weight:700; font-style:italic; font-display:swap;}
:root{
  --paper:#FFFFFB;
  --cream:#FFF1DC;
  --peach:#FFD2A6;
  --orange:#EE9D44;
  --slate:#2A3446;

  --slate-deep:#1D242F;      /* header, footer, dark panels */
  --slate-soft:#E8EBF0;      /* quiet fills, meter tracks */
  --orange-ink:#8C5214;      /* orange text on light backgrounds (AA) */
  --ink:#24263A;             /* body text */
  --muted:#5D6078;           /* secondary text (AA on paper and cream) */
  --line:#EADFCF;            /* borders on paper/cream */
  --card:#FFFFFF;
  --good:#2E7D4F; --good-soft:#E6F3EA;
  --bad:#B3261E;  --bad-soft:#FBE9E7;

  /* legacy aliases so older page CSS picks up the palette */
  --navy:var(--slate-deep); --panel:var(--slate); --grey:var(--muted);
  --accent:var(--orange); --accent-ink:var(--orange-ink); --accent-soft:var(--cream);
  --gold:var(--orange); --green:var(--good); --green-soft:var(--good-soft); --red:var(--bad); --red-soft:var(--bad-soft);

  --page-max:1880px;       /* pages use the full width of large desktop screens */
  --page-pad:clamp(16px,2.6vw,48px);
  --radius:14px;
  --shadow:0 6px 24px rgba(61,64,91,.08);
  --font:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:Consolas,"Cascadia Mono","SF Mono",monospace;
}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--font); background:var(--paper); color:var(--ink); font-size:18px; line-height:1.6;}
@media (min-width:1280px){ body{font-size:19px;} }
a{color:inherit;}
::selection{background:var(--peach);}
:focus-visible{outline:3px solid var(--orange); outline-offset:2px;}