/* ═══════════════════════════════════════════════════════════════
   LaneMax Immersive — Design Token System
   A cinematic, dark-mode design system inspired by Apple,
   Nothing, and Awwwards-caliber digital experiences.
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  /* ── 1. Color Palette: The Void & The Light ── */
  --bg-void:       #000000;
  --bg-deep:       #030712;
  --bg-surface:    #0a0f1e;
  --bg-elevated:   #111827;
  --bg-card:       rgba(255, 255, 255, 0.025);
  --bg-card-hover: rgba(255, 255, 255, 0.05);

  /* Accent Colors */
  --c-cyan:        #00e5ff;
  --c-cyan-muted:  #0891b2;
  --c-emerald:     #00fa9a;
  --c-emerald-deep:#06d6a0;
  --c-amber:       #ffb020;
  --c-coral:       #ff6b6b;
  --c-purple:      #a78bfa;

  /* Text Hierarchy */
  --c-white:       #ffffff;
  --c-gray-100:    #f0f0f0;
  --c-gray-200:    #d1d5db;
  --c-gray-300:    #9ca3af;
  --c-gray-400:    #6b7280;
  --c-gray-500:    #374151;

  /* Glow Colors (for backgrounds / shadows) */
  --glow-cyan:     rgba(0, 229, 255, 0.12);
  --glow-emerald:  rgba(0, 250, 154, 0.10);
  --glow-amber:    rgba(255, 176, 32, 0.08);

  /* ── 2. Gradients ── */
  --grad-hero:     linear-gradient(135deg, #00e5ff 0%, #00fa9a 50%, #ffb020 100%);
  --grad-accent:   linear-gradient(135deg, #00e5ff, #00fa9a);
  --grad-warm:     linear-gradient(135deg, #ffb020, #ff6b6b);
  --grad-surface:  linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --grad-border:   linear-gradient(135deg, rgba(0,229,255,0.3), rgba(0,250,154,0.15), rgba(255,176,32,0.1));
  --grad-glass:    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  --grad-fade-down:linear-gradient(to bottom, var(--bg-deep), transparent);
  --grad-fade-up:  linear-gradient(to top, var(--bg-deep), transparent);

  /* ── 3. Typography ── */
  --font-primary:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale (cinematic sizing) */
  --text-hero:     clamp(3.5rem, 8vw, 7rem);
  --text-display:  clamp(2.75rem, 6vw, 5rem);
  --text-h1:       clamp(2.5rem, 5vw, 4rem);
  --text-h2:       clamp(2rem, 4vw, 3.25rem);
  --text-h3:       clamp(1.5rem, 3vw, 2.25rem);
  --text-h4:       1.25rem;
  --text-body:     1.0625rem;
  --text-sm:       0.875rem;
  --text-xs:       0.75rem;

  /* ── 4. Spacing (8pt Grid) ── */
  --space-1:  0.5rem;   /* 8px */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-5:  2.5rem;   /* 40px */
  --space-6:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */
  --space-20: 10rem;    /* 160px */
  --space-24: 12rem;    /* 192px */

  /* ── 5. Borders & Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  --border-subtle:     1px solid rgba(255, 255, 255, 0.06);
  --border-glass:      1px solid rgba(255, 255, 255, 0.08);
  --border-glass-hover:1px solid rgba(0, 229, 255, 0.3);
  --border-accent:     1px solid rgba(0, 229, 255, 0.2);

  /* ── 6. Shadows & Depth ── */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
  --shadow-glow:  0 0 60px rgba(0, 229, 255, 0.12);
  --shadow-glow-emerald: 0 0 60px rgba(0, 250, 154, 0.12);

  /* ── 7. Motion & Easing ── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   0.15s;
  --duration-normal: 0.4s;
  --duration-slow:   0.8s;
  --duration-cinematic: 1.5s;

  /* ── 8. Z-Index Scale ── */
  --z-background: -1;
  --z-content:     1;
  --z-overlay:     10;
  --z-nav:         100;
  --z-modal:       1000;
  --z-cursor:      9999;
}