/* ============================================================================
 * tokens.css — the design tokens every page loads first.
 *
 * Load order on every page: tokens.css → components.css → shell.css, then the
 * page's own sheet when it has one (dashboard.css, draft.css, standings.css, …),
 * then utilities.css. Every sheet but utilities.css wraps its rules in @layer app,
 * so the utilities (unlayered) win over them like an inline style would.
 *
 * Themes: :root is the dark theme; :root.theme-light overrides the colours.
 * The theme class is set in <head> (layout.ejs) before first paint.
 *
 * Breakpoints (max-width): 480px small phone · 768px phone · 1024px tablet.
 * The roster board alone also uses 1600px (dashboard.css).
 *
 * Scales — use these, never a one-off value (tests/css_standard.test.js checks):
 *   type     --fs-*        11 (badges, uppercase micro labels only) · 12 · 13 · 14 · 16 · 18 · 24 · 32 · 40px
 *   radius   --radius-*    4 · 8 · 12 · 16px, pill; 50% for circles
 *   tracking --tracking-*  tight · wide · caps (uppercase labels)
 *   spacing  padding / margin / gap on the 4px grid: 0 1 2 4 6 8 12 16 20 24 32 40 48 56 64 80 96px
 *   weights  400 · 600 · 700 · 800 · 900
 * ========================================================================== */
@layer app {
:root {
  /* Surfaces */
  --bg: #0a0b0d;                /* Page background */
  --surface: #12151c;           /* Panels and cards */
  --surface-head: #161a22;      /* Opaque table header row (sticky-safe) */

  /* Accent */
  --accent: #65ceed;            /* Links, primary buttons, active states */
  --on-accent: #0a0b0d;         /* Text on an accent fill */

  /* Text */
  --text-primary: #f8fafc;
  --text-muted: #94a3b8;        /* Secondary text: labels, hints, meta (7:1 on panels) */

  /* Status */
  --accent-blue: #60a5fa;       /* Info: links in tables, status badges */
  --danger: #f87171;            /* Red-400: small text stays 4.5:1 on dark panels (#ef4444 was 3.9) */
  --warning: #eab308;
  --success: #4ade80;
  --ltir: #a78bfa;              /* LTIR status and its replacement lock */
  --gold: #ffd700;              /* Hall of fame: the reigning champion */
  --on-status: var(--on-accent); /* Text on a solid status fill: dark on bright (dark theme), white on deep (light) */
  --on-chip: #0f172a;           /* Ink on bright sidebar chips — never theme-flips (chips stay saturated) */
  --live-pts: #4ade80;          /* Tonight's points */
  --live-pts-glow: 0 0 8px rgba(74, 222, 128, 0.7);

  /* Borders and translucent fills */
  --panel-border: rgba(255, 255, 255, 0.06);
  --panel-border-hover: rgba(255, 255, 255, 0.15);
  --btn-border-hover: rgba(255, 255, 255, 0.20);
  --panel-border-width: 1px;
  --bg-translucent-sm: rgba(255, 255, 255, 0.02);
  --bg-translucent-md: rgba(255, 255, 255, 0.04);
  --bg-translucent-lg: rgba(255, 255, 255, 0.08);
  --bg-translucent-hover: rgba(101, 206, 237, 0.06);

  /* Chip colours: sidebar tags and roster tier dots (saturated, never theme-flipped; ink is --on-chip) */
  --chip-sky: #0ea5e9;
  --chip-amber: #f59e0b;
  --chip-teal: #14b8a6;
  --chip-lilac: #c4b5fd;
  --chip-periwinkle: #a5b4fc;
  --chip-violet: #a78bfa;
  --chip-purple: #8b5cf6;
  --chip-coral: #f87171;
  --chip-red: #ef4444;
  --chip-green: #22c55e;
  --chip-emerald: #10b981;
  --chip-silver: #cbd5e1;
  --chip-slate: #94a3b8;
  --chip-steel: #64748b;
  --chip-cyan: #06b6d4;
  --chip-blue: #60a5fa;
  --chip-yellow: #eab308;

  /* Drag / drop highlights (not theme-flipped) */
  --highlight-swap: #fbbf24;
  --highlight-swap-strong: #d97706;
  --highlight-valid: #10b981;

  /* Type: system fonts only, no font CDN (corporate firewalls) */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;  /* Money and stat digits */
  --fs-micro: 0.6875rem;  /* 11px: badges and uppercase micro labels only */
  --fs-xs: 0.75rem;       /* 12px: the smallest readable text */
  --fs-sm: 0.8125rem;     /* 13px */
  --fs-base: 0.875rem;    /* 14px: body text in tables and panels */
  --fs-md: 1rem;          /* 16px: form fields on phones (no iOS zoom), lead text */
  --fs-lg: 1.125rem;      /* 18px: panel titles */
  --fs-xl: 1.5rem;        /* 24px: page titles on phones */
  --fs-2xl: 2rem;         /* 32px: page titles */
  --fs-3xl: 2.5rem;       /* 40px: display numbers */
  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* Shape and depth */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35);
  --page-backdrop: var(--bg);   /* Behind the shell; the light theme uses a soft grey gradient */
  --transition: all 0.15s ease-in-out;

  /* Layers — every floating layer uses these, never a raw number */
  --z-shell: 10;     /* icon rail, sidebar */
  --z-overlay: 100;  /* action menus, dropdowns, notification panel */
  --z-modal: 200;    /* acquisition modal, contract modal, trade modals */
  --z-toast: 5000;   /* #toast-container: above every modal */
}

:root.theme-light {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-head: #f1f5f9;
  --accent: #0369a1;            /* Sky-700: 5.9:1 on white, and white text on it (N59) */
  --on-accent: #ffffff;
  --text-primary: #0f172a;
  --text-muted: #475569;
  --accent-blue: #2563eb;
  --danger: #b91c1c;
  --warning: #b45309;
  --success: #15803d;
  --ltir: #6d28d9;
  --gold: #a16207;
  --live-pts: #166534;
  --live-pts-glow: 0 0 6px rgba(21, 128, 61, 0.45);
  --panel-border: rgba(0, 0, 0, 0.08);
  --panel-border-hover: rgba(0, 0, 0, 0.15);
  --btn-border-hover: rgba(0, 0, 0, 0.20);
  --bg-translucent-sm: rgba(0, 0, 0, 0.02);
  --bg-translucent-md: rgba(0, 0, 0, 0.04);
  --bg-translucent-lg: rgba(0, 0, 0, 0.06);
  --bg-translucent-hover: rgba(2, 132, 199, 0.05);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.10);
  --page-backdrop: radial-gradient(circle at 30% 20%, #d6dae0, #b9bfc8);
}

/* The theme's own values under a second name. A team-branded page re-points the
   text and semantic tokens at colours that read on its team colours (shell.css),
   and its theme surfaces (tables, trade cards, modals, menus) take these back.
   Resolved on :root, so they follow the theme class. */
:root {
  --theme-text-primary: var(--text-primary);
  --theme-text-muted: var(--text-muted);
  --theme-success: var(--success);
  --theme-danger: var(--danger);
  --theme-warning: var(--warning);
  --theme-accent-blue: var(--accent-blue);
  --theme-bg: var(--bg);
  --theme-surface-head: var(--surface-head);
}
}