/* =============================================================================
   UltiGameMate v2 — design tokens (single source of truth)
   Dark theme, committed. Loaded after fonts.css, before everything else.
   ============================================================================= */

:root {
  color-scheme: dark;

  /* --- typefaces -----------------------------------------------------------
     Paper Mono carries structure: headings, nav, buttons, labels, stats,
     scores, chips. Nebula Sans carries running prose so long text stays
     readable. Both self-hosted (fonts.css). */
  --font-mono: 'Paper Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --font-body:
    'Nebula Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-ui: var(--font-mono); /* app chrome */
  --font-display: var(--font-mono); /* headings */

  /* --- type scale (fluid; mono-aware, ~15.5→16.5px body) ------------------ */
  --fz-2xs: 0.75rem; /* 12 — tab labels, micro-labels only */
  --fz-xs: 0.8125rem; /* 13 — overlines, chips, meta */
  --fz-sm: 0.875rem; /* 14 — captions, table cells, secondary */
  --fz-body: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem); /* 15→16 body copy */
  --fz-md: clamp(1rem, 0.965rem + 0.16vw, 1.0625rem); /* 16→17 */
  --fz-lg: clamp(1.0625rem, 1rem + 0.32vw, 1.25rem); /* 17→20 — h3 / card lead */
  --fz-xl: clamp(1.3125rem, 1.15rem + 0.72vw, 1.75rem); /* 21→28 — h2 */
  --fz-2xl: clamp(1.625rem, 1.35rem + 1.25vw, 2.375rem); /* 26→38 — h1 / screen title */
  --fz-3xl: clamp(2rem, 1.55rem + 2vw, 3rem); /* 32→48 — marketing hero */

  --lh-tight: 1.1; /* display headings */
  --lh-snug: 1.28; /* h3/h4, card titles, chips */
  --lh-ui: 1.4; /* dense UI text */
  --lh-body: 1.65; /* prose */

  --tracking-tight: -0.02em; /* big mono headings */
  --tracking-over: 0.1em; /* overline / section labels (sans, so lighter) */
  --tracking-label: 0.02em; /* tab + button labels */

  /* --- surfaces (off pure black, soft) ----------------------------------- */
  --bg-page: #141417;
  --bg-sunken: #0f0f12;
  --bg-card: #1c1c21;
  --bg-elevated: #26262c;
  --bg-input: #2b2b32;

  /* --- lines (used sparingly — mostly separation is by surface + space) -- */
  --line: #2c2c33;
  --line-strong: #3a3a43;

  /* --- text ----------------------------------------------------------------
     primary = headings + emphasis · body = paragraphs · secondary = support
     · muted = meta/labels. Never pure #fff (glare on near-black) — even the
     brightest tokens sit a few points below white. */
  --text-heading: #dcdce3; /* big display headings — softer than primary */
  --text-primary: #e6e6ec; /* emphasis, values, team names */
  --text-body: #bcbcc6;
  --text-secondary: #9595a0;
  --text-muted: #6a6a75;

  /* --- brand + semantic accents ---------------------------------------- */
  --accent: #2d6a4f; /* brand green — fills, active states */
  --accent-hi: #52b788; /* brighter green — links, values, on-dark text */
  --accent-lo: #40916c;
  --accent-bright: #6fd6a6; /* hover/active lift on green fills */
  --accent-wash: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-ink: #06140d; /* text on a green fill */

  --gold: #ffd166; /* boosts */
  --gold-wash: color-mix(in srgb, var(--gold) 15%, transparent);
  --pos: #3ecf8e; /* points / positive */
  --pos-wash: color-mix(in srgb, var(--pos) 15%, transparent);
  --neg: #ff5c5c;
  --info: #4aa3ff;

  /* --- spacing (4-based) ---------------------------------------------- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;

  /* one gap between stacked page sections */
  --gap-section: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);

  /* --- flow: em-relative rhythm for stacked text (margins between blocks) */
  --flow-3xs: 0.4em;
  --flow-2xs: 0.6em;
  --flow-xs: 0.8em;
  --flow-sm: 1em;
  --flow-md: 1.2em;
  --flow-lg: 1.6em;
  --flow-xl: 2.75em;

  /* --- pad: em-relative interior padding for controls / chips / cards --- */
  --pad-3xs: 0.15em;
  --pad-2xs: 0.25em;
  --pad-xs: 0.35em;
  --pad-sm: 0.5em;
  --pad-md: 0.65em;
  --pad-lg: 0.8em;
  --pad-xl: 0.95em;
  --pad-2xl: 1.2em;
  --pad-3xl: 1.6em;

  /* --- gap: em-relative inline gap (icon <-> label) ------------------- */
  --gap-2xs: 0.3em;
  --gap-xs: 0.4em;
  --gap-sm: 0.5em;

  /* --- list indent -------------------------------------------------- */
  --indent-list: 1.4em;

  /* --- icon sizes (was scattered as raw px in components.css) ---------- */
  --icon-sm: 14px;
  --icon-md: 18px;
  --icon-lg: 24px;
  --border-hairline: 1px;

  /* --- radii ------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* --- elevation ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / 0.55);
  --ring: 0 0 0 2px color-mix(in srgb, var(--accent-hi) 55%, transparent);

  /* --- layout widths ------------------------------------------------------
     prose = reading column · app = content beside the sidebar ·
     wide = marketing sections + footer. */

  /* --w-prose: 42rem; */
  --w-app: 64rem;
  --w-app-wide: 75rem; /* picks screen — needs room for the fixture list */
  --w-wide: 72rem;
  --sidebar-w: 244px;
  --tabbar-h: 60px;
  --pad-inline: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* --- breakpoints (reference; @media queries still use the literal) --- */
  --bp-md: 48rem;
  --bp-lg: 64rem;

  /* --- motion -------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 0.14s;
}