:root {
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

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

  --nav-height: clamp(5.6rem, 8vw, 6.3rem);
  --nav-logo-height: clamp(3.5rem, 6vw, 4.8rem);
  --nav-logo-height-scrolled: clamp(3rem, 5vw, 4rem);
  --hero-logo-width: clamp(16rem, 30vw, 20rem);
  --footer-logo-height: clamp(4.75rem, 7vw, 6.5rem);
  --section-gap: clamp(4rem, 7vw, 7.5rem);
  --container: min(1240px, calc(100% - clamp(1.5rem, 4vw, 3.5rem)));
  --space-page-x: clamp(1rem, 3vw, 1.5rem);
  --touch-min: 44px;

  --shadow-sm: 0 10px 30px rgba(12, 28, 48, 0.06);
  --shadow-md: 0 20px 60px rgba(12, 28, 48, 0.1);
  --shadow-lg: 0 28px 80px rgba(12, 28, 48, 0.14);
  --shadow-xl: 0 36px 110px rgba(12, 28, 48, 0.18);

  --glow-primary: 0 0 0 1px rgba(31, 180, 231, 0.1), 0 16px 48px rgba(17, 149, 199, 0.18);
  --glow-accent: 0 0 0 1px rgba(76, 135, 255, 0.12), 0 16px 52px rgba(76, 135, 255, 0.18);
}

[data-theme='dark'] {
  --shadow-sm: 0 12px 32px rgba(3, 8, 18, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-md: 0 22px 60px rgba(3, 8, 18, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-lg: 0 32px 90px rgba(3, 8, 18, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-xl: 0 44px 120px rgba(3, 8, 18, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --glow-primary: 0 0 0 1px rgba(79, 212, 255, 0.14), 0 20px 64px rgba(37, 184, 207, 0.2);
  --glow-accent: 0 0 0 1px rgba(76, 135, 255, 0.16), 0 22px 68px rgba(76, 135, 255, 0.22);
}