/* ─── Design Tokens ────────────────────────────────────────── */
:root {
  --bg: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-surface: #f1f5f9;
  --border: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-strong: #cbd5e1;

  --text-primary: #0a0f1e;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --text-inverted: #ffffff;

  --red: #e11d48;
  --red-hover: #be123c;
  --red-subtle: #fff1f2;
  --red-border: #fecdd3;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shadow-xs: 0 1px 2px rgba(10, 15, 30, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 15, 30, 0.06), 0 1px 2px rgba(10, 15, 30, 0.04);
  --shadow-card: 0 0 0 1px rgba(10, 15, 30, 0.05), 0 2px 8px rgba(10, 15, 30, 0.04);
  --shadow-card-hover: 0 0 0 1px rgba(10, 15, 30, 0.09), 0 8px 24px -4px rgba(10, 15, 30, 0.10);
  --shadow-player: 0 0 0 1px rgba(10, 15, 30, 0.07), 0 24px 56px -12px rgba(10, 15, 30, 0.22);
  --shadow-btn: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(225, 29, 72, 0.30);
}