/* ============================================================
   HDS Computer — Cyberpunk Neon Design Tokens
   Futuristic IT aesthetic: deep space bg, cyan/purple neons,
   glassmorphism, 3D orb, grid overlay, magnetic interactions
   ============================================================ */

:root {
  /* --- Color Primitives --- */
  --space-900:  #030308;
  --space-800:  #050510;
  --space-700:  #0a0a1a;
  --space-600:  #111126;
  --space-500:  #1a1a35;
  --space-400:  #2a2a4a;

  --cyan-500:   #00f0ff;
  --cyan-400:   #33f3ff;
  --cyan-300:   #66f7ff;
  --cyan-600:   #00c4d1;
  --cyan-glow:  rgba(0, 240, 255, 0.6);

  --purple-500: #b77aff;
  --purple-400: #c99bff;
  --purple-300: #dbbcff;
  --purple-600: #955de8;
  --purple-glow: rgba(183, 122, 255, 0.6);

  --accent-orange: #ff6b35;
  --accent-green:  #00ff88;

  --fg-primary:   #e8e8f0;
  --fg-secondary: #a0a0b8;
  --fg-muted:     #6a6a8a;
  --fg-inverse:   #050510;

  /* --- Glassmorphism --- */
  --glass-bg:      rgba(10, 10, 26, 0.7);
  --glass-bg-strong: rgba(10, 10, 26, 0.85);
  --glass-border:  rgba(0, 240, 255, 0.12);
  --glass-border-hover: rgba(0, 240, 255, 0.35);
  --glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.5),
                   0 0 0 1px rgba(0, 240, 255, 0.05) inset;
  --glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.6),
                        0 0 0 1px rgba(0, 240, 255, 0.2) inset,
                        0 0 40px rgba(0, 240, 255, 0.15);

  /* --- Glows & Shadows --- */
  --glow-cyan-sm:   0 0 12px var(--cyan-glow);
  --glow-cyan-md:   0 0 24px var(--cyan-glow), 0 0 48px rgba(0, 240, 255, 0.2);
  --glow-cyan-lg:   0 0 40px var(--cyan-glow), 0 0 80px rgba(0, 240, 255, 0.3);
  --glow-purple-sm: 0 0 12px var(--purple-glow);
  --glow-purple-md: 0 0 24px var(--purple-glow), 0 0 48px rgba(183, 122, 255, 0.2);
  --glow-purple-lg: 0 0 40px var(--purple-glow), 0 0 80px rgba(183, 122, 255, 0.3);

  /* --- Typography --- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-ui:      'Inter Variable', 'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-display: clamp(2.8rem, 6vw, 4.5rem);
  --text-h1:      clamp(2.2rem, 4.5vw, 3.5rem);
  --text-h2:      clamp(1.8rem, 3.5vw, 2.5rem);
  --text-h3:      clamp(1.3rem, 2.2vw, 1.6rem);
  --text-lg:      1.125rem;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;

  --leading-tight:   1.1;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* --- Spacing Scale --- */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-8:  3rem;     /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 5rem;     /* 80px */
  --space-16: 8rem;     /* 128px */

  /* --- Layout --- */
  --container: 1280px;
  --container-wide: 1440px;
  --header-h: 72px;

  /* --- Border Radius --- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* --- Z-Layers --- */
  --z-bg: -1;
  --z-base: 0;
  --z-content: 10;
  --z-sticky: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-cursor: 9999;

  /* --- Grid Overlay --- */
  --grid-size: 60px;
  --grid-color: rgba(0, 240, 255, 0.03);
  --grid-color-accent: rgba(0, 240, 255, 0.08);

  /* --- Orb (3D Interactive) --- */
  --orb-size: 180px;
  --orb-border: rgba(0, 240, 255, 0.2);
  --orb-glow: 0 0 60px rgba(0, 240, 255, 0.3),
              0 0 120px rgba(183, 122, 255, 0.2);
}

/* ============================================================
   Theme Variants (for future pages)
   ============================================================ */

[data-theme="glass"] {
  --space-900:  #f8f9fc;
  --space-800:  #ffffff;
  --space-700:  #f0f2f8;
  --space-600:  #e4e7f0;
  --fg-primary: #1a1a2e;
  --fg-secondary: #4a4a68;
  --fg-muted:   #7a7a9a;
  --glass-bg:   rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 102, 255, 0.15);
}

[data-theme="bento"] {
  --space-900:  #0a0a0f;
  --space-800:  #111118;
  --fg-primary: #fafafa;
  --cyan-500:   #00e5ff;
  --purple-500: #a855f7;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-normal: 1ms;
    --duration-slow: 1ms;
  }
}