/* ── Design Tokens — Spoonfull Crash Companion™ ─────────────────────────── */
:root {
  /* ── Brand Colors (Dark Mode) ──────────────────────────────────────────── */
  --bg: #1D1D1D;
  --bg-surface: #242424;
  --bg-elevated: #2C2C2C;
  --bg-hover: #333333;
  --border: #3A3A3A;
  --border-subtle: #303030;

  /* Text */
  --text: #E8E8E8;
  --off-white: #E8E8E8;
  --text-muted: #999999;
  --text-faint: #666666;

  /* Brand Palette */
  --accent: #425FCC;
  --accent-hover: #5070DD;
  --accent-dim: rgba(66,95,204,0.15);
  --periwinkle: #7894FF;
  --dark-blue: #243576;
  --orange: #F47126;
  --success: #22c55e;
  --green-500: #22c55e;
  --danger: #ef4444;
  --danger-dim: rgba(239,68,68,0.12);

  /* Card states */
  --card-selected-bg: rgba(66,95,204,0.2);
  --card-selected-border: #425FCC;
  --preview-bg: #242424;

  /* Shadows & Glow */
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --glow-blue: 0 0 20px rgba(66,95,204,0.4);
  --glow-periwinkle: 0 0 20px rgba(120,148,255,0.3);
  --glow-green: 0 0 15px rgba(34,197,94,0.3);

  /* Radii */
  --radius: 1rem;
  --radius-lg: 1rem;
  --radius-md: 0.75rem;
  --radius-sm: 0.5rem;
  --radius-xs: 0.375rem;

  /* Typography */
  --font: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'League Spartan', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', serif;

  /* Transitions */
  --transition-fast: 200ms;
  --transition-med: 300ms;
}

[data-theme="light"] {
  --bg: #F5F5F5;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F0F0F0;
  --bg-hover: #E8E8E8;
  --border: #D5D5D5;
  --border-subtle: #E0E0E0;
  --text: #1A1A2E;
  --off-white: #1A1A2E;
  --text-muted: #666680;
  --text-faint: #AAAABC;
  --accent: #3A52B5;
  --accent-hover: #4A65CC;
  --accent-dim: rgba(58,82,181,0.1);
  --periwinkle: #6680E6;
  --dark-blue: #1E2D66;
  --danger: #dc2626;
  --danger-dim: rgba(220,38,38,0.08);
  --card-selected-bg: rgba(58,82,181,0.12);
  --card-selected-border: #3A52B5;
  --preview-bg: #FFFFFF;
  --shadow: 0 4px 24px rgba(0,0,0,0.12);
  --glow-blue: 0 0 20px rgba(58,82,181,0.2);
  --glow-periwinkle: 0 0 20px rgba(102,128,230,0.15);
  --glow-green: 0 0 15px rgba(34,197,94,0.15);
}