:root {
  /* Backgrounds */
  --color-bg: #ffffff;
  --color-bg-soft: #f7f8fa;
  --color-bg-warm: #fafaf7;
  --color-bg-subtle: #f2f5f4;

  /* Text */
  --color-text: #161b1d;
  --color-text-muted: #5f686d;
  --color-text-faint: #7b858b;
  --color-border: #e5e9eb;

  /* Brand */
  --color-primary: #087f6d;
  --color-primary-dark: #05685a;
  --color-primary-light: #ddf3ed;
  --color-primary-tint: #f0faf7;

  /* Secondary accent */
  --color-warm: #d9852c;

  /* Dark sections */
  --color-dark: #111818;
  --color-dark-soft: #182322;
  --color-dark-text: #ffffff;
  --color-dark-muted: #b8c2bf;
  --color-dark-border: #263230;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1320px;
  --container-narrow: 880px;
  --space-section: clamp(72px, 9vw, 150px);
  --space-section-sm: clamp(56px, 6vw, 96px);
  --pad-inline: clamp(20px, 5vw, 64px);

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-slow: 600ms;

  /* Typography */
  --font-heading: 'Manrope', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shadows — used sparingly */
  --shadow-sm: 0 1px 2px rgba(17, 24, 24, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 24, 24, 0.08);
  --shadow-lg: 0 20px 48px rgba(17, 24, 24, 0.12);

  --header-height: 80px;
}

@media (max-width: 640px) {
  :root { --header-height: 68px; }
}