/* ══ GridReady · shared tokens ═══════════════════════════════════════
   Self-hosted type (no Google Fonts CDN) + the Spruce token set lifted
   verbatim from ui/index.html. One foundation, two dials: mode
   (light/dark, auto via OS) and skin. Nothing hard-codes a colour;
   every value reads from a token. Linked by both the public client
   portal and the admin portal. */

@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("./fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("./fonts/public-sans-latin.woff2") format("woff2");
}
@font-face{
  font-family:'Public Sans';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url("./fonts/public-sans-italic-latin.woff2") format("woff2");
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("./fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root{
  color-scheme:light dark;
  /* FOUNDATION: never changes */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --fs-xs:.75rem;--fs-sm:.875rem;--fs-base:1rem;--fs-md:1.25rem;--fs-lg:1.563rem;--fs-xl:1.953rem;--fs-2xl:2.441rem;--fs-3xl:3.052rem;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Public Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-pill:100px;
  /* MODE = light (warm oat) + SKIN = GridReady Spruce */
  /* --muted darkened from #6A6A62 to #62625A: the paper surface (WS5/
     Lane A) put small muted text directly on --bg rather than --surface,
     and #6A6A62 only clears AA (4.5:1) against --surface (4.88:1), not
     against --bg (4.30:1, fails). #62625A measures 4.86:1 on --bg and
     5.51:1 on --surface, so it clears AA against both. Dark mode's
     --muted is untouched (already 6.28:1). */
  /* --border-control is the boundary of an interactive control (inputs,
     selects, textareas, the mode toggle, the rating stars). WCAG 1.4.11 asks
     3:1 for a boundary you need in order to identify a control, and
     --border-strong measures 1.44:1 light and 1.91:1 dark, so it cannot carry
     one. It stays as it is for decorative hairlines, where no ratio applies.
     --border-control measures 3.07:1 on --bg and 3.48:1 on --surface in light,
     3.66:1 and 3.18:1 in dark.
     --success darkened from #2E7D5B to #2A7154: it is rendered as pill TEXT
     (client.css .pill.ok), and #2E7D5B is 3.95:1 on --bg, below AA. #2A7154
     measures 4.62:1 on --bg and 5.24:1 on --surface. Dark mode's --success is
     untouched (7.22:1). */
  --bg:#EAE4D7;--surface:#F6F2E9;--text:#1A1B1E;--muted:#62625A;
  --border:#DAD3C3;--border-strong:#C8BFAD;--border-control:#8C8069;--on-accent:#F6F2E9;
  --success:#2A7154;--warning:#8A5A12;--error:#B23A2E;
  --shadow:0 1px 2px rgba(26,27,30,.05),0 12px 30px -16px rgba(26,27,30,.20);
  --accent:#1F5D4C;--accent-deep:#164539;--accent-tint:#D8E7E0;--accent-subtle:#B4D2C6;
  --secondary:#C0852E;--secondary-tint:#F0E6D0;
  --seq1:#D8E7E0;--seq2:#9BC3B4;--seq3:#4E9078;--seq4:#1F5D4C;--seq5:#123D31;
}
/* dark tokens, applied automatically when the device prefers dark */
@media(prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#0D1626;--surface:#16233A;--text:#E7ECF5;--muted:#8C99AE;
    --border:#243449;--border-strong:#34475F;--border-control:#5A7290;--on-accent:#06101F;
    --success:#5FB489;--warning:#E0A24C;--error:#E0796A;
    --shadow:0 2px 6px rgba(0,0,0,.55),0 20px 48px -20px rgba(0,0,0,.8);
    --accent:#4FC0A0;--accent-deep:#7FD9BF;--accent-tint:#143A30;--accent-subtle:#2A5F50;
    --secondary:#E0A24C;--secondary-tint:#2A2113;
    --seq1:#1E5445;--seq2:#2C7A64;--seq3:#3FA184;--seq4:#4FC0A0;--seq5:#8FE5CE;
  }
}
/* manual override wins over the OS media query (higher specificity) */
:root[data-mode="light"]{
  color-scheme:light;
  --bg:#EAE4D7;--surface:#F6F2E9;--text:#1A1B1E;--muted:#62625A;
  --border:#DAD3C3;--border-strong:#C8BFAD;--border-control:#8C8069;--on-accent:#F6F2E9;
  --success:#2A7154;--warning:#8A5A12;--error:#B23A2E;
  --shadow:0 1px 2px rgba(26,27,30,.05),0 12px 30px -16px rgba(26,27,30,.20);
  --accent:#1F5D4C;--accent-deep:#164539;--accent-tint:#D8E7E0;--accent-subtle:#B4D2C6;
  --secondary:#C0852E;--secondary-tint:#F0E6D0;
  --seq1:#D8E7E0;--seq2:#9BC3B4;--seq3:#4E9078;--seq4:#1F5D4C;--seq5:#123D31;
}
:root[data-mode="dark"]{
  color-scheme:dark;
  --bg:#0D1626;--surface:#16233A;--text:#E7ECF5;--muted:#8C99AE;
  --border:#243449;--border-strong:#34475F;--border-control:#5A7290;--on-accent:#06101F;
  --success:#5FB489;--warning:#E0A24C;--error:#E0796A;
  --shadow:0 2px 6px rgba(0,0,0,.55),0 20px 48px -20px rgba(0,0,0,.8);
  --accent:#4FC0A0;--accent-deep:#7FD9BF;--accent-tint:#143A30;--accent-subtle:#2A5F50;
  --secondary:#E0A24C;--secondary-tint:#2A2113;
  --seq1:#1E5445;--seq2:#2C7A64;--seq3:#3FA184;--seq4:#4FC0A0;--seq5:#8FE5CE;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);
  font-size:var(--fs-base);line-height:1.55;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
b,strong{font-weight:600}