/* ===========================================
   VHS Now — Design Tokens & Custom Properties
   A NEONpulseTechshop Production
   =========================================== */

:root {
  /* ── Brand Colors ── */
  --neon-green: #00ff41;
  --neon-green-dim: #00cc33;
  --magenta: #ff00ff;
  --magenta-dim: #cc00cc;

  /* ── Backgrounds ── */
  --bg-dark: #1a1720;
  --bg-card: #1e1b24;
  --bg-card-light: #2a2730;
  --bg-overlay: rgba(26, 23, 32, 0.85);

  /* ── VHS-Specific ── */
  --vhs-label-cream: #f5f0e0;
  --vhs-label-text: #1a1a1a;
  --vhs-red-stripe: #cc0000;
  --vhs-body-dark: #111111;
  --vhs-reel-bg: #0a0a0a;
  --vhs-back-cover: #1c1c2e;
  --vhs-back-text: #c8c8d0;

  /* ── Text ── */
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-bright: #ffffff;

  /* ── Fonts ── */
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: 'Roboto', sans-serif;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;

  /* ── Sizing ── */
  --container-max: 1100px;
  --nav-height: 60px;
  --border-radius: 4px;

  /* ── Shadows & Glows ── */
  --glow-green: 0 0 10px rgba(0, 255, 65, 0.5), 0 0 20px rgba(0, 255, 65, 0.3);
  --glow-green-strong: 0 0 10px rgba(0, 255, 65, 0.7), 0 0 30px rgba(0, 255, 65, 0.5), 0 0 60px rgba(0, 255, 65, 0.2);
  --glow-magenta: 0 0 10px rgba(255, 0, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.3);
  --glow-text-green: 0 0 7px rgba(0, 255, 65, 0.6), 0 0 15px rgba(0, 255, 65, 0.3);
  --glow-text-magenta: 0 0 7px rgba(255, 0, 255, 0.6), 0 0 15px rgba(255, 0, 255, 0.3);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

  /* ── Transitions ── */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}