/* ═══════════════════════════════════════════════════════════════════════════
   FOREBET KENYA — Colour tokens
   Three layers: primitives (raw hex) → semantic (purpose) → component.
   Everything visual reads the semantic or component layer; primitives are
   never used directly outside this file.

   This file is mirrored byte-for-byte into admin/tokens.css: the two sites
   deploy as separate Cloudflare Pages projects, so they cannot share a URL.
   `dev/check-tokens.sh` fails when the copies drift.

   Contrast is enforced by `node dev/contrast.mjs`, which reads this file.
   Rule of thumb: ink on any surface ≥ 7:1; secondary/muted ink ≥ 4.5:1;
   ink ON the accent ≥ 7:1 (white on this green is 2.1:1 — never do it).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Primitives ─────────────────────────────────────────────────────── */
  --navy-950: #0f1520;   /* page */
  --navy-900: #161d29;   /* cards, panels */
  --navy-800: #1c2432;   /* raised: chips, inputs, hover */
  --navy-700: #232d3d;   /* odds buttons */
  --navy-600: #2b3646;   /* odds hover */
  --navy-500: #2a3444;   /* borders */
  --navy-400: #5e6b7c;   /* odds edge, dividers that must read */

  --white:    #f3f5f8;
  --grey-300: #a9b3c2;
  --grey-400: #8b97a8;

  --green-500: #22c55e;  /* accent */
  --green-400: #34d36e;  /* accent hover */
  --green-300: #3ddc74;  /* accent as text on navy */
  --green-950: #10301e;  /* accent tint */
  --green-ink-on: #06170d; /* text ON the accent */

  --red-500:  #f05252;
  --red-400:  #ff6b6b;
  --red-950:  #2a1214;
  --live-500: #ff4d4f;

  --amber-500: #f5b025;
  --amber-950: #2a1f08;

  /* Aviator multiplier chips only — not for UI chrome. */
  --blue-400:   #4f8ff7;
  --purple-400: #a78bfa;
  --pink-400:   #f472b6;

  --mpesa: #4cbb17;      /* Safaricom's green; the one foreign brand colour */

  /* ── Semantic ───────────────────────────────────────────────────────── */
  --bg:             var(--navy-950);
  --surface:        var(--navy-900);
  --surface-raised: var(--navy-800);
  --border:         var(--navy-500);
  --border-subtle:  #1f2735;
  --scrim:          rgb(0 0 0 / 0.65);

  --ink:           var(--white);
  --ink-secondary: var(--grey-300);   /* 7.4:1 on raised */
  --ink-muted:     var(--grey-400);   /* 5.3:1 on raised — meta ≥ 11px only */

  --accent:       var(--green-500);
  --accent-hover: var(--green-400);
  --accent-ink:   var(--green-300);   /* accent used as text */
  --accent-dim:   var(--green-950);   /* selected-row tint */
  --on-accent:    var(--green-ink-on);

  /* Functional colour. Green = win/positive, red = loss/warning/live. */
  --green:       var(--accent);
  --green-hover: var(--accent-hover);
  --green-dim:   var(--accent-dim);
  --red:         var(--red-500);
  --red-dim:     var(--red-950);
  --live-red:    var(--live-500);
  --amber:       var(--amber-500);
  --amber-dim:   var(--amber-950);
  --draw:        var(--blue-400);     /* form dots / h2h "draw" segment */

  /* Elevation */
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.6);

  /* ── Component ──────────────────────────────────────────────────────── */
  --odds-surface:       var(--navy-700);
  --odds-surface-hover: var(--navy-600);
  --odds-edge:          var(--navy-400);
  --odds-selected-bg:   var(--accent);
  --odds-selected-ink:  var(--on-accent);

  --chip-bg:         var(--surface-raised);
  --chip-active-bg:  var(--accent);
  --chip-active-ink: var(--on-accent);

  --card-bg:     var(--surface);
  --card-border: var(--border-subtle);
  --card-radius: 8px;

  --nav-bg:     var(--surface);
  --nav-active: var(--accent-ink);
}