:root {
  --bg-deep: #0f172a;
  --teal-deep: #1E3A5F;
  --teal-steel: #2B5C7D;
  --green-earth: #3A5A40;
  --green-forest: #4A7C59;
  --emerald: #047857;
  --emerald-bright: #059669;
  --emerald-glow: rgba(5, 150, 105, 0.35);
  --teal-glow: rgba(43, 92, 125, 0.4);

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --glass-bg: rgba(30, 58, 95, 0.25);
  --glass-bg-strong: rgba(30, 58, 95, 0.45);
  --glass-bg-elevated: rgba(30, 58, 95, 0.55);
  --glass-highlight: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --nav-glass: rgba(15, 23, 42, 0.65);

  --radius-soft: 24px;
  --radius-pill: 999px;
  --glass-blur: blur(16px);
  --glass-blur-heavy: blur(24px);

  --gradient-border: linear-gradient(135deg, rgba(5, 150, 105, 0.3), rgba(43, 92, 125, 0.1));

  --font-stack: Helvetica, "Helvetica Neue", Arial, sans-serif;

  --space-xs: 0.375rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --container-max: 1200px;
  --nav-height: 52px;
  --header-height: 76px;
  --nav-offset: var(--header-height);

  --transition-fast: 0.2s ease-in-out;
  --transition-smooth: 0.4s ease-in-out;
  --transition-slow: 0.8s ease-in-out;

  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.25);
  --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-nav: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(5, 150, 105, 0.1);
}

@media (min-width: 480px) {
  :root {
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --nav-height: 56px;
    --header-height: 88px;
  }
}

@media (min-width: 768px) {
  :root {
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 3.5rem;
    --space-2xl: 5rem;
    --nav-height: 64px;
  }
}

@media (min-width: 1024px) {
  :root {
    --space-xl: 4rem;
    --space-2xl: 6rem;
  }
}