/* ══════════════════════════════════════════
   OLLAGE DESIGN TOKENS
   Single source of truth for all pages.
   Import via: <link rel="stylesheet" href="/tokens.css">
   See /brand for the live styleguide.
   ══════════════════════════════════════════ */
:root {
  /* ── Colors — base palette ── */
  --bg:             #0f1117;
  --bg2:            #1a1d27;  /* alias for --surface; prefer --surface in new code */
  --surface:        #1a1d27;
  --surface-hover:  #222633;
  --border:         #2a2e3d;
  --text:           #e4e4e7;
  --text-dim:       #8b8d98;
  --text-muted:     #8b8d98;  /* alias for --text-dim; prefer --text-dim in new code */
  --primary:        #6366f1;
  --primary-hover:  #818cf8;
  --accent:         #818cf8;  /* alias for --primary-hover */
  --green:          #22c55e;
  --red:            #ef4444;
  --amber:          #f59e0b;
  --yellow:         #fbbf24;  /* amber-300; used for rank streaks, warnings */
  --gold:           #eab308;  /* deeper gold for trophies/rankings */
  --blue:           #3b82f6;  /* lab charts, status badges */
  --purple:         #a855f7;  /* editor SFX track, beat-sync, magic-movie */
  --pink:           #ec4899;  /* mashup/stack accent */
  --orange:         #f97316;  /* mashup gradient partner */
  --video-bg:       #000;     /* true black for video letterbox wells */

  /* ── Soft / tinted variants (for badge backgrounds, status fills) ── */
  --primary-soft:  rgba(99, 102, 241, 0.15);
  --primary-dim:   rgba(99, 102, 241, 0.1);  /* lighter active tint (nav buttons) */
  --green-soft:    rgba(34, 197, 94, 0.15);
  --red-soft:      rgba(239, 68, 68, 0.15);
  --amber-soft:    rgba(245, 158, 11, 0.15);
  --purple-soft:   rgba(168, 85, 247, 0.15);
  --blue-soft:     rgba(59, 130, 246, 0.15);

  /* ── Typography ── */
  --font:  -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'SF Mono', 'Fira Code', monospace;

  /* ── Spacing scale (rem) ── */
  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  0.75rem;   /* 12px */
  --space-lg:  1rem;      /* 16px */
  --space-xl:  1.5rem;    /* 24px */
  --space-2xl: 2rem;      /* 32px */

  /* ── Radii ── */
  --radius-xs:    4px;    /* micro-corners for tiny badges */
  --radius-sm:    6px;    /* tagbar pills, filter toggles */
  --radius:       8px;    /* cards, panels, inputs */
  --radius-pill:  10px;   /* pills, badges */
  --radius-full:  20px;   /* round buttons, chips */
  --radius-circle: 50%;   /* avatars, dots */

  /* ── Font sizes ── */
  --text-xxs:  0.55rem;   /* mobile labels, badge text */
  --text-xs:   0.65rem;   /* pills, filter labels, tag text */
  --text-sm:   0.75rem;   /* nav links, meta text, range values */
  --text-base: 0.85rem;   /* body text, buttons, inputs */
  --text-lg:   1rem;      /* card titles, sub-headings */
  --text-xl:   1.3rem;    /* page headings (h1) */
  --text-xxl:  1.5rem;    /* hero headings (rarely used) */
  --text-3xl:  2.4rem;    /* marketing hero only */

  /* ── Stat cards ── */
  --stat-value: 1.3rem;
  --stat-label: 0.7rem;

  /* ── Z-index layers ── */
  --z-base:      1;
  --z-sticky:    50;
  --z-dropdown:  100;
  --z-tagbar:    190;
  --z-nav:       200;
  --z-trigger:   200;
  --z-backdrop:  300;
  --z-sheet:     310;
  --z-modal:     500;
  --z-toast:     600;

  /* ── Motion ── */
  --dur-fast:  0.15s;
  --dur-base:  0.2s;
  --dur-slow:  0.3s;
  --ease:      cubic-bezier(.4, 0, .2, 1);

  /* ── Breakpoints (reference; use directly in @media) ── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ── Card grid floors (use in `minmax(var(--card-w-md), 1fr)`) ── */
  --card-w-sm:  140px;
  --card-w-md:  180px;
  --card-w-lg:  240px;

  /* ── Selected-card treatment (canonical) ── */
  --ring-selected: 0 0 0 2px var(--primary);
}