/* === TFT ELO design tokens — the ONE source of truth =========================
   Consumed by style.css (the app), landing.css (/welcome) and rating_card.css.
   Change a value here, never redefine it downstream.

   The system in one paragraph: an indigo-navy ground (chroma, not tinted
   black), three hues with FIXED jobs — gold is the rating and the brand, mint
   is "you", ember is the reference / opponent — a radius hierarchy that
   encodes what a thing is (chip < panel < tile < pill action), no blanket
   shadows, and one orchestrated motion moment per screen. Cost-tier colours
   are game constants and are not design decisions. */
:root {
  /* ---- Ground and surfaces (page → raised) ---- */
  --bg: #0f1329;
  --bg-deep: #090c1c;          /* vignette edge, HP-track "missing" colour */
  --surface: #161b38;          /* panels, cards, popovers */
  --surface-2: #1e2448;        /* raised sections, secondary controls */
  --surface-3: #0c1026;        /* deepest inset: inputs, icon wells */
  --surface-hover: #262d58;    /* hover / active raised bg */

  /* ---- Lines ---- */
  --line: #2a3264;
  --line-strong: #3a4380;
  --border: var(--line);              /* legacy alias */
  --border-strong: var(--line-strong);/* legacy alias */

  /* ---- Text ---- */
  --text: #eef0fa;
  --text-muted: #a3abcc;
  --text-dim: #848db0;         /* 5.1:1 on --surface, 4.6:1 on --surface-2 */

  /* ---- The three hues and their jobs ---- */
  --gold: #d9b34f;             /* the rating, the brand, the primary action */
  --gold-bright: #f5d06a;
  --gold-ink: #1b1400;         /* text on gold fills */
  --you: #3ddc84;              /* the player's side: your bar, your marker, a pass */
  --you-deep: #1f9c5c;
  --you-glow: rgba(61, 220, 132, .55);
  --foe: #ff8a3c;              /* the reference / opponent side */
  --foe-deep: #c95a1c;
  --foe-glow: rgba(255, 138, 60, .55);

  /* Status (semantic, map onto the hues above so there is one green) */
  --pos: var(--you);
  --neg: #ff5c5c;
  --accent: #ffd54a;           /* armed / selected highlight (keyboard, drag) */

  /* Unit-cost tiers — game constants */
  --cost-1: #8a8a8a;
  --cost-2: #1ead4a;
  --cost-3: #2194de;
  --cost-4: #a335ee;
  --cost-5: #d4a017;

  /* Board-strength letter tiers (src/strength_reference.py STRENGTH_TIER_TABLE:
     SSS >=80, S >=60, A >=40, B >=20, C <20 win rate vs the field at this round,
     since 2026-10-15). Fortnite rarity order (2026-10-08): SSS gold (legendary),
     S purple (epic), A blue (rare), B green (uncommon), C grey (common, a touch
     lighter than the no-grade grey). Shared with the overlay mockups (mock.css --g-*). */
  --tier-sss: #ffb31a;
  --tier-s: #c84bff;
  --tier-a: #33b4ff;
  --tier-b: #6bdb34;
  --tier-c: #c8c8c8;
  --tier-none: #8b93a7;  /* grey: no grade (C/common is the lighter grey above) */

  /* Familiarity / confidence bands */
  --conf-high: #5fb84a;
  --conf-medium: #e8a13a;
  --conf-low: #e0443c;

  /* ---- Type ---- */
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: var(--font-sans);
  --font-display: 'Bricolage Grotesque', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Modular scale, ratio 1.25, base 16px. */
  --fs-1: 0.75rem;    /* 12 captions, chips */
  --fs-2: 0.875rem;   /* 14 secondary UI */
  --fs-3: 1rem;       /* 16 body */
  --fs-4: 1.25rem;    /* 20 panel titles, tile names */
  --fs-5: 1.5625rem;  /* 25 section titles */
  --fs-6: 1.953rem;   /* 31 page titles, reveal verdict */
  --fs-7: 2.441rem;   /* 39 in-round rating */
  --fs-8: 3.052rem;   /* 49 reveal rating */
  --fs-9: 3.815rem;   /* 61 hero / share-card rating */
  --lh-tight: 1.05;   /* display */
  --lh-snug: 1.25;    /* titles */
  --lh-body: 1.5;
  /* Legacy names (style.css still reads these) */
  --text-xs: var(--fs-1);
  --text-sm: var(--fs-2);
  --text-base: 0.94rem;
  --text-md: var(--fs-4);
  --text-lg: var(--fs-5);
  --text-xl: var(--fs-6);
  --text-2xl: var(--fs-8);

  /* ---- Space (4px grid) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- Radius hierarchy: chip < panel < tile < pill action ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Elevation: modals only ---- */
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, .55);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-quick: 150ms;    /* state change answering a click */
  --dur-reveal: 900ms;   /* the one orchestrated moment per screen */
}