/* Generated from design-system/contract.json and figma.snapshot.json. Do not edit. */
:root {
  --lv-color-cream-25: #FCFCFC;
  --lv-color-cream-50: #F8F8F8;
  --lv-color-cream-100: #F9F6F4;
  --lv-color-cream-200: #F3ECE7;
  --lv-color-cream-400: #D8D3CF;
  --lv-color-stone-300: #C1C1C1;
  --lv-color-stone-600: #585858;
  --lv-color-stone-900: #1D1D1B;
  --lv-color-white: #FFFFFF;
  --lv-color-sage-400: #899976;
  --lv-color-sage-500: #738063;
  --lv-color-sage-700: #58634B;
  --lv-color-green-500: #5F9B63;
  --lv-color-success: #5E8C61;
  --lv-color-warning: #D7A14A;
  --lv-color-error: #B85C5C;
  --lv-color-info: #6B8BB6;
  --lv-color-ink: var(--lv-color-stone-900);
  --lv-color-muted: var(--lv-color-stone-600);
  --lv-color-primary: var(--lv-color-sage-500);
  --lv-color-primary-soft: var(--lv-color-sage-400);
  --lv-color-primary-active: var(--lv-color-sage-700);
  --lv-color-surface: var(--lv-color-cream-25);
  --lv-color-surface-card: var(--lv-color-cream-50);
  --lv-color-surface-subtle: var(--lv-color-cream-100);
  --lv-color-surface-warm: var(--lv-color-cream-200);
  --lv-color-line: var(--lv-color-cream-400);
  --lv-color-accent: var(--lv-color-green-500);
  --lv-color-status-success: var(--lv-color-success);
  --lv-color-sage: var(--lv-color-primary);
  --lv-color-sage-soft: var(--lv-color-primary-soft);
  --lv-color-sage-dark: var(--lv-color-primary-active);
  --lv-color-cream: var(--lv-color-surface-subtle);
  --lv-color-cream-deep: var(--lv-color-surface-warm);
  --lv-font-body: Montserrat, ui-sans-serif, system-ui, sans-serif;
  --lv-font-display: "Cormorant Garamond", Georgia, serif;
  --lv-shadow-sm: 0px 2px 5px 0px rgb(0 0 0 / 20%);
  --lv-reference-width-desktop: 1440px;
  --lv-reference-width-tablet: 1024px;
  --lv-reference-width-mobile: 440px;
  --lv-reference-width: 1440px;
  --lv-type-caption: 12px;
  --lv-type-body-sm: 14px;
  --lv-type-body-md: 16px;
  --lv-type-body-lg: 20px;
  --lv-type-hero-text: 20px;
  --lv-type-eyebrow: 20px;
  --lv-type-heading: 48px;
  --lv-type-hero: 60px;
  --lv-type-heading-xl: 32px;
  --lv-type-heading-lg: 24px;
  --lv-type-heading-md: 20px;
  --lv-type-card-heading: 40px;
  --lv-leading-body: 1.2;
  --lv-leading-hero-text: 1.2;
  --lv-leading-eyebrow: 1.2;
  --lv-leading-heading: 1.2;
  --lv-leading-hero: 1.2;
  --lv-space-2xs: 8px;
  --lv-space-xs: 16px;
  --lv-space-sm: 32px;
  --lv-space-md: 48px;
  --lv-space-lg: 64px;
  --lv-space-xl: 96px;
  --lv-space-2xl: 128px;
  --lv-page-gutter: 96px;
  --lv-top-space: 96px;
  --lv-section-space: 96px;
  --lv-design-max: 1568px;
  --lv-min-width-xs: 224px;
  --lv-min-width-sm: 400px;
  --lv-min-width-md: 600px;
  --lv-min-width-lg: 800px;
  --lv-content-max: 1248px;
  --lv-size-line: 1px;
  --lv-size-line-stone: 0.71px;
  --lv-size-gap-tight: 6px;
  --lv-size-gap-heading: 20px;
  --lv-size-control: 24px;
  --lv-size-icon-lg: 64px;
  --lv-size-feature-icon: 52px;
  --lv-size-social-avatar: 140px;
  --lv-size-social-wide: 700px;
  --lv-size-social-compact: 600px;
  --lv-size-water-problem-media: 256px;
  --lv-size-material-card-media: 250px;
  --lv-size-navigation-height: 64px;
  --lv-size-navigation-brand: 164px;
  --lv-size-navigation-mark: 24px;
  --lv-size-navigation-wordmark: 127px;
  --lv-size-navigation-brand-gap: 13px;
  --lv-size-navigation-actions-gap: 20px;
  --lv-size-carousel-divider-width: 62px;
  --lv-size-carousel-divider-height: 10px;
  --lv-size-benefit-media: 120px;
  --lv-size-benefit-media-compact: 38px;
  --lv-size-benefit-media-padding: 30px;
  --lv-size-benefit-label-width: 220px;
  --lv-size-stage-number-column: 120px;
  --lv-size-stage-icon: 32px;
  --lv-size-stage-height: 126px;
  --lv-size-topic-media-height: 150px;
  --lv-size-topic-height: 428px;
  --lv-size-topic-compact-height: 420px;
  --lv-size-topic-meta-icon: 20px;
  --lv-size-topic-link-icon: 16px;
  --lv-size-results-min-width: 675px;
  --lv-size-result-row-height: 44px;
  --lv-size-result-heading-height: 42px;
  --lv-size-faq-row-height: 57px;
  --lv-size-faq-icon: 25px;
  --lv-size-compact-card-inset: 10px;
  --lv-radius-sm: 4px;
  --lv-radius-md: 8px;
  --lv-radius-pill: 99999px;
  --lv-radius-lg: 16px;
  --lv-radius: var(--lv-radius-md);
}

