/* nextplay kits: the design tokens (Option B "Coach's Clipboard", picked 2026-10-17), light and dark.

   Linked LAST on every kits page (after /np/app.css, /web/app.css, /web/league.css), so what it sets
   on :root wins. Every color, font and radius a kits page uses goes through a --k-* token here; new
   CSS never writes a raw hex. The old names the pages still use (--bg, --tx, --accent, --st-card,
   --cond, ...) are mapped onto the tokens at the bottom, so those already follow the theme; the
   hard-coded hexes left in app.css and league.css are swept onto tokens in the restyle step.

   Themes: Light (clipboard paper, white cards, whistle orange), Dark (a chalkboard: green-black
   slate, chalk-white lines and text, the hardwood stripe darker, whistle orange still the one action
   color), System (the default: follows the device). The choice is <html data-theme="light|dark|system">,
   set before the first paint by the inline boot script in each page's <head> from localStorage
   'np-theme' (or ?theme=light|dark|system on any page, kept); web/js/theme.js reads and changes it.
   Dark values are written twice below (for data-theme="dark", and for System on a dark device):
   tests/test_kits_theme.py keeps the two blocks identical and checks text contrast >= 4.5:1.

   Fonts are self-hosted (web/fonts, latin subset, licenses beside them): no request leaves the app. */

/* ------------------------------------------------------------------------------------------ fonts */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-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: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500-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: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-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: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-700-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: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-condensed-500-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: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600-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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700-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: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800-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: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800-italic-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: "JetBrains Mono"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/jetbrains-mono-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: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/permanent-marker-400-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; }

