/* ========================================
   variables.css — Design Tokens
   ======================================== */
:root {
  /* Colors - Background */
  --bg-void:    #050508;
  --bg-base:    #0A0B12;
  --bg-surface: #111219;
  --bg-elevated:#1A1C28;
  --bg-glass:   rgba(17,18,25,0.72);

  /* Colors - Accent */
  --accent-primary:   #4F6EF7;
  --accent-secondary: #7C3AED;
  --accent-glow:      #3B5BDB;
  --accent-danger:    #EF4444;
  --accent-success:   #22C55E;
  --accent-warning:   #F59E0B;

  /* Colors - Text */
  --text-primary:   #F0F2FF;
  --text-secondary: #8B92B8;
  --text-muted:     #4B5280;

  /* Colors - Border */
  --border-subtle: rgba(79,110,247,0.12);
  --border-default:rgba(79,110,247,0.20);
  --border-glow:   rgba(79,110,247,0.45);

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 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:  2rem;
  --text-4xl:  2.75rem;
  --text-hero: clamp(3rem, 6vw, 5.5rem);

  /* 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;

  /* Border Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-glow: 0 0 40px rgba(79,110,247,0.18), 0 0 80px rgba(124,58,237,0.09);
  --shadow-glow-sm: 0 0 20px rgba(79,110,247,0.25);
  --shadow-modal: 0 20px 80px rgba(0,0,0,0.7);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --sidebar-width: 80px;
  --content-max: 1200px;
  --section-padding: var(--space-24) var(--space-8);
}