/* ═══════════════════════════════════════════════════════════════════════════
   LOCALLHOST.DEV — Theme Variables
   Single source of truth for the design system
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Neon Terminal Palette */
  --neon-green: #00ff88;
  --neon-green-dim: #00cc6a;
  --neon-cyan: #00f5ff;
  --neon-magenta: #ff00ff;
  --neon-amber: #ffb800;
  --neon-red: #ff3366;
  
  /* Core Colors */
  --primary: var(--neon-green);
  --primary-dark: var(--neon-green-dim);
  --secondary: var(--neon-cyan);
  --accent: var(--neon-magenta);
  --warning: var(--neon-amber);
  --danger: var(--neon-red);
  
  /* Dark Theme Base (Default) */
  --bg-deep: #0a0a0f;
  --bg-main: #0d1117;
  --bg-elevated: #161b22;
  --bg-card: rgba(22, 27, 34, 0.8);
  --bg-alt: #1c2128;
  
  --text-main: #f0f6fc;
  --text-muted: #e6edf3;
  --text-dim: #c9d1d9;
  
  --border: #30363d;
  --border-glow: rgba(0, 255, 136, 0.3);
  
  /* Callout Colors */
  --callout-info: rgba(0, 245, 255, 0.1);
  --callout-success: rgba(0, 255, 136, 0.1);
  --callout-warning: rgba(255, 184, 0, 0.1);
  --callout-error: rgba(255, 51, 102, 0.1);
  
  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* Spacing & Shapes */
  --radius: 8px;
  --radius-lg: 16px;
  
  /* Effects */
  --glow-green: 0 0 20px rgba(0, 255, 136, 0.4), 0 0 40px rgba(0, 255, 136, 0.2);
  --glow-cyan: 0 0 20px rgba(0, 245, 255, 0.4), 0 0 40px rgba(0, 245, 255, 0.2);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);

  /* Scanline Effect */
  --scanline: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  
  /* Noise Texture (Base64 encoded small noise) */
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Light Theme Override */
[data-theme="light"] {
  --bg-deep: #f0f6fc;
  --bg-main: #ffffff;
  --bg-elevated: #f6f8fa;
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-alt: #f6f8fa;
  
  --text-main: #1f2328;
  --text-muted: #57606a;
  --text-dim: #8c959f;
  
  --border: #d0d7de;
  --border-glow: rgba(0, 200, 100, 0.3);
  
  --primary: #00a854;
  --primary-dark: #008040;
  --secondary: #0088cc;
  
  --glow-green: 0 0 15px rgba(0, 168, 84, 0.3);
  --glow-cyan: 0 0 15px rgba(0, 136, 204, 0.3);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}