:root {
  /* === COLORS === */
  --color-obsidian: #05070A;
  --color-white: #FFFFFF;
  --color-slate: #64748B;
  --color-cool-white: #F9FAFB;
  --color-violet: #9F33FF;
  --color-blue-electric: #3355FF;
  --color-purple-deep: #7022C4;
  --color-royal-blue: #2644CC;
  --color-cyan: #00D1FF;
  --color-gray-support: #CBD5E1;

  /* === GRADIENTS === */
  --gradient-quantum: linear-gradient(135deg, #9F33FF, #3355FF);
  --gradient-quantum-hover: linear-gradient(135deg, #8A2BE0, #2A44DD);
  --gradient-quantum-horizontal: linear-gradient(90deg, #9F33FF, #3355FF);

  /* === TYPOGRAPHY === */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Fluid type scale */
  --fs-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-h1: clamp(2rem, 3.5vw + 0.5rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw + 0.25rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body: clamp(0.95rem, 1vw + 0.1rem, 1.125rem);
  --fs-body-sm: clamp(0.85rem, 0.9vw, 1rem);
  --fs-overline: clamp(0.7rem, 0.8vw, 0.85rem);
  --fs-stat: clamp(3rem, 6vw, 5rem);

  /* === SPACING === */
  --section-py: clamp(4rem, 8vw, 8rem);
  --container-max: 1200px;
  --container-px: clamp(1.25rem, 4vw, 2rem);
  --gap-xl: 4rem;
  --gap-lg: 3rem;
  --gap-md: 2rem;
  --gap-sm: 1rem;
  --gap-xs: 0.5rem;

  /* === BORDERS & RADIUS === */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.1);
  --shadow-violet: 0 4px 30px rgba(159, 51, 255, 0.25);

  /* === TRANSITIONS === */
  --transition-fast: 200ms ease;
  --transition-medium: 400ms ease;
  --transition-slow: 600ms ease;

  /* === Z-INDEX === */
  --z-nav: 1000;
  --z-mobile-menu: 999;
  --z-overlay: 998;
}