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

:root {
  --color-bg: #FBF8F3;
  --color-surface: #FFFFFF;
  --color-sand: #EBD9C3;
  --color-primary: #8C5A2B;
  --color-text: #2B1D12;
  --color-muted: #6B5A4A;
  --color-border: #DCC8AC;
  --color-footer-bg: #2B1D12;
  --color-footer-text: #EBD9C3;

  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-body: 17px;
  --text-small: 15px;
  --text-label: 13px;
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 20px;
  --text-quote: 24px;
  --text-price: 44px;

  --lh-body: 1.6;
  --lh-heading: 1.1;
  --ls-heading: -0.02em;

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

  --content-width: 1120px;
  --text-width: 680px;
  --faq-width: 760px;
  --radius: 6px;
  --button-height: 48px;
}

@media (min-width: 900px) {
  :root {
    --text-h1: 56px;
    --text-h2: 36px;
    --section-pad: 96px;
  }
}