/* ──────────────────────────────────────────────────────────────────
   FYM Casino — Foundation tokens
   Spec: docs/superpowers/specs/2026-05-09-foundation-tokens-design.md
   ────────────────────────────────────────────────────────────────── */

:root {

  /* ── Color (OKLCH; neutrals tint toward gold hue 80°) ─────────── */
  --bg:        oklch(0.10 0.005 80);
  --surface:   oklch(0.14 0.008 80);
  --raised:    oklch(0.18 0.010 80);
  --border:    oklch(0.25 0.012 80);

  --text:      oklch(0.92 0.020 75);
  --muted:     oklch(0.62 0.015 75);
  --faint:     oklch(0.42 0.010 75);

  --accent:    oklch(0.78 0.13  80);
  --accent-hi: oklch(0.85 0.13  80);

  --win:       oklch(0.72 0.13 160);
  --loss:      oklch(0.62 0.17  25);
  --warn:      oklch(0.80 0.15  60);

  /* ── Category palette (Track C2.5) ────────────────────────────── */
  /* Hue tokens used by .ov-game-tile pattern + pill via color-mix */
  --cat-orig-hue:  oklch(0.75 0.15 75);   /* Originals — amber */
  --cat-bord-hue:  oklch(0.72 0.15 165);  /* Bord — emerald */
  --cat-slot-hue:  oklch(0.70 0.15 25);   /* Slots — cherry */
  --cat-mp-hue:    oklch(0.70 0.18 295);  /* Multiplayer — electric */

  /* Pill-specific bg/fg derived per category */
  --cat-orig-bg: oklch(0.22 0.05 70);
  --cat-orig-fg: oklch(0.85 0.13 80);
  --cat-bord-bg: oklch(0.20 0.05 165);
  --cat-bord-fg: oklch(0.85 0.13 165);
  --cat-slot-bg: oklch(0.20 0.06 25);
  --cat-slot-fg: oklch(0.83 0.10 25);
  --cat-mp-bg:   oklch(0.22 0.07 295);
  --cat-mp-fg:   oklch(0.85 0.13 295);

  /* ── Typography ───────────────────────────────────────────────── */
  --font-display: 'Bodoni Moda', 'Times New Roman', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-numeric: 'Manrope', system-ui, sans-serif;

  --fs-caption:  11px;
  --fs-small:    13px;
  --fs-body:     14px;
  --fs-body-lg:  16px;
  --fs-h3:       22px;
  --fs-h2:       28px;
  --fs-h1:       36px;
  --fs-display:  56px;

  --fs-num-small: 14px;
  --fs-num-md:    22px;
  --fs-num-lg:    36px;
  --fs-num-xl:    64px;

  --lh-tight: 1.0;
  --lh-snug:  1.2;
  --lh-body:  1.5;

  --ls-tight:     -0.01em;
  --ls-normal:    0;
  --ls-uppercase: 0.18em;

  /* ── Spacing — 4pt scale ──────────────────────────────────────── */
  --sp-3xs:  4px;
  --sp-2xs:  8px;
  --sp-xs:  12px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  32px;
  --sp-xl:  48px;
  --sp-2xl: 64px;
  --sp-3xl: 96px;

  /* ── Borders + radius + shadow ─────────────────────────────────── */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;

  --border-w:        1px;
  --border-stroke:   solid;
  --border-default:  var(--border-w) var(--border-stroke) var(--border);

  --shadow-elevated: 0 16px 48px -12px oklch(0.05 0.008 80 / 0.6);

  /* ── Motion ───────────────────────────────────────────────────── */
  --motion-micro: 180ms;
  --motion-small: 240ms;
  --motion-panel: 320ms;
  --motion-page:  480ms;
  --easing:       cubic-bezier(0.25, 1, 0.32, 1);

  /* ── Layout primitives (kept from current theme) ──────────────── */
  --nav-height:    64px;
  --header-height: 56px;
}

/* Reduced-motion preference takes precedence over everything. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

/* Sensible default for body — concrete callers may override. */
body {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--text);
  background:  var(--bg);
}

/* Tabular numerals are critical in casino UI — opt-in via class. */
.num,
[data-num] {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-normal);
}