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

:root {
  /* Dark Theme */
  --bg-void:        #09090d;
  --bg-surface:     #111318;
  --bg-glass:       rgba(255,255,255,0.05);
  --accent-cyan:    #00C8D7;
  --accent-violet:  #7B4FFF;
  --accent-green:   #00C98A;
  --accent-pink:    #D4318A;
  --text-primary:   #f4f6fb;
  --text-muted:     rgba(244,246,251,0.50);
  --border-glass:   rgba(255,255,255,0.08);
  --glow-cyan:      0 0 32px rgba(0,200,215,0.22);
  --glow-violet:    0 0 32px rgba(123,79,255,0.22);
  --glow-pink:      0 0 32px rgba(212,49,138,0.18);

  /* Typography */
  --font-display:  'Inter Tight', 'Inter', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  6rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Borders */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* Glassmorphism */
  --glass-bg:      rgba(255,255,255,0.05);
  --glass-blur:    blur(20px) saturate(180%);
  --glass-border:  1px solid rgba(255,255,255,0.08);
  --glass-shadow:  0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);

  /* Gradients */
  --grad-primary:   linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  --grad-hero:      linear-gradient(135deg, #09090d 0%, #111318 100%);
  --grad-card-top:  linear-gradient(180deg, rgba(0,200,215,0.07) 0%, transparent 100%);

  /* Z-index */
  --z-base:    1;
  --z-above:   10;
  --z-overlay: 100;
  --z-nav:     1000;
  --z-modal:   10000;

  /* Transitions */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
}