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

:root {
  --color-bg: #FFFFFF;
  --color-surface: #F3F4F3;
  --color-text: #1B221E;
  --color-muted: #56605A;
  --color-border: #C7C7C7;
  --color-primary: #43514A;
  --color-primary-hover: #343F39;
  --color-accent: #C7C7C7;
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #C7C7C7;

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

  --text-body: 17px;
  --text-article: 18px;
  --text-small: 13px;
  --text-h1-home: 38px;
  --text-h1: 34px;
  --text-h2: 28px;
  --text-h3: 20px;
  --text-numeral: 44px;
  --text-cta: 32px;
  --text-price: 64px;

  --lh-body: 1.65;
  --lh-heading: 1.1;
  --tracking-heading: -0.025em;
  --tracking-label: 0.06em;

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

  --radius: 4px;
  --width-content: 1160px;
  --width-text: 680px;
  --gutter: 20px;
}

@media (min-width: 900px) {
  :root {
    --text-h1-home: 64px;
    --text-h1: 48px;
    --text-h2: 34px;
    --text-numeral: 56px;
    --text-cta: 44px;
    --text-price: 96px;
    --space-section: 112px;
    --gutter: 32px;
  }
}