/* Design tokens. Values follow docs/design-system.md. */
:root {
  --color-forest: #004d45;
  --color-forest-dark: #003b36;
  --color-teal: #008f83;
  --color-emerald: #00a896;
  --color-bright-teal: #39bdaa;
  --color-canvas: #f8faf9;
  --color-soft: #f1f5f3;
  --color-white: #ffffff;
  --color-text: #1c2926;
  --color-muted: #5f6e69;
  --color-line: #dce6e2;
  --color-brass: #705b2b;

  --font-heading: Manrope, Arial, Helvetica, sans-serif;
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-hero: clamp(42px, 5.6vw, 80px);
  --text-h2: clamp(32px, 3.8vw, 56px);
  --text-h3: clamp(22px, 2vw, 28px);
  --text-lead: clamp(17px, 1.4vw, 18px);
  --text-body: clamp(16px, 1.2vw, 18px);
  --text-meta: clamp(12px, 1vw, 14px);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;

  --container-max: 1280px;
  --reading-max: 680px;
  --gutter: 16px;
  --section-pad: var(--space-6);
  --tap-min: 44px;

  --duration-hover: 200ms;
}

@media (min-width: 480px) {
  :root {
    --gutter: 24px;
    --section-pad: var(--space-8);
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-pad: var(--space-10);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-pad: var(--space-12);
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 40px;
    --section-pad: var(--space-15);
  }
}