:root {
  color-scheme: dark;

  /* === COLORS === */
  --bg-primary: #0a0a0a;
  --bg-secondary: #161616;
  --bg-tertiary: #1f1f1f;
  --text-primary: #fafafa;
  --text-secondary: #c4c4c4;
  --text-muted: #888888;
  --accent: #d4ff00;
  --accent-dim: #a8cc00;
  --accent-glow: rgba(212, 255, 0, 0.25);
  --accent-warm: #ff5722;
  --border: #2a2a2a;
  --border-strong: #3a3a3a;
  --success: #00c853;
  --error: #ff3d3d;

  /* === TYPOGRAPHY === */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 3vw, 2rem);
  --fs-2xl: clamp(2rem, 5vw, 3rem);
  --fs-3xl: clamp(2.5rem, 7vw, 4.5rem);

  /* === SPACING === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* === RADII === */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 24px var(--accent-glow);

  /* === LAYOUT === */
  --container-max: 720px;
  --container-result-max: 960px;
  --tap-target: 48px;
  --header-h: 64px;

  /* === MOTION === */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}