:root {
  --color-bg: #f4f6f9;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #eef2f7;
  --color-bg-dark: #070f1c;
  --color-navy: #0a1628;
  --color-navy-soft: #132238;
  --color-navy-mid: #1a2d4a;
  --color-gold: #e8b923;
  --color-gold-hover: #f0c832;
  --color-energy: #00c896;
  --color-energy-dim: rgba(0, 200, 150, 0.15);
  --color-api: #3d7bff;
  --color-api-dim: rgba(61, 123, 255, 0.15);
  --color-gold-dim: rgba(232, 185, 35, 0.18);
  --color-text: #0f1a2a;
  --color-text-muted: #5a6b7d;
  --color-border: #dce3ec;
  --color-grid: rgba(10, 22, 40, 0.04);
  --font-sans: "Montserrat", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --layout-max: 60rem;
  --layout-reading: 45rem;
  --page-gutter: 1rem;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --shadow-soft: 0 4px 24px rgba(10, 22, 40, 0.06);
  --shadow-glow-gold: 0 0 60px rgba(232, 185, 35, 0.25);
  --shadow-glow-api: 0 0 80px rgba(61, 123, 255, 0.2);
  --nav-height: 4.25rem;
  --touch: 44px;
  --hero-min-height: clamp(15rem, 42vw, 21rem);
  --hero-min-height-desktop: clamp(26rem, 56vh, 38rem);
  --logo-hang: 1.15rem;
}