:root {
  /* Background layers */
  --bg-primary: #0a0a0f;
  --bg-secondary: #0e0e18;
  --bg-card: #141428;
  --bg-cell: #16213e;
  --bg-cell-hover: #1f3460;
  --bg-cell-revealed: #0c0c1a;

  /* Neon accent colors */
  --neon-cyan: #00f5ff;
  --neon-pink: #ff2d95;
  --neon-green: #39ff14;
  --neon-yellow: #f0e130;
  --neon-red: #ff073a;
  --neon-blue: #0080ff;
  --neon-purple: #bf00ff;
  --neon-orange: #ff6600;

  /* Number colors (neon-adapted) */
  --num-1: #00bfff;
  --num-2: #39ff14;
  --num-3: #ff073a;
  --num-4: #bf00ff;
  --num-5: #ff6600;
  --num-6: #00f5ff;
  --num-7: #e0e0e0;
  --num-8: #808080;

  /* Text */
  --text-primary: #e8e8f0;
  --text-secondary: #7878a0;
  --text-dim: #4a4a6a;

  /* Glow effects */
  --glow-cyan: 0 0 6px rgba(0, 245, 255, 0.4), 0 0 15px rgba(0, 245, 255, 0.15);
  --glow-cyan-strong: 0 0 8px rgba(0, 245, 255, 0.6), 0 0 20px rgba(0, 245, 255, 0.3), 0 0 40px rgba(0, 245, 255, 0.1);
  --glow-pink: 0 0 6px rgba(255, 45, 149, 0.4), 0 0 15px rgba(255, 45, 149, 0.15);
  --glow-pink-strong: 0 0 8px rgba(255, 45, 149, 0.6), 0 0 20px rgba(255, 45, 149, 0.3);
  --glow-green: 0 0 6px rgba(57, 255, 20, 0.4), 0 0 15px rgba(57, 255, 20, 0.15);
  --glow-red: 0 0 6px rgba(255, 7, 58, 0.5), 0 0 15px rgba(255, 7, 58, 0.2);

  /* Grid sizing */
  --cell-size: 34px;
  --cell-gap: 2px;
  --cell-radius: 3px;

  /* Typography */
  --font-primary: 'Share Tech Mono', 'Courier New', monospace;
  --font-display: 'Orbitron', sans-serif;

  /* Transitions */
  --t-fast: 0.12s ease;
  --t-normal: 0.25s ease;
  --t-slow: 0.5s ease;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;

  /* Border */
  --border-subtle: 1px solid rgba(0, 245, 255, 0.1);
  --border-neon: 1px solid rgba(0, 245, 255, 0.3);
}