/*
 * Design tokens. Every color, space and radius in the UI resolves to one of
 * these custom properties; nothing else hard-codes a value.
 *
 * Dopamine palette: near-black canvas, neon accents, high contrast.
 * Neon cyan/magenta/gold for edges, glow and text. No blue/purple gradients,
 * no glassmorphism (CLAUDE.md anti-slop rule).
 */
:root {
  /* Surfaces */
  --color-bg: #06060a;
  --color-bg-2: #0b0b14;
  --color-surface: #12121d;
  --color-surface-2: #1a1a2e;
  --color-surface-3: #22223a;
  --color-border: #2a2a44;

  /* Neon accents */
  --color-neon-cyan: #00f0ff;
  --color-neon-cyan-dim: rgba(0, 240, 255, 0.18);
  --color-neon-magenta: #ff2d95;
  --color-neon-magenta-dim: rgba(255, 45, 149, 0.18);
  --color-neon-gold: #ffd700;
  --color-neon-gold-dim: rgba(255, 215, 0, 0.18);
  --color-neon-green: #39ff14;
  --color-neon-green-dim: rgba(57, 255, 20, 0.18);
  --color-neon-red: #ff2e4d;

  /* Text */
  --color-text: #f4f1ea;
  --color-text-soft: #c8c4bc;
  --color-text-muted: #8a869a;
  --color-text-faint: #5a5668;

  /* Primary accent — gold, kept for buttons */
  --color-accent: #ffd700;
  --color-accent-hover: #ffe066;
  --color-accent-ink: #1a1200;

  /* Feedback */
  --color-danger: #ff2e4d;
  --color-danger-surface: rgba(255, 46, 77, 0.15);
  --color-success: #39ff14;
  --color-success-dim: rgba(57, 255, 20, 0.15);
  --color-success-surface: #0d2f16;
  --color-warn-surface: #33290a;

  /* Glow tokens */
  --glow-cyan: 0 0 12px rgba(0, 240, 255, 0.55), 0 0 28px rgba(0, 240, 255, 0.22);
  --glow-magenta: 0 0 12px rgba(255, 45, 149, 0.55), 0 0 28px rgba(255, 45, 149, 0.22);
  --glow-gold: 0 0 12px rgba(255, 215, 0, 0.55), 0 0 28px rgba(255, 215, 0, 0.22);
  --glow-green: 0 0 12px rgba(57, 255, 20, 0.55), 0 0 28px rgba(57, 255, 20, 0.22);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;

  /* Space scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 40px rgba(0, 0, 0, 0.45);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 420ms;
  --duration-very-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-very-slow: 0ms;
  }
}