/* =====================================================================
   Design tokens: the only place colors, spacing and type are defined.
   Every page and component uses these variables (app.css); no page sets
   its own colors, sizes or spacing. docs/design/token-plan.md says why.

   Colors      a family of related darks (night turf, sideline, hash), chalk
               type, and ONE accent, pylon orange, used only on the field
               (the yard-line field behind the Dashboard, Program Fit and the
               Title page, and the Opportunity Map): its goal lines and
               pylons. Actions, links, focus and chart lines are chalk.
               Semantic green / gold / red for value gap, warnings and
               confidence, unchanged.
   Type        Inter for every sentence and label, in sentence case; Barlow
               Condensed (tabular figures) for figures and headings. Scale:
               1.25 steps from 13px. Both SIL OFL, served from /ui/fonts/.
   Spacing     8-px scale (--sp-1 = 8px ... --sp-6 = 48px), --sp-half = 4px.
   Themes      dark (default), light on request: <html data-theme="light|dark">
               (the Settings toggle); "system" follows the OS.
   ===================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url("/ui/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
             src: url("/ui/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("/ui/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("/ui/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  /* --- type ------------------------------------------------------------ */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-num: "Barlow Condensed", "Arial Narrow", sans-serif;   /* figures: tabular, like a jersey numeral */
  --font-fig: "Barlow Condensed", "Arial Narrow", sans-serif;   /* headings and hero figures */
  --font-code: ui-monospace, "SF Mono", Menlo, monospace;       /* code and keys only */
  --fs-xs: 12px;    /* labels, chips, meta */
  --fs-sm: 12px;    /* table cells */
  --fs-md: 13px;    /* body */
  --fs-lg: 16px;    /* section titles */
  --fs-xl: 25px;    /* page titles (condensed) */
  --fs-2xl: 31px;   /* figures */
  --fs-hero: 39px;  /* the decision on Program Fit */
  --lh: 1.45;
  --measure: 72ch;  /* the longest line of prose */
  --fw-medium: 500;
  --fw-bold: 600;

  /* --- spacing (8-px scale) ---------------------------------------------- */
  --sp-half: 4px;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;

  /* --- shape --------------------------------------------------------------- */
  --radius-sm: 3px;
  --radius: 4px;
  --nav-width: 232px;
  --row-h: 32px;

  /* --- light theme ----------------------------------------------------------- */
  --bg: #f4f2ec;            /* night turf, by day: a warm paper */
  --surface: #ffffff;       /* sideline: tables, panels, inputs */
  --surface-2: #eeece5;
  --surface-3: #e3e1d9;
  --line: #d9dcd3;          /* hash: rules, only where a line separates */
  --line-strong: #bfc4b9;
  --ink: #16201b;           /* chalk, by day: near-black green */
  --ink-2: #39443d;
  --muted: #5d675f;
  --faint: #636c65;
  --nav-bg: #16201b;
  --nav-ink: #cfd3ca;
  --nav-muted: #9aa39a;
  --nav-active: #ffffff;
  --nav-active-bg: #27342d;

  --accent: #16201b;        /* the action color: chalk (buttons, links, focus, the selected tab, chart lines) */
  --accent-ink: #ffffff;
  --accent-soft: #e3e1d9;
  --pylon: #b4470f;         /* the one accent: the field's goal lines and pylons, nowhere else */

  --pos: #1d7a4b;  --pos-soft: #e5f3eb;   /* positive value gap, high confidence */
  --warn: #9a5b00; --warn-soft: #fbf0dc;  /* caution, medium confidence, drafts */
  --neg: #b42318;  --neg-soft: #fbe9e7;   /* negative gap, low confidence, rule violations */

  --overlay-shadow: 0 6px 24px rgba(22, 32, 27, .16);   /* menus that float over the page, nothing else */
  --turf-line: rgba(22, 32, 27, .07);
  --turf-num: rgba(22, 32, 27, .16);
  --film-bg: #000000; --film-strip: #060807; --film-ink: #ebe8df; --film-line: #1c241f;
}

/* Dark theme: by system preference unless the user forced light, or forced dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111814; --surface: #18211c; --surface-2: #1f2a24; --surface-3: #27342d;
    --line: #2a362f; --line-strong: #3a4840;
    --ink: #ebe8df; --ink-2: #c3c8bf; --muted: #9aa39a; --faint: #86908a;
    --nav-bg: #0d130f; --nav-ink: #c3c8bf; --nav-muted: #8d978f; --nav-active: #ebe8df; --nav-active-bg: #1f2a24;
    --accent: #ebe8df; --accent-ink: #111814; --accent-soft: #27342d;
    --pylon: #e07a35;
    --pos: #5fd394; --pos-soft: #12281b; --warn: #e9c46a; --warn-soft: #2b2512; --neg: #ff6b7a; --neg-soft: #33171c;
    --overlay-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    --turf-line: rgba(235, 232, 223, .08);   /* yard lines behind the Dashboard, Program Fit and the Title page */
    --turf-num: rgba(235, 232, 223, .13);    /* the yard numerals */
  }
}
:root[data-theme="dark"] {
    --bg: #111814; --surface: #18211c; --surface-2: #1f2a24; --surface-3: #27342d;
    --line: #2a362f; --line-strong: #3a4840;
    --ink: #ebe8df; --ink-2: #c3c8bf; --muted: #9aa39a; --faint: #86908a;
    --nav-bg: #0d130f; --nav-ink: #c3c8bf; --nav-muted: #8d978f; --nav-active: #ebe8df; --nav-active-bg: #1f2a24;
    --accent: #ebe8df; --accent-ink: #111814; --accent-soft: #27342d;
    --pylon: #e07a35;
    --pos: #5fd394; --pos-soft: #12281b; --warn: #e9c46a; --warn-soft: #2b2512; --neg: #ff6b7a; --neg-soft: #33171c;
    --overlay-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    --turf-line: rgba(235, 232, 223, .08);   /* yard lines behind the Dashboard, Program Fit and the Title page */
    --turf-num: rgba(235, 232, 223, .13);    /* the yard numerals */
}