@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* Colors - Gamified White-Blue Theme */
  --bg: #f5f8fa;
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  
  --accent: #0284c7; /* Cyan-Blue Accent */
  --accent-hover: #0369a1;
  --accent-glow: rgba(2, 132, 199, 0.25);
  --accent-contrast: #ffffff;
  
  --success: #0d9488; /* Teal */
  --success-glow: rgba(13, 148, 136, 0.15);
  --danger: #e11d48; /* Crimson */
  --danger-glow: rgba(225, 29, 72, 0.15);
  --warning: #ea580c;

  /* HUD Borders and Shadows */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(2, 132, 199, 0.2);
  --glass-shadow: 0 4px 20px rgba(2, 132, 199, 0.08);
  --card-shadow: 0 0 20px rgba(2, 132, 199, 0.05);

  /* Fonts */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', "Courier New", Courier, monospace;

  /* Spacing & Borders */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 999px;

  /* Transitions */
  --transition-fast: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  /* Colors - Cyberpunk Black-Purple Theme */
  --bg: #000000; /* Jet Black */
  --surface: #07030f; /* Deep Violet Black */
  --text: #f8fafc;
  --text-muted: #94a3b8;
  
  --accent: #a855f7; /* Neon Purple */
  --accent-hover: #c084fc;
  --accent-glow: rgba(168, 85, 247, 0.45);
  --accent-contrast: #ffffff;
  
  --success: #10b981; /* Neon Emerald */
  --success-glow: rgba(16, 185, 129, 0.2);
  --danger: #f43f5e; /* Neon Crimson */
  --danger-glow: rgba(244, 63, 94, 0.2);
  --warning: #fbbf24;

  /* HUD Borders and Shadows */
  --glass-bg: rgba(7, 3, 15, 0.85);
  --glass-border: rgba(168, 85, 247, 0.35);
  --glass-shadow: 0 0 25px rgba(168, 85, 247, 0.2);
  --card-shadow: 0 0 30px rgba(168, 85, 247, 0.15);
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  :root, [data-theme="dark"] {
    --transition-fast: 0s !important;
    --transition-normal: 0s !important;
  }
  
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}