/* Design tokens taken from the Figma / Anima exports.
   Change the brand block below and every page follows. */
:root {
  /* Brand */
  --color-brand: #00732d;
  --color-brand-dark: #06150b;
  --color-brand-light: #f9faf5;
  --color-brand-mint: #e3f8e8;
  --color-accent: #2d78ff;

  /* Surfaces */
  --color-ink: var(--color-brand-dark);
  --color-bg: var(--color-brand-light);
  --color-surface: #ffffff;
  --color-surface-mint: var(--color-brand-mint);
  --color-header-bg: color-mix(in srgb, var(--color-ink) 95%, transparent);
  --color-hero-bg: var(--color-ink);
  --color-footer-bg: var(--color-ink);

  /* Text on light */
  --color-text: var(--color-ink);
  --color-heading: var(--color-ink);
  --color-text-strong: color-mix(in srgb, var(--color-ink) 80%, transparent);
  --color-text-muted: color-mix(in srgb, var(--color-ink) 70%, transparent);
  --color-text-subtle: color-mix(in srgb, var(--color-ink) 60%, transparent);
  --color-text-faint: color-mix(in srgb, var(--color-ink) 50%, transparent);

  /* Text on dark */
  --color-on-dark: #fffefe;
  --color-text-on-dark: var(--color-on-dark);
  --color-text-on-dark-muted: color-mix(in srgb, var(--color-on-dark) 75%, transparent);
  --color-text-on-brand: #ffffff;
  --color-on-brand: var(--color-text-on-brand);
  --color-text-on-cream: color-mix(in srgb, var(--color-brand-light) 80%, transparent);

  /* Lines */
  --color-border: #dbe8de;
  --color-border-soft: color-mix(in srgb, var(--color-border) 60%, transparent);
  --color-border-on-dark: color-mix(in srgb, var(--color-on-dark) 10%, transparent);
  --color-border-on-dark-strong: color-mix(in srgb, var(--color-on-dark) 20%, transparent);

  /* Controls */
  --color-ink-button: #0e162b;
  --color-ink-button-text: #f8f9fb;
  --color-ink-button-border: #e1e8f0;
  --color-button-bg: var(--color-brand);
  --color-button-text: var(--color-text-on-brand);
  --color-link: var(--color-brand);
  --color-focus: #4a90e2;

  /* Type */
  --font-family: "Outfit", Helvetica, sans-serif;
  --title-xl-size: 60px;
  --title-xl-line: 60px;
  --title-xl-track: -0.6px;
  --title-lg-size: 48px;
  --title-lg-line: 48px;
  --title-lg-track: -0.48px;
  --title-md-size: 24px;
  --title-md-line: 32px;
  --title-md-track: -0.24px;
  --title-sm-size: 18px;
  --title-sm-line: 26px;
  --text-lg-size: 18px;
  --text-lg-line: 28px;
  --text-size: 16px;
  --text-line: 24px;
  --text-sm-size: 14px;
  --text-sm-line: 20px;
  --text-xs-size: 12px;
  --text-xs-line: 16px;
  --eyebrow-size: 12px;
  --eyebrow-line: 16px;
  --eyebrow-track: 1.2px;

  /* Layout */
  --container-width: 1280px;
  --container-pad: 32px;
  --section-pad-y: 80px;
  --section-pad-y-lg: 112px;
  --section-pad-y-xl: 128px;
  --header-height: 73px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 40px;
  --radius-full: 9999px;

  /* Effects */
  --shadow-sm: 0 1px 2px -1px color-mix(in srgb, black 10%, transparent),
    0 1px 3px color-mix(in srgb, black 10%, transparent);
  --shadow-md: 0 4px 6px -4px color-mix(in srgb, black 10%, transparent),
    0 10px 15px -3px color-mix(in srgb, black 10%, transparent);
  --shadow-lg: 0 25px 50px -12px color-mix(in srgb, black 25%, transparent);
  --shadow-card: var(--shadow-sm);
  --transition: 200ms ease;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

@media (max-width: 1024px) {
  :root {
    --title-xl-size: 44px;
    --title-xl-line: 48px;
    --title-lg-size: 36px;
    --title-lg-line: 42px;
    --section-pad-y: 64px;
    --section-pad-y-lg: 80px;
    --section-pad-y-xl: 88px;
  }
}

@media (max-width: 640px) {
  :root {
    --title-xl-size: 34px;
    --title-xl-line: 40px;
    --title-lg-size: 28px;
    --title-lg-line: 34px;
    --title-md-size: 20px;
    --title-md-line: 28px;
    --container-pad: 20px;
    --section-pad-y: 48px;
    --section-pad-y-lg: 56px;
    --section-pad-y-xl: 64px;
  }
}