:root {
  --color-graphite: #20242a;
  --color-teal-brand: #00a6a6;
  --color-teal-action: #007878;
  --color-teal-action-hover: #005f5f;
  --color-link-on-dark: #00a6a6;
  --color-link-on-dark-hover: #79dada;
  --color-link-on-dark-focus: #ffffff;
  --color-link-on-dark-selected: #9ce5e5;
  --color-link-on-dark-disabled: #aab0b3;
  --color-white: #ffffff;
  --color-paper: #f7f7f5;
  --color-mist: #eef0f0;
  --color-divider: #cfd3d4;
  --color-muted: #686f73;
  --color-muted-on-mist: #596166;
  --color-error: #a23b2a;
  --color-success: #146b4c;
  --color-warning: #7a4a00;
  --font-interface: Manrope, "Helvetica Neue", Arial, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 112px;
  --space-13: 128px;
  --content-max: 1240px;
  --measure-body: 68ch;
  --measure-lead: 58ch;
  --target-min: 44px;
  --radius-default: 4px;
  --radius-media: 6px;
  --rule-default: 1px;
  --rule-active: 2px;
  --header-height: 80px;
  --outer-padding: 32px;
  --section-gap: 96px;
  --compact-gap: 80px;
  --type-h1: 56px;
  --type-h2: 40px;
  --type-h3: 28px;
  --type-h4: 22px;
  --type-lead: 20px;
  --type-body: 17px;
  --type-small: 14px;
  --type-label: 13px;
  --motion-standard: 180ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 1440px) {
  :root {
    --section-gap: 112px;
    --type-h1: 64px;
    --type-h2: 44px;
    --type-h3: 30px;
    --type-lead: 21px;
    --type-body: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --header-height: 72px;
    --outer-padding: 24px;
    --section-gap: 80px;
    --compact-gap: 64px;
    --type-h1: 48px;
    --type-h2: 36px;
    --type-h3: 26px;
    --type-h4: 20px;
    --type-lead: 19px;
    --type-body: 17px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-height: 64px;
    --outer-padding: 20px;
    --section-gap: 64px;
    --compact-gap: 48px;
    --type-h1: 42px;
    --type-h2: 32px;
    --type-h3: 24px;
    --type-h4: 20px;
    --type-lead: 18px;
    --type-body: 16px;
  }
}

@media (max-width: 359px) {
  :root {
    --outer-padding: 16px;
    --section-gap: 56px;
    --type-h1: 38px;
    --type-h2: 30px;
    --type-h3: 22px;
    --type-h4: 18px;
  }
}