@media (max-width: 1024px) {
  :root {
    --lv-reference-width: 1024px;
    --lv-type-caption: 12px;
    --lv-type-body-sm: 14px;
    --lv-type-body-md: 16px;
    --lv-type-body-lg: 20px;
    --lv-type-hero-text: 20px;
    --lv-type-eyebrow: 20px;
    --lv-type-heading: 40px;
    --lv-type-hero: 48px;
    --lv-type-heading-xl: 28px;
    --lv-type-heading-lg: 24px;
    --lv-type-heading-md: 20px;
    --lv-type-card-heading: 32px;
    --lv-leading-body: 1.2;
    --lv-leading-hero-text: 1.2;
    --lv-leading-eyebrow: 1.2;
    --lv-leading-heading: 1.2;
    --lv-leading-hero: 1.2;
    --lv-space-2xs: 8px;
    --lv-space-xs: 16px;
    --lv-space-sm: 32px;
    --lv-space-md: 32px;
    --lv-space-lg: 48px;
    --lv-space-xl: 64px;
    --lv-space-2xl: 96px;
    --lv-page-gutter: 48px;
    --lv-top-space: 48px;
    --lv-section-space: 48px;
    --lv-design-max: 1024px;
    --lv-min-width-xs: 224px;
    --lv-min-width-sm: 360px;
    --lv-min-width-md: 400px;
    --lv-min-width-lg: 600px;
    --lv-content-max: 928px;
    --lv-size-line: 1px;
    --lv-size-line-stone: 0.71px;
    --lv-size-gap-tight: 6px;
    --lv-size-gap-heading: 20px;
    --lv-size-control: 24px;
    --lv-size-icon-lg: 64px;
    --lv-size-feature-icon: 52px;
    --lv-size-social-avatar: 140px;
    --lv-size-social-wide: 700px;
    --lv-size-social-compact: 600px;
    --lv-size-water-problem-media: 256px;
    --lv-size-material-card-media: 250px;
    --lv-size-navigation-height: 64px;
    --lv-size-navigation-brand: 171px;
    --lv-size-navigation-mark: 24px;
    --lv-size-navigation-wordmark: 127px;
    --lv-size-navigation-brand-gap: 13px;
    --lv-size-navigation-actions-gap: 20px;
    --lv-size-carousel-divider-width: 62px;
    --lv-size-carousel-divider-height: 10px;
    --lv-size-benefit-media: 120px;
    --lv-size-benefit-media-compact: 38px;
    --lv-size-benefit-media-padding: 30px;
    --lv-size-benefit-label-width: 220px;
    --lv-size-stage-number-column: 86px;
    --lv-size-stage-icon: 32px;
    --lv-size-stage-height: 76px;
    --lv-size-topic-media-height: 150px;
    --lv-size-topic-height: 428px;
    --lv-size-topic-compact-height: 420px;
    --lv-size-topic-meta-icon: 20px;
    --lv-size-topic-link-icon: 16px;
    --lv-size-results-min-width: 675px;
    --lv-size-result-row-height: 44px;
    --lv-size-result-heading-height: 42px;
    --lv-size-faq-row-height: 57px;
    --lv-size-faq-icon: 25px;
    --lv-size-compact-card-inset: 10px;
    --lv-radius-sm: 4px;
    --lv-radius-md: 8px;
    --lv-radius-pill: 99999px;
    --lv-radius-lg: 16px;
    --lv-radius: var(--lv-radius-md);
  }
}

