/* ============================================================
   DESIGN TOKENS — CSS Custom Properties
   Colors in OKLCH, spacing on 4pt scale, type scale, easing
   ============================================================ */

:root {
  /* --- Surfaces & Backgrounds ---
       3-layer depth system from the LoM cover:
       1. Cold abyss (background) — dark plum-indigo, hue 295
       2. Warm structural mid-layer (surfaces) — sienna/brown, hue 50
       3. Hot focal points (badges, glows) — amber/gold/vermillion, hue 70-85
       The cold→warm shift is what makes the UI feel like the cover. */
  --color-bg:           oklch(11% 0.025 295);
  --color-surface:      oklch(16% 0.028 50);
  --color-surface-2:    oklch(20% 0.035 50);
  --color-surface-3:    oklch(26% 0.045 55);
  --color-border:       oklch(40% 0.06 60 / 0.35);
  --color-border-warm:  oklch(55% 0.1 70 / 0.4);
  --color-warm-glow:    oklch(75% 0.18 75 / 0.18);
  --color-overlay:      oklch(10% 0.025 295 / 0.7);

  /* --- Text --- */
  --color-text:         oklch(92% 0.02 80);
  --color-text-muted:   oklch(65% 0.018 80);
  --color-text-dim:     oklch(45% 0.015 80);

  /* --- Warm spectrum (fire side) --- */
  --color-vermillion:   oklch(58% 0.22 25);
  --color-orange:       oklch(65% 0.2 45);
  --color-amber:        oklch(75% 0.18 75);
  --color-gold:         oklch(85% 0.14 85);
  --color-champagne:    oklch(90% 0.08 85);
  --color-sienna:       oklch(50% 0.12 60);

  /* --- Cool spectrum (mystery side) --- */
  --color-periwinkle:   oklch(65% 0.12 265);
  --color-steel-blue:   oklch(55% 0.1 240);
  --color-ice-blue:     oklch(85% 0.06 225);
  --color-plum:         oklch(22% 0.05 300);

  /* --- Tier colors — bright, blazing focal points --- */
  --tier-s-color:       oklch(70% 0.24 28);   /* vermillion red, brighter */
  --tier-s-glow:        oklch(70% 0.24 28 / 0.8);
  --tier-a-color:       oklch(76% 0.22 50);   /* burnt orange, brighter */
  --tier-a-glow:        oklch(76% 0.22 50 / 0.8);
  --tier-b-color:       oklch(86% 0.18 82);   /* gold, bright */
  --tier-b-glow:        oklch(86% 0.18 82 / 0.8);
  --tier-c-color:       oklch(75% 0.14 260);  /* periwinkle */
  --tier-c-glow:        oklch(75% 0.14 260 / 0.7);
  --tier-x-color:       oklch(70% 0.09 200);  /* desaturated teal — "depends" */
  --tier-x-glow:        oklch(70% 0.09 200 / 0.6);

  /* --- Champion cost colors --- */
  --cost-1-color:       oklch(55% 0.02 270);
  --cost-2-color:       oklch(65% 0.15 145);
  --cost-3-color:       oklch(55% 0.18 250);
  --cost-4-color:       oklch(58% 0.2 300);
  --cost-5-color:       oklch(78% 0.16 85);

  /* --- Spacing (4pt scale) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* --- Border radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* --- Type scale --- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  3rem;

  /* --- Fonts --- */
  --font-display: 'Tenor Sans', serif;
  --font-ui:      'Figtree', sans-serif;

  /* --- Letter spacing --- */
  --tracking-wide:  0.05em;
  --tracking-wider: 0.1em;

  /* --- Easing --- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-quart:  cubic-bezier(0.5, 0, 0.75, 0);

  /* --- Animation durations --- */
  --dur-fast:   150ms;
  --dur-normal: 300ms;
  --dur-slow:   400ms;

  /* --- Z-index layers --- */
  --z-base:    0;
  --z-above:   10;
  --z-overlay: 100;
  --z-toast:   200;
  --z-fixed:   1000;
}