/* ─────────────────────────────────────────────────────────────────────────
 * Saddleshot — Design Tokens
 *
 * Single source of truth for colors, type, spacing, and other design
 * primitives. This file goes into wwwroot/css/tokens.css and is imported
 * before any other stylesheet. Per-component CSS (Razor `.razor.css` files,
 * or scoped sections in `app.css`) MUST reference these tokens — never
 * hard-code raw values for color, font size, radius, or spacing.
 *
 * When adding a new value, ask first: can I reuse an existing token? If
 * yes, do that. If you genuinely need a new primitive (a new semantic
 * color, a new size in the type scale), add it here so it's reusable and
 * stays consistent across the app.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color scheme lock ───────────────────────────────────────────────
   * Force light scheme regardless of OS / browser preference. Without
   * this, iOS / iPadOS / macOS dark mode auto-inverts form fields and
   * scrollbars, which breaks the visual design. */
  color-scheme: light;

  /* ── Neutrals (page chrome, text) ────────────────────────────────── */
  --bg:           #f7f8fb;  /* page background */
  --surface:      #ffffff;  /* cards, modals, table backgrounds */
  --border:       #e4e7ee;  /* subtle dividers, card borders */
  --border-strong:#cbd1dc;  /* form-input borders, button outlines */
  --ink:          #0f172a;  /* primary text, dark headers */
  /* The secondary and tertiary greys sit two steps further down the slate ramp than
     they started (500/400 → 700/600). The old values read fine on a desktop monitor
     and badly on a phone in daylight, where --ink-soft's 2.6:1 was effectively
     unreadable. Both now clear AA for body text (10.4:1 and 7.4:1), and the hierarchy
     still reads because this design leans on size first, color second — see
     design-notes.md §3. */
  --ink-muted:    #334155;  /* secondary text */
  --ink-soft:     #475569;  /* tertiary text, eyebrows */
  /* Not purely a text color — it doubles as a fill (heatmap tiles, slider tracks,
     dividers), so it stays light. Anything that currently *reads* as faint text and
     needs to be legible wants --ink-soft instead. */
  --ink-faint:    #cbd5e1;  /* placeholder, low-emphasis chrome */

  /* Dark chrome (top header, admin sidebar, footer) */
  --chrome-bg:        #0c111c;
  --chrome-border:    #1a2030;
  --chrome-text:      #aab4c8;
  --chrome-text-hi:   #ffffff;
  --chrome-link:      #c0d4ff;
  --chrome-label:     #4b5670;
  --chrome-hover-bg:  #151b29;
  --chrome-tile-bg:       rgba(255,255,255,.06);  /* nav-item icon tile, resting */
  --chrome-tile-hover-bg: rgba(255,255,255,.12);  /* nav-item icon tile, hover/active */

  /* ── Semantic accents ────────────────────────────────────────────────
   * Each accent has a paired -bg surface tint. Use the bg variant for
   * filled badges and soft highlights; the solid color for borders,
   * dots, primary buttons, and strong text emphasis. */

  /* Blue — "the logged-in player": picks, self-row, primary buttons */
  --blue:    #2563eb;
  --blue-bg: #eff6ff;
  --blue-hover: #1d4ed8;

  /* Emerald — winners, correct picks, sync OK, active site */
  --emerald:    #047857;
  --emerald-bg: #ecfdf5;
  --emerald-border: #b6e8d0;

  /* Crimson — God Mode, destructive actions, sync errors */
  --crimson:    #be123c;
  --crimson-bg: #fff1f2;
  --crimson-border: #fda4af;

  /* Gold — High Week Bonus, Tiebreaker accent, pending/in-progress */
  --gold:    #ca8a04;
  --gold-bg: #fefce8;
  --gold-border: #f3e2a8;

  /* Purple — Pick-as events in the audit log (the only place purple
     appears today; keep it scoped to that semantic) */
  --purple:    #7c3aed;
  --purple-bg: #f3efff;

  /* ── Typography ──────────────────────────────────────────────────────
   * Single typeface: General Sans (Fontshare). Hierarchy is established
   * by size and color, NOT by weight — see design-notes.md.
   *
   * Weights actually used:
   *   400 — body, eyebrows, labels (default)
   *   500 — buttons, emphasized values, "me" rows
   *   600 — page titles (very sparingly)
   * Never use 700+. */
  --font-sans: 'General Sans', -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Currency glyph. General Sans draws "$" with a broken bar — the vertical stroke
     shows as a tick above and below the S rather than passing through it — which reads
     as a rendering fault instead of a style, especially at phone sizes. Money values
     opt out to the system stack, whose dollar sign is the conventional continuous-bar
     form. Use this ONLY on a rendered currency amount; everything else is --font-sans. */
  --font-currency: -apple-system, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Type scale — sized in px, snapshot of what the mockups use */
  --fs-10: 10px;  /* uppercase eyebrows, micro-labels, badge text */
  --fs-11: 11px;  /* table headers, chip text, small status */
  --fs-12: 12px;  /* secondary text, helper text */
  --fs-13: 13px;  /* body default — buttons, list items, table cells */
  --fs-14: 14px;  /* card subtitles, form input text */
  --fs-15: 15px;  /* sidebar "Picks for" label */
  --fs-16: 16px;  /* team name on a card */
  --fs-17: 17px;  /* week dropdown in sidebar */
  --fs-18: 18px;  /* tiebreaker title, prediction value */
  --fs-20: 20px;  /* section heading (Standings) */
  --fs-22: 22px;  /* page title (mobile) */
  --fs-26: 26px;  /* page title (desktop) */
  --fs-28: 28px;  /* large stat values, tiebreaker input */

  /* Letter spacing — used carefully for uppercase labels and tight headings */
  --tracking-tight:  -.025em;  /* page titles */
  --tracking-snug:   -.01em;   /* form input large numerals */
  --tracking-normal: 0;
  --tracking-label:  .04em;    /* status pills */
  --tracking-wide:   .12em;    /* small uppercase labels */
  --tracking-extra:  .18em;    /* eyebrows */

  /* ── Spacing scale ───────────────────────────────────────────────────
   * 4px base unit. Most mockups stick to multiples of this. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  36px;
  --sp-10: 40px;

  /* ── Border radii ────────────────────────────────────────────────────
   * Scale: small UI -> cards -> pills. */
  --radius-xs: 4px;   /* small status badges, table chips */
  --radius-sm: 6px;   /* nav-item highlights, chips */
  --radius-md: 7px;   /* secondary buttons, small inputs */
  --radius-lg: 8px;   /* primary buttons, form inputs */
  --radius-xl: 10px;  /* large inputs (e.g., tiebreaker numeric) */
  --radius-2xl:12px;  /* cards, modals, game blocks */
  --radius-pill: 20px;/* status pills, badge ovals */
  --radius-circle: 50%;

  /* ── Border widths ───────────────────────────────────────────────── */
  --border-1:   1px;
  --border-15:  1.5px;  /* form-input default */
  --border-2:   2px;    /* picked-state team card */
  --border-3:   3px;    /* God Mode inset glow */

  /* ── Transitions ─────────────────────────────────────────────────────
   * Default to fast (.12s) for color/background changes; slower (.15s)
   * for transform / movement. */
  --t-fast: .12s;
  --t-med:  .15s;
  --t-slow: .25s;
  --ease:   ease-in-out;
}