@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
  --color-bg: #F5F5F5;
  --color-surface: #FFFFFF;
  --color-band: #DAE2DA;
  --color-text: #14231B;
  --color-muted: #4F5F55;
  --color-border: #C9D3CA;
  --color-primary: #21734A;
  --color-primary-hover: #1A5C3B;
  --color-on-primary: #FFFFFF;
  --color-deep: #163D2A;
  --color-on-deep: #F5F5F5;

  --font-main: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-body: 18px;
  --fs-intro: 20px;
  --fs-label: 13px;
  --fs-hero: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-statement: 28px;
  --fs-nav: 16px;

  --lh-body: 1.65;
  --lh-heading: 1.05;
  --tracking-heading: -0.03em;
  --tracking-label: 0.12em;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-section: 64px;

  --content-width: 1180px;
  --header-height: 76px;
  --radius: 14px;
  --radius-pill: 999px;
  --button-height: 52px;
}

@media (min-width: 900px) {
  :root {
    --fs-hero: 64px;
    --fs-h2: 40px;
    --fs-statement: 36px;
    --space-section: 112px;
  }
}