/* ============================================================
   VARIABLES.CSS — Design Tokens
   ============================================================ */

:root {
  /* Colors */
  --black:         #030305;
  --bg:            #07070e;
  --surface-1:     #0e0e1c;
  --surface-2:     #131328;
  --purple:        #7c3aed;
  --purple-light:  #a78bfa;
  --cyan:          #06b6d4;
  --green:         #10b981;
  --amber:         #f59e0b;
  --pink:          #ec4899;
  --white:         #f8fafc;
  --text:          #e2e8f0;
  --muted:         #64748b;
  --border:        rgba(124, 58, 237, 0.12);

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font sizes */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3.5rem;
  --fs-5xl:  5rem;
  --fs-6xl:  7rem;
  --fs-7xl:  10rem;

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

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-elastic:  cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --transition-base: 0.3s var(--ease-out-expo);
  --transition-slow: 0.6s var(--ease-out-expo);

  /* Z-index layers */
  --z-noise:      1;
  --z-content:    2;
  --z-nav:        100;
  --z-cursor:     9000;
  --z-preloader:  9999;

  /* Nav */
  --nav-height: 72px;

  /* Section padding */
  --section-py: clamp(5rem, 10vw, 10rem);

  /* Card */
  --card-border: 1px solid var(--border);
  --card-shadow: 0 4px 24px rgba(0,0,0,0.4);

  /* Glow */
  --glow-purple: 0 0 80px rgba(124, 58, 237, 0.3);
  --glow-cyan:   0 0 80px rgba(6, 182, 212, 0.3);
}