/* ------------------------------------------------------------------------ light (the clipboard) */
:root {
  color-scheme: light;
  /* surfaces: clipboard paper, white cards */
  --k-bg: #f5f1e8;              /* the page: clipboard paper */
  --k-surface: #ffffff;         /* cards, the bar, the side column */
  --k-surface-2: #faf8f3;       /* a card inside a card, table heads, hover */
  --k-surface-3: #e7dfcd;       /* pressed, the chosen tab of an old-style segment */
  --k-sunken: #ebe4d4;          /* segment wells, switch tracks, chips at rest */
  --k-line: #ddd5c4;
  --k-line-2: #c2b8a3;          /* control borders */
  --k-grid: rgba(22, 24, 27, 0.035);   /* the paper's faint grid */
  /* ink */
  --k-text: #16181b;
  --k-text-2: #41464e;
  --k-text-3: #62676f;
  /* the one action color: whistle orange */
  --k-accent: #ef5a1c;          /* fills: primary buttons, the chosen marker, the progress bar */
  --k-accent-deep: #c2410b;     /* hover and pressed fills, its border */
  --k-accent-text: #b93d0a;     /* the accent as text or an icon on a surface (a shade under -deep: 4.5:1 on its tint too) */
  --k-accent-tint: #fde8dc;     /* a quiet accent background, the focus halo */
  --k-accent-ink: #ffffff;      /* text on an accent fill: 3.4:1 on --k-accent (B's whistle), so bold 19 px and up there;
                                   smaller labels on --k-accent-deep (5.2:1) */
  /* states */
  --k-good: #177a43;  --k-good-tint: #e1f2e8;   /* B's #1c8a4c a shade deeper: 4.5:1 as text on paper */
  --k-bad: #c62828;   --k-bad-tint: #fbe3e1;
  --k-warn: #966300;  --k-warn-tint: #fff1cf;   /* B's #a86f00 a shade deeper, the same reason */
  --k-pass: #1f5fd1;  --k-pass-tint: #e3ecfb;
  --k-ai: #5b3fc4;    --k-ai-tint: #efeaff;
  --k-film: #16181b;            /* the film / Watch affordance: an ink tag */
  --k-film-ink: #ffffff;
  --k-warn-ink: #ffffff;  --k-ai-ink: #ffffff;   /* text on a --k-warn / --k-ai fill (a count, a who chip) */
  --k-ref: #c9ced6;  --k-ref-ink: #111418;        /* the officials' grey tag */
  /* marker pens: the diagrams' grammar (a pass blue dashed, a screen a red T-bar) */
  --k-marker-red: #d3302f;
  --k-marker-blue: #1f5fd1;
  --k-marker-green: #1c8a4c;
  /* the hardwood stripe under the bar */
  --k-maple: #e3b985;  --k-maple-2: #cf9a5e;  --k-maple-3: #b9824a;  --k-maple-4: #ddb07a;  --k-maple-line: #fffaf0;
  /* the whiteboard court */
  --k-board: #fcfcf8;  --k-board-line: #26292e;  --k-board-paint: #fdeee4;
  /* teams, until a league's own colors say otherwise */
  --k-team-black: #1b1d21;  --k-team-yellow: #f2c230;
  /* on the video (the same in both themes: the picture is the picture) */
  --k-scrim: rgba(9, 12, 16, 0.86);
  --k-on-video: #ffffff;
  --k-video-bg: #000000;
  --k-video-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  /* the transcript's kinds: a pill each, text on -bg, edged with -line */
  --k-kind-make: #ffffff;  --k-kind-make-bg: #177a43;  --k-kind-make-line: #177a43;
  --k-kind-miss: #41464e;  --k-kind-miss-bg: #ffffff;  --k-kind-miss-line: #c2b8a3;
  --k-kind-pass: #1f5fd1;  --k-kind-pass-bg: #e3ecfb;  --k-kind-pass-line: #bcd0f4;
  --k-kind-reb: #6a4b1c;   --k-kind-reb-bg: #efe7d8;   --k-kind-reb-line: #dccaa6;
  --k-kind-stl: #ffffff;   --k-kind-stl-bg: #16181b;   --k-kind-stl-line: #16181b;
  --k-kind-tov: #c62828;   --k-kind-tov-bg: #fbe3e1;   --k-kind-tov-line: #f0bdb7;
  --k-kind-ast: #17703e;   --k-kind-ast-bg: #e1f2e8;   --k-kind-ast-line: #9fd2b3;
  --k-kind-sub: #41464e;   --k-kind-sub-bg: #ebe4d4;   --k-kind-sub-line: #c2b8a3;
  --k-kind-ft: #17703e;    --k-kind-ft-bg: #ffffff;    --k-kind-ft-line: #9fd2b3;
  /* depth and focus */
  --k-shadow: 0 1px 0 rgba(22, 24, 27, 0.05), 0 2px 10px rgba(22, 24, 27, 0.06);
  --k-shadow-pop: 0 14px 36px rgba(22, 24, 27, 0.2), 0 2px 6px rgba(22, 24, 27, 0.1);
  --k-shadow-hard: 6px 6px 0 rgba(22, 24, 27, 0.1);
  --k-focus: #ef5a1c;
  --k-focus-ring: 0 0 0 3px #fde8dc;
}

