/* Self-hosted fonts (perf audit, 2026-10-27): the Google Fonts stylesheet was render-blocking
   on every page. Variable-weight woff2, SIL Open Font License 1.1 — see static/fonts/README. */
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/static/fonts/mulish-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/static/fonts/mulish-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/static/fonts/roboto-slab-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/static/fonts/roboto-slab-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Shared brand tokens — the single source of truth (extracted 2026-08-28 for
   dark mode; every page previously carried its own copy of the :root block).

   Three-state theming: bare :root = light; the media block = OS-follow dark
   (only when no explicit choice); :root[data-theme="dark"] = the toggle.
   The toggle writes localStorage.theme and each page's head bootstrap stamps
   it on <html> before first paint. Keep the two dark blocks IDENTICAL. */
:root{
  --navy:#192755; --charcoal:#2e3038; --ink-muted:#667085;
  --jelly:#7422ce; --jelly-dark:#450e6c; --jelly-xlight:#f9f5ff;
  --seagull:#00b8d8; --meadow:#00bc7d; --harvest:#ffbf1b;
  --surface:#f7f8f8; --card:#fff; --line:#eaecf0; --line-strong:#d8dadf;
  --hover:#fafbff; --danger:#c00;
  --btn:#7422ce; --btn-hover:#450e6c; --ok:#047857;   /* AA text contrast (UX audit 2026-10-26) */
  --warn-bg:#fff7ed; --warn-border:#fed7aa;
  --badge-bg:#fffcea; --badge-border:#ffe785;
  --strawberry-x:#fff0f1; --strawberry-line:#ffc1c4;
  --amber:#b45309; --tip-bg:var(--navy); --tip-text:#fff;
  --display:"Roboto Slab",Georgia,serif;
  --sans:"Proxima Nova",Mulish,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:var(--sans);
  font-family:var(--sans);color:var(--charcoal);
  color-scheme:light;      /* native controls, option lists, date pickers follow the scheme */
}

/* Form controls take the theme's ink and card colors everywhere. Pages add their own
   padding/border/font, but never rely on the browser default (black) for text — in dark
   mode that put black text on a dark card (2026-09-09). */
select,input,button,textarea{color:var(--charcoal);background-color:var(--card)}
option{color:var(--charcoal);background:var(--card)}
::placeholder{color:var(--ink-muted);opacity:1}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#b7c3f7; --charcoal:#e2e5ec; --ink-muted:#8b93a7;
    --jelly:#a97bf0; --jelly-dark:#c9a8f5; --jelly-xlight:#221a33;
    --harvest:#e0a812;
    --surface:#111318; --card:#1a1d24; --line:#2a2e37; --line-strong:#343946;
    --hover:#20242d; --danger:#ff6b6b;
    --btn:#6b3fc0; --btn-hover:#5a2fa8; --ok:#34d399;
    --warn-bg:#2b2013; --warn-border:#6b4a1c;
    --badge-bg:#2a2410; --badge-border:#5d5320;
    --strawberry-x:#331a1d; --strawberry-line:#6b3238;
    --amber:#e8a54b; --tip-bg:#343946; --tip-text:#e2e5ec;
    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --navy:#b7c3f7; --charcoal:#e2e5ec; --ink-muted:#8b93a7;
  --jelly:#a97bf0; --jelly-dark:#c9a8f5; --jelly-xlight:#221a33;
  --harvest:#e0a812;
  --surface:#111318; --card:#1a1d24; --line:#2a2e37; --line-strong:#343946;
  --hover:#20242d; --danger:#ff6b6b;
    --btn:#6b3fc0; --btn-hover:#5a2fa8; --ok:#34d399;
  --warn-bg:#2b2013; --warn-border:#6b4a1c;
  --badge-bg:#2a2410; --badge-border:#5d5320;
  --strawberry-x:#331a1d; --strawberry-line:#6b3238;
  --amber:#e8a54b; --tip-bg:#343946; --tip-text:#e2e5ec;
  color-scheme:dark;
}