/* ============================================================================
   VERSUS — Design tokens (single source of truth)
   Linked into every page BEFORE its own stylesheet. Defines the canonical
   palette + spacing / type / radius / elevation scales, plus short-name
   ALIASES so the existing mode CSS (which used --a2, --r, --on-acc, --a5)
   keeps working unchanged during the migration. Per-mode accents
   (--mode-accent / --pc) stay in each mode's own :root.
   ========================================================================== */
:root {
  /* ── Core palette ── */
  --bg:        #050508;
  --surface:   #0d0d14;
  --card:      #12121c;
  --border:    #1e1e30;
  --accent:    #e8ff00;
  --accent2:   #ff3c6e;
  --accent3:   #00c8ff;
  --accent4:   #ff8c00;
  --text:      #e8e8f0;
  --muted:     #9b9bb7;   /* lifted from #8888aa to clear WCAG AA on --card/--surface (UX-AUDIT C1) */
  --on-accent: #050508;

  /* RGB channels for rgba() math: rgba(var(--accent-rgb), .25) */
  --accent-rgb:  232, 255, 0;
  --accent2-rgb: 255, 60, 110;
  --accent3-rgb: 0, 200, 255;
  --bg-rgb:      5, 5, 8;
  --text-rgb:    232, 232, 240;

  /* ── Back-compat aliases (mode CSS still references these) ── */
  --a2:     var(--accent2);
  --a3:     var(--accent3);
  --a4:     var(--accent4);
  --a5:     #888888;
  --on-acc: var(--on-accent);
  --r:      var(--radius);

  /* ── Spacing scale ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ── Radius scale ── */
  --radius:   6px;   /* canonical / default */
  --r-xs:     3px;   /* tiny tags / pills */
  --r-sm:     4px;
  --r-lg:     10px;
  --r-pill:   999px;

  /* ── Type scale ── */
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   40px;
  --fs-3xl:   52px;   /* loading-screen / reveal headlines */
  --fs-display: 72px; /* main logo lockup */

  /* ── Line height ── */
  --lh-tight: 1;
  --lh-snug:  1.15;
  --lh-base:  1.5;

  /* ── Font families ── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Rajdhani', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;

  /* ── Motion ── */
  --dur-1: .12s;   /* snappy: hovers, lifts */
  --dur-2: .2s;    /* standard UI transitions */
  --dur-3: .4s;    /* deliberate: banner/avatar colour shifts */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);   /* entrances / reveals */
  --ease-spring: cubic-bezier(.22, .68, 0, 1.2);   /* snappy settle (= legacy stolen-pop curve) */

  /* ── Elevation ── */
  --shadow-1:    0 2px 8px rgba(0, 0, 0, .40);
  --shadow-2:    0 6px 24px rgba(0, 0, 0, .50);
  --shadow-3:    0 24px 64px rgba(0, 0, 0, .60);              /* modal scale */
  --shadow-lift: 0 8px 22px rgba(0, 0, 0, .35);              /* neutral raised-button / card hover */
  --shadow-glow: 0 0 20px rgba(var(--accent-rgb), .25);
  --shadow-glow-lift: 0 8px 22px rgba(var(--accent-rgb), .28); /* primary CTA hover */
}