/* ---------------------------------------------------------- dark (the chalkboard), chosen by hand */
:root[data-theme="dark"] {
  color-scheme: dark;
  --k-bg: #121315;
  --k-surface: #1a1b1e;
  --k-surface-2: #212226;
  --k-surface-3: #2b2d32;
  --k-sunken: #0d0e10;
  --k-line: #303238;
  --k-line-2: #464a52;
  --k-grid: rgba(239, 234, 219, 0.035);
  --k-text: #efeadb;
  --k-text-2: #cbc8ba;
  --k-text-3: #a4a7ad;
  --k-accent: #ff7a3d;
  --k-accent-deep: #ff9461;
  --k-accent-text: #ff8f5a;
  --k-accent-tint: #4a2a1a;
  --k-accent-ink: #1a0c04;
  --k-good: #5fd394;  --k-good-tint: #1c3a2b;
  --k-bad: #ff8077;   --k-bad-tint: #44231f;
  --k-warn: #f2bb52;  --k-warn-tint: #3d3119;
  --k-pass: #84b1ff;  --k-pass-tint: #1d2d48;
  --k-ai: #c3b1ff;    --k-ai-tint: #2d2747;
  --k-film: #efeadb;
  --k-film-ink: #121315;
  --k-warn-ink: #1a1300;  --k-ai-ink: #1b1030;
  --k-ref: #c9ced6;  --k-ref-ink: #111418;
  --k-marker-red: #ff7a6e;
  --k-marker-blue: #7eadff;
  --k-marker-green: #5fd394;
  --k-maple: #8a6440;  --k-maple-2: #6f4e30;  --k-maple-3: #4e3621;  --k-maple-4: #7f5c3a;  --k-maple-line: #d8c7a6;
  --k-board: #17181b;  --k-board-line: #e9e4d4;  --k-board-paint: #2a2c31;
  --k-team-black: #1b1d21;  --k-team-yellow: #f2c230;
  --k-scrim: rgba(9, 12, 16, 0.86);
  --k-on-video: #ffffff;
  --k-video-bg: #000000;
  --k-video-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  --k-kind-make: #0d1a13;  --k-kind-make-bg: #5fd394;  --k-kind-make-line: #5fd394;
  --k-kind-miss: #cbc8ba;  --k-kind-miss-bg: #1a1b1e;  --k-kind-miss-line: #464a52;
  --k-kind-pass: #a3c4ff;  --k-kind-pass-bg: #1d2d48;  --k-kind-pass-line: #35548a;
  --k-kind-reb: #ebcb96;   --k-kind-reb-bg: #3a2f1f;   --k-kind-reb-line: #5e4b2e;
  --k-kind-stl: #121315;   --k-kind-stl-bg: #efeadb;   --k-kind-stl-line: #efeadb;
  --k-kind-tov: #ff9a91;   --k-kind-tov-bg: #44231f;   --k-kind-tov-line: #713830;
  --k-kind-ast: #7fe0aa;   --k-kind-ast-bg: #1c3a2b;   --k-kind-ast-line: #2f6b4a;
  --k-kind-sub: #cbc8ba;   --k-kind-sub-bg: #0d0e10;   --k-kind-sub-line: #464a52;
  --k-kind-ft: #7fe0aa;    --k-kind-ft-bg: #1a1b1e;    --k-kind-ft-line: #2f6b4a;
  --k-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.3);
  --k-shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --k-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.3);
  --k-focus: #ff8f5a;
  --k-focus-ring: 0 0 0 3px #4a2a1a;
}

