:root {
  --page: #F7FAF8;
  --surface: #FDFEFD;
  --surface-alt: #E6F0EA;
  --ink: #1F3A5F;
  --ink-soft: #445E7A;
  --ink-muted: #4F6074;
  --action: #0F7A55;
  --action-hover: #0B5F42;
  --on-action: #F7FAF8;
  --depth: #0E4F3C;
  --depth-panel: #14634A;
  --mist: #EDF3EF;
  --mist-soft: #B4CDBF;
  --rule-dark: #2A6350;
  --accent: #D9BC85;
  --rule: #D7E3DB;
  --field-border: #9FB3A8;

  /* Scrims & Overlays */
  --hero-scrim: rgba(14, 79, 60, 0.78);
  --hero-gradient: linear-gradient(180deg, rgba(14, 79, 60, 0.92) 0%, rgba(14, 79, 60, 0.78) 50%, rgba(14, 79, 60, 0.85) 100%);
  --overlay-backdrop: rgba(14, 79, 60, 0.4);
  --overlay-backdrop-dark: rgba(14, 79, 60, 0.6);

  --font-heading: 'Newsreader', serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --t-hero: clamp(1.75rem, 4.5vw, 3.25rem);
  --t-h2: clamp(1.5rem, 3.5vw, 2.5rem);
  --t-h3: 1.25rem;
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --line-height-body: 1.7;
  --line-height-heading: 1.2;

  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  --container-max: 1200px;
  --gutter: 24px;
  --section-padding: 64px;

  --radius-card: 12px;
  --radius-panel: 10px;
  --radius-button: 6px;
  --radius-image: 10px;
  --radius-badge: 0;

  --transition-hover: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-reveal: 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --section-padding: 72px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 64px;
    --section-padding: 88px;
  }
}