/* ─────────────────────────────────────────────
   player-tokens.css
   Global reset, design tokens (:root), base element styles, typography utilities.
   ───────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* ── Aubergine palette (OKLCH) ── */
  --bg: oklch(0.975 0.008 60);
  --bg-elev: #ffffff;
  --bg-soft: oklch(0.955 0.015 20);
  --fg: oklch(0.2 0.03 340);
  --fg-muted: oklch(0.48 0.03 340);
  --fg-subtle: oklch(0.62 0.02 340);
  --accent: oklch(0.42 0.09 330);
  --accent-hover: oklch(0.36 0.1 330);
  --accent-soft: oklch(0.94 0.025 20);
  --accent-fg: #ffffff;
  --border: oklch(0.92 0.012 20);
  --border-strong: oklch(0.86 0.018 20);
  --success: oklch(0.56 0.11 155);
  --live: oklch(0.7 0.15 150);
  --warn: oklch(0.74 0.15 60);
  --shadow-s: 0 1px 3px oklch(0.2 0.03 340 / 0.06);
  --shadow-m: 0 4px 16px oklch(0.2 0.03 340 / 0.10);
  --shadow-l: 0 16px 48px oklch(0.2 0.03 340 / 0.14);
  --glass-bg: oklch(0.975 0.008 60 / 0.7);
  --glass-border: oklch(0.92 0.012 20 / 0.4);
  --r: 20px;
  --rs: 14px;
  --rx: 10px;
  --nav-h: 64px;
  --f: 'Inter', system-ui, sans-serif;
  --fd: 'Playfair Display', Georgia, serif;
  --fm: 'JetBrains Mono', monospace;

  /* ── Density system ── */
  --density-scale: 1;
  --d1: calc(var(--density-scale) * 4px);
  --d2: calc(var(--density-scale) * 8px);
  --d3: calc(var(--density-scale) * 12px);
  --d4: calc(var(--density-scale) * 16px);
  --d5: calc(var(--density-scale) * 20px);
  --d6: calc(var(--density-scale) * 24px);
  --d8: calc(var(--density-scale) * 32px);
  --d10: calc(var(--density-scale) * 40px);

  /* ── Legacy tokens (game screen backwards compat) ── */
  --text-1: var(--fg);
  --text-2: var(--fg-muted);
  --text-3: var(--fg-subtle);
  --bg-surface: var(--bg-elev);
  --bg-muted: var(--bg-soft);
  --accent-h: var(--accent-hover);
  --accent-t: var(--accent);
  --ink: var(--fg);
  --ink-soft: var(--fg-muted);
  --ink-muted: var(--fg-subtle);
  --line: var(--border);
  --line-soft: oklch(0.95 0.005 20);
  --green: var(--success);
  --green-soft: oklch(0.96 0.04 155);
  --green-t: oklch(0.45 0.12 155);
  --orange: var(--live);
  --orange-soft: oklch(0.96 0.04 40);
  --amber: var(--warn);
  --amber-soft: oklch(0.96 0.04 60);
  --rose: oklch(0.55 0.2 15);
  --danger: var(--rose);
  --danger-soft: oklch(0.96 0.04 15);
  --warn-soft: var(--amber-soft);
  --radius-flow: var(--rs);
  --radius-flow-sm: var(--rx);
  --font-display: var(--fd);
  --font-body: var(--f);

  /* ── Legacy tokens (game screen backwards compat — continued) ── */
  --primary: var(--accent);
  --primary-light: var(--accent-hover);
  --primary-bg: oklch(0.94 0.025 20 / 0.5);
  --primary-border: oklch(0.86 0.04 330 / 0.22);
  --primary-shadow: oklch(0.42 0.09 330 / 0.30);
  --green-bg: oklch(0.56 0.11 155 / 0.10);
  --green-border: oklch(0.56 0.11 155 / 0.22);
  --red: oklch(0.55 0.2 15);
  --text: var(--fg);
  --text-secondary: var(--fg-muted);
  --text-muted: var(--fg-subtle);
  --text-disabled: oklch(0.75 0.01 340);
  --bg-deep: oklch(0.93 0.012 20);
  --card: var(--bg-elev);
  --input-bg: var(--bg-elev);
  --header-bg: oklch(0.975 0.008 60 / 0.94);
  --border-light: oklch(0.92 0.012 20 / 0.7);
  --border-lighter: oklch(0.95 0.005 20);
  --accent-ink: var(--accent);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-xs: 5px;
  --font: var(--f);
  --timer-color: var(--accent);
}

html, body {
  height: 100%;
  background: var(--bg);
  font-family: var(--f);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--fg);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  letter-spacing: -0.005em;
}

/* ── Typography utilities ── */
.serif-mix h1, .serif-mix h2, .serif-mix .num, .serif-mix .time {
  font-family: var(--fd);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.serif-mix .big-greet { font-weight: 400; }
.tnum { font-variant-numeric: tabular-nums; font-family: var(--fm); }
.mono { font-family: var(--fm); }