/* ─────────────────────────────────────────────────────────────────────────
   LEDGR /app-tokens.css
   Canonical design tokens for all app pages.
   Load as the FIRST stylesheet on every app page.
   Phase 2 — Foundation
───────────────────────────────────────────────────────────────────────── */

/* App font stack — load centrally so pages don't repeat the Google Fonts URL */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {

  /* ── BACKGROUNDS ── */
  --bg:  #07060d;       /* canonical app background (purple-tinted black) */
  --s1:  #0c0a1a;       /* surface — cards, panels */
  --s2:  #15122a;       /* elevated surface — hover state, dropdowns */

  /* ── BORDERS ── */
  --bd:  rgba(184,159,255,0.10);  /* default border — soft purple glow */
  --bd2: rgba(184,159,255,0.20);  /* stronger border — hover / focus */

  /* ── ACCENT — two-tier system ── */
  --ac:       #b89fff;                   /* soft lavender — decorative, glow, hover tints */
  --ac-vivid: #7B2CFF;                   /* vivid brand purple — CTAs, primary actions */
  --ac-light: #B14CFF;                   /* lighter purple — hover on vivid */
  --acg:      rgba(184,159,255,0.07);    /* accent background tint */
  --acg2:     rgba(184,159,255,0.14);    /* stronger accent tint */

  /* ── TEXT ── */
  --tx:  #f0edff;   /* primary text */
  --mu:  #6a6690;   /* muted / secondary labels */
  --mu2: #9590b8;   /* medium muted / metadata */

  /* ── SEMANTIC COLORS ── */
  --gr:     #34d399;   /* win / positive (Tailwind emerald-400) */
  --rd:     #f87171;   /* loss / negative (Tailwind red-400) */
  --gold:   #fbbf24;   /* prestige / rank */
  --cyan:   #38bdf8;   /* platinum / sky */
  --orange: #fb923c;   /* streak / heat */
  --silver: #94a3b8;   /* silver division */
  --bronze: #b47850;   /* bronze division */

  /* ── RARITY COLORS (badge system) ── */
  --rarity-common:    #94a3b8;   /* common — 6 particles */
  --rarity-rare:      #38bdf8;   /* rare    — 12 particles */
  --rarity-epic:      #b89fff;   /* epic    — 18 particles */
  --rarity-legendary: #fbbf24;   /* legendary — 36 particles, animated border */

  /* ── SHADOWS ── */
  --shadow-sm:    0 2px  8px rgba(0,0,0,0.30);
  --shadow-md:    0 4px 24px rgba(0,0,0,0.40);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.50);
  --shadow-glow:  0 0 24px rgba(184,159,255,0.15);
  --shadow-gold:  0 0 24px rgba(251,191, 36,0.18);
  --shadow-green: 0 0 24px rgba( 52,211,153,0.18);
  --shadow-red:   0 0 24px rgba(248,113,113,0.18);

  /* ── GLOW VALUES (use in box-shadow / drop-shadow) ── */
  --glow-ac:    rgba(184,159,255,0.35);
  --glow-vivid: rgba(123, 44,255,0.35);
  --glow-gold:  rgba(251,191, 36,0.35);
  --glow-green: rgba( 52,211,153,0.35);
  --glow-red:   rgba(248,113,113,0.35);

  /* ── BORDER RADIUS ── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill:999px;

  /* ── SPACING SCALE ── */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 48px;

  /* ── TYPOGRAPHY ── */
  --font-display: 'Bebas Neue', sans-serif;   /* page titles, large numbers, logo */
  --font-body:    'Syne',       sans-serif;   /* body copy, nav links, buttons */
  --font-mono:    'DM Mono',    monospace;    /* labels, metadata, data values */

  /* ── NAV DIMENSIONS ── */
  --nav-h:           60px;
  --nav-z:           50;
  --slide-nav-z:     200;
  --slide-overlay-z: 199;
  --slide-nav-w:     300px;

  /* ── BRIDGE ALIASES ────────────────────────────────────────────────────────
     Maps brand.css --color-* names to the canonical app tokens.
     Allows brand.css components to coexist without value conflicts.
  ───────────────────────────────────────────────────────────────────────── */
  --color-bg:           var(--bg);
  --color-surface:      var(--s1);
  --color-surface-2:    var(--s2);
  --color-purple:       var(--ac-vivid);
  --color-purple-light: var(--ac-light);
  --color-text:         var(--tx);
  --color-muted:        var(--mu);
  --color-border:       var(--bd);
  --color-glow:         var(--glow-vivid);
  --color-app-accent:   var(--ac);
}

/* ── BASE RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }