/* ============================================================================
   BetWizard — Shared Design Tokens (single source of truth)
   ----------------------------------------------------------------------------
   Served from repo root at /betwizard-tokens.css and linked once from
   base.html, so every page that extends base inherits these variables.

   Rules (see .interface-design/system.md):
     - Do NOT redefine these :root tokens per page.
     - Do NOT hardcode palette hexes — reference the variables.
     - Cyan = action.  Green = wins/positive ONLY.  Red = live + losses.
       Amber = warnings/pending.  Gold = MASTER tier only.

   This file only declares variables; it applies no styles to elements, so it
   is safe to load globally (including on public/marketing pages, which simply
   ignore the variables they don't reference).
   ============================================================================ */

:root {
  /* ── Canvas & surfaces ─────────────────────────────────────────────── */
  --bg:            #0a192f;   /* page canvas — the shipped navy */
  --bg2:           #0f1318;   /* elevated surface */
  --bg3:           #131820;   /* raised surface */
  --glass-bg:      rgba(255, 255, 255, 0.035);
  --glass-bg2:     rgba(255, 255, 255, 0.06);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --glass-border2: rgba(255, 255, 255, 0.12);

  /* ── Semantic accents ──────────────────────────────────────────────── */
  --cyan:  #33ccff;   /* action / navigation / links / active nav */
  --green: #00ffae;   /* WINS / positive performance ONLY */
  --red:   #ff4d4d;   /* LIVE + losses / urgency */
  --amber: #ffb347;   /* warnings / pending / neutral */
  --gold:  #ffc832;   /* MASTER tier elements ONLY */
  --cyan-dim:  rgba(51, 204, 255, 0.12);
  --cyan-mid:  rgba(51, 204, 255, 0.22);
  --green-dim: rgba(0, 255, 174, 0.10);
  --red-dim:   rgba(255, 82, 82, 0.10);
  --grad:      linear-gradient(135deg, #33ccff, #00ffae);

  /* ── Text ──────────────────────────────────────────────────────────── */
  --text:   #e8edf2;
  --text2:  #c8d0da;
  --muted:  #7d8a9b;   /* >= 4.5:1 on --bg — WCAG AA */
  --muted2: #8a96a4;

  /* ── Layout ────────────────────────────────────────────────────────── */
  --id-h:     62px;
  --bottom-h: 76px;
  --pad:      16px;
  --r-card:   18px;

  /* ── Pills & tags (one scale) ──────────────────────────────────────── */
  --pill-radius: 999px;
  --pill-h:      26px;
  --pill-pad-x:  14px;
  --pill-font:   0.72rem;
  --tag-h:       20px;
  --tag-pad-x:   10px;
  --tag-font:    0.62rem;

  /* ── Backward-compat aliases ───────────────────────────────────────────
     Older CSS/JS (charts, particles, some page styles) read these legacy
     --color-* names. Kept mapped to the canonical tokens so removing a
     page's inline :root does not break runtime code that references them. */
  --color-primary:   var(--cyan);
  --color-secondary: var(--amber);
  --color-accent:    var(--green);
  --color-success:   var(--green);
  --color-warning:   var(--amber);
  --color-danger:    var(--red);
  --color-muted:     var(--muted);
  --color-bg:        var(--bg);
  --color-section:   var(--bg2);
  --color-text:      var(--text);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}