@media (max-width: 440px) {
  :root {
    --lv-reference-width: 440px;
    --lv-type-caption: 12px;
    --lv-type-body-sm: 14px;
    --lv-type-body-md: 16px;
    --lv-type-body-lg: 16px;
    --lv-type-hero-text: 16px;
    --lv-type-eyebrow: 16px;
    --lv-type-heading: 32px;
    --lv-type-hero: 40px;
    --lv-type-heading-xl: 24px;
    --lv-type-heading-lg: 20px;
    --lv-type-heading-md: 20px;
    --lv-type-card-heading: 24px;
    --lv-leading-body: 1.2;
    --lv-leading-hero-text: 1.2;
    --lv-leading-eyebrow: 1.2;
    --lv-leading-heading: 1.2;
    --lv-leading-hero: 1.2;
    --lv-space-2xs: 8px;
    --lv-space-xs: 16px;
    --lv-space-sm: 16px;
    --lv-space-md: 16px;
    --lv-space-lg: 32px;
    --lv-space-xl: 48px;
    --lv-space-2xl: 64px;
    --lv-page-gutter: 16px;
    --lv-top-space: 32px;
    --lv-section-space: 32px;
    --lv-design-max: 440px;
    --lv-min-width-xs: 224px;
    --lv-min-width-sm: 300px;
    --lv-min-width-md: 300px;
    --lv-min-width-lg: 300px;
    --lv-content-max: 408px;
    --lv-size-line: 1px;
    --lv-size-line-stone: 0.71px;
    --lv-size-gap-tight: 6px;
    --lv-size-gap-heading: 20px;
    --lv-size-control: 24px;
    --lv-size-icon-lg: 64px;
    --lv-size-feature-icon: 52px;
    --lv-size-social-avatar: 140px;
    --lv-size-social-wide: 408px;
    --lv-size-social-compact: 408px;
    --lv-size-water-problem-media: 256px;
    --lv-size-material-card-media: 250px;
    --lv-size-navigation-height: 64px;
    --lv-size-navigation-brand: 171px;
    --lv-size-navigation-mark: 24px;
    --lv-size-navigation-wordmark: 127px;
    --lv-size-navigation-brand-gap: 13px;
    --lv-size-navigation-actions-gap: 20px;
    --lv-size-carousel-divider-width: 62px;
    --lv-size-carousel-divider-height: 10px;
    --lv-size-benefit-media: 120px;
    --lv-size-benefit-media-compact: 38px;
    --lv-size-benefit-media-padding: 30px;
    --lv-size-benefit-label-width: 220px;
    --lv-size-stage-number-column: 82px;
    --lv-size-stage-icon: 32px;
    --lv-size-stage-height: 96px;
    --lv-size-topic-media-height: 150px;
    --lv-size-topic-height: 428px;
    --lv-size-topic-compact-height: 420px;
    --lv-size-topic-meta-icon: 20px;
    --lv-size-topic-link-icon: 16px;
    --lv-size-results-min-width: 675px;
    --lv-size-result-row-height: 44px;
    --lv-size-result-heading-height: 42px;
    --lv-size-faq-row-height: 57px;
    --lv-size-faq-icon: 25px;
    --lv-size-compact-card-inset: 10px;
    --lv-radius-sm: 4px;
    --lv-radius-md: 8px;
    --lv-radius-pill: 99999px;
    --lv-radius-lg: 16px;
    --lv-radius: var(--lv-radius-md);
  }
}