:root {
  --gs-white: #ffffff;
  --gs-gray-50: #f5f5f5;
  --gs-mint: #e9f3ed;
  --gs-forest-900: #08140e;
  --gs-forest-800: #10241a;
  --gs-forest-700: #164c34;
  --gs-forest-600: #0f5b3c;
  --gs-forest-500: #1f6b45;
  --gs-forest-450: #396752;
  --gs-green: #51ad32;
  --gs-orange: #f28a1a;
  --gs-danger: #c4473a;
  --gs-muted: #404038;
  --gs-subtle: #6d7c73;
  --gs-topbar: #98a09c;
  --gs-border: #d8d8d8;

  --color-bg-page: var(--gs-white);
  --color-bg-subtle: var(--gs-gray-50);
  --color-bg-mint: var(--gs-mint);
  --color-bg-brand: var(--gs-forest-700);
  --color-bg-inverse: var(--gs-forest-900);
  --color-text-primary: var(--gs-forest-800);
  --color-text-secondary: var(--gs-muted);
  --color-text-subtle: var(--gs-subtle);
  --color-text-inverse: var(--gs-white);
  --color-text-brand: var(--gs-forest-500);
  --color-text-error: var(--gs-danger);
  --color-fill-accent: var(--gs-green);
  --color-fill-cta: var(--gs-orange);
  --color-fill-phone: var(--gs-forest-450);
  --color-border-default: var(--gs-border);
  --color-border-error: var(--gs-danger);
  --color-scrollbar-track: var(--color-border-default);
  --color-scrollbar-thumb: var(--color-bg-brand);
  --scrollbar-size: 6px;
  --scrollbar-inset: 2px;

  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-pill: 999px;

  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-desktop: 1920px;
  --bp-tablet-max: 767px;
  --bp-desktop-min: 1280px;

  --container: 1200px;
  --pad-mobile: 20px;
  --pad-tablet: 32px;
  --pad-desktop: 360px;
  --pad: var(--pad-mobile);

  --font: "Manrope", system-ui, sans-serif;
  --header-h: 66px;

  --display-size: 38px;
  --display-lh: 46px;
  --h1-size: 24px;
  --h1-lh: 32px;
  --h2-size: 24px;
  --h2-lh: 32px;
  --h3-size: 24px;
  --h3-lh: 32px;
  --section-pad-y: 32px 20px 32px;
  --section-gap: 20px;
  --section-heading-gap: 16px;
}

@media (min-width: 768px) {
  :root {
    --pad: var(--pad-tablet);
    --header-h: 74px;
    --display-size: 51px;
    --display-lh: 62px;
    --h1-size: 32px;
    --h1-lh: 40px;
    --h2-size: 32px;
    --h2-lh: 40px;
    --section-pad-y: 32px;
    --section-gap: 24px;
  }
}

@media (min-width: 1280px) {
  :root {
    --pad: max(40px, calc((100vw - var(--container)) / 2));
    --header-h: 113px;
    --display-size: 89px;
    --display-lh: 106px;
    --h1-size: 38px;
    --h1-lh: 46px;
    --h2-size: 38px;
    --h2-lh: 46px;
    --section-pad-y: 50px var(--pad) 60px;
    --section-gap: 32px;
  }
}