/* ------------------------------------------------- dark (the chalkboard), System on a dark device */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --k-bg: #121315;
    --k-surface: #1a1b1e;
    --k-surface-2: #212226;
    --k-surface-3: #2b2d32;
    --k-sunken: #0d0e10;
    --k-line: #303238;
    --k-line-2: #464a52;
    --k-grid: rgba(239, 234, 219, 0.035);
    --k-text: #efeadb;
    --k-text-2: #cbc8ba;
    --k-text-3: #a4a7ad;
    --k-accent: #ff7a3d;
    --k-accent-deep: #ff9461;
    --k-accent-text: #ff8f5a;
    --k-accent-tint: #4a2a1a;
    --k-accent-ink: #1a0c04;
    --k-good: #5fd394;  --k-good-tint: #1c3a2b;
    --k-bad: #ff8077;   --k-bad-tint: #44231f;
    --k-warn: #f2bb52;  --k-warn-tint: #3d3119;
    --k-pass: #84b1ff;  --k-pass-tint: #1d2d48;
    --k-ai: #c3b1ff;    --k-ai-tint: #2d2747;
    --k-film: #efeadb;
    --k-film-ink: #121315;
    --k-warn-ink: #1a1300;  --k-ai-ink: #1b1030;
    --k-ref: #c9ced6;  --k-ref-ink: #111418;
    --k-marker-red: #ff7a6e;
    --k-marker-blue: #7eadff;
    --k-marker-green: #5fd394;
    --k-maple: #8a6440;  --k-maple-2: #6f4e30;  --k-maple-3: #4e3621;  --k-maple-4: #7f5c3a;  --k-maple-line: #d8c7a6;
    --k-board: #17181b;  --k-board-line: #e9e4d4;  --k-board-paint: #2a2c31;
    --k-team-black: #1b1d21;  --k-team-yellow: #f2c230;
    --k-scrim: rgba(9, 12, 16, 0.86);
    --k-on-video: #ffffff;
    --k-video-bg: #000000;
    --k-video-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    --k-kind-make: #0d1a13;  --k-kind-make-bg: #5fd394;  --k-kind-make-line: #5fd394;
    --k-kind-miss: #cbc8ba;  --k-kind-miss-bg: #1a1b1e;  --k-kind-miss-line: #464a52;
    --k-kind-pass: #a3c4ff;  --k-kind-pass-bg: #1d2d48;  --k-kind-pass-line: #35548a;
    --k-kind-reb: #ebcb96;   --k-kind-reb-bg: #3a2f1f;   --k-kind-reb-line: #5e4b2e;
    --k-kind-stl: #121315;   --k-kind-stl-bg: #efeadb;   --k-kind-stl-line: #efeadb;
    --k-kind-tov: #ff9a91;   --k-kind-tov-bg: #44231f;   --k-kind-tov-line: #713830;
    --k-kind-ast: #7fe0aa;   --k-kind-ast-bg: #1c3a2b;   --k-kind-ast-line: #2f6b4a;
    --k-kind-sub: #cbc8ba;   --k-kind-sub-bg: #0d0e10;   --k-kind-sub-line: #464a52;
    --k-kind-ft: #7fe0aa;    --k-kind-ft-bg: #1a1b1e;    --k-kind-ft-line: #2f6b4a;
    --k-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.3);
    --k-shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    --k-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.3);
    --k-focus: #ff8f5a;
    --k-focus-ring: 0 0 0 3px #4a2a1a;
  }
}

/* ------------------------------------------------------ the same in both themes (no colors here) */
:root {
  --k-font-ui: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-font-num: "Barlow Condensed", "DIN Condensed", "Avenir Next Condensed", system-ui, sans-serif;   /* numerals, labels, heads */
  --k-font-display: var(--k-font-num);
  --k-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --k-font-marker: var(--k-font-ui);   /* a coach's notes: plain text since Carson, 2026-10-17 ("make it just regular") */
  --k-radius-s: 6px;
  --k-radius-m: 10px;
  --k-radius-l: 16px;
  --k-pill: 999px;
  --k-border: 1.5px solid var(--k-line);
  /* the hardwood stripe: boards and a seam, as under the bar */
  --k-stripe: repeating-linear-gradient(90deg, var(--k-maple) 0 86px, var(--k-maple-2) 86px 88px, var(--k-maple-4) 88px 170px, var(--k-maple-2) 170px 172px);

  /* the old names the pages use, onto the tokens (/np/app.css's, app.css's and league.css's own);
     /np/app.css itself is never edited: this file overrides it on the kits pages only */
  --bg: var(--k-bg);
  --bg1: var(--k-surface);
  --bg2: var(--k-surface-2);
  --bg3: var(--k-sunken);
  --bg4: var(--k-surface-3);
  --line: var(--k-line);
  --line2: var(--k-line-2);
  --tx: var(--k-text);
  --tx2: var(--k-text-2);
  --tx3: var(--k-text-3);
  --accent: var(--k-accent);
  --accent-ink: var(--k-accent-ink);
  --good: var(--k-good);
  --warn: var(--k-warn);
  --bad: var(--k-bad);
  --goal: var(--k-good);
  --miss: var(--k-bad);
  --pass: var(--k-pass);
  --sans: var(--k-font-ui);
  --mono: var(--k-font-mono);
  --cond: var(--k-font-num);
  --st-bg: var(--k-bg);
  --st-card: var(--k-surface);
  --st-line: var(--k-line);
  --video: var(--k-film);
  --sheet: var(--k-pass);
  --ai: var(--k-ai);
  --you: var(--k-good);
}

body { background: var(--k-bg); color: var(--k-text); }