:root {
  /* =====================================
     Fonts
  ===================================== */

  --font-sans-default: "Helvetica Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans-dyslexic: "OpenDyslexic", Arial, sans-serif;

  --font-sans: var(--font-sans-default);
  --font-headings: "OpenDyslexic", Arial, sans-serif;

  /* =====================================
     Type Scale
  ===================================== */

  --font-size-1: 0.95rem;
  --font-size-2: 1.1rem;
  --font-size-3: 1.35rem;
  --font-size-4: 1.8rem;
  --font-size-5: 2.2rem;

  /* Semantic Type */
  --font-size-body: var(--font-size-1);
  --font-size-lead: var(--font-size-2);

  --font-size-heading-1: var(--font-size-5);
  --font-size-heading-2: var(--font-size-4);
  --font-size-heading-3: var(--font-size-3);

  --font-size-section-title: var(--font-size-heading-2);
  --font-size-section-intro: var(--font-size-lead);

  --font-size-hero-title: clamp(2rem, 4.6vw, 3.6rem);
  --font-size-hero-lead: 1.6rem;
  --font-size-hero-meta: clamp(1rem, 1.5vw, 1.125rem);

  /* =====================================
     Line Heights
  ===================================== */

  --line-1: 1.55;
  --line-2: 1.7;
  --line-tight: 1.25;

  --line-section-title: var(--line-1);
  --line-section-intro: var(--line-2);

  --line-hero: 1.8;
  --line-hero-meta: 1.6;

  /* =====================================
     Spacing Scale
  ===================================== */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 4.5rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;

  /* =====================================
     Semantic Spacing
  ===================================== */

  --space-section-y: var(--space-7);
  --space-section-flow: var(--space-4);
  --space-section-title-gap: var(--space-2);
  --space-section-intro-gap: var(--space-6);

  --space-hero-y: var(--space-7);
  --space-hero-content-gap: var(--space-5);
  --space-hero-title-gap: var(--space-5);
  --space-hero-content-padding-x: var(--space-5);
  --space-hero-content-padding-y: var(--space-8);
  --space-hero-meta-top: var(--space-3);


  /* =====================================
     Layout
  ===================================== */

  --container: 1100px;

  --section-min-height-portrait: 70svh;
  --section-min-height-landscape: 100svh;
  --section-min-height: var(--section-min-height-landscape);

  --hero-min-size-portrait: clamp(28rem, 72svh, 44rem);
  --hero-min-size-landscape: clamp(40rem, 92svh, 72rem);
  --hero-min-size: var(--hero-min-size-landscape);

--container-max: var(--container);
--container-wide: 90rem;
--container-narrow: 48rem;
--container-padding: clamp(1rem, 4vw, 2rem);

  /* =====================================
     Radius + Borders
  ===================================== */

  --radius-1: 8px;
  --radius-2: 14px;

  --border-1: 1px solid rgba(0, 0, 0, 0.12);

  /* =====================================
     Colors
  ===================================== */

  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f7f8;

  --color-text: #16181d;
  --color-text-muted: #4b5563;

  --color-heading: #006633;
  --color-heading-inverse: #ffffff;

  --color-primary: #1b6f4a;
  --color-primary-strong: #006633;
  --color-primary-light: #90ba4d;
  --color-primary-contrast: #ffffff;

  --color-accent: #fdaa02;
  --color-accent-contrast: #16181d;

  --color-danger: #b42318;
  --color-danger-bg: #ffe4e6;

--color-secondary-yellow: #f3ec01;
--color-secondary-orange: #fdaa02;
--color-secondary-coral: #fd6350;
--color-secondary-pink: #ee729e;
--color-secondary-blue: #74a6ff;
--color-secondary-brown: #603813;
--color-secondary-black: #000000;

  /* =====================================
     Section Colors
  ===================================== */

  --color-section-default: var(--color-surface);
  --color-section-muted: var(--color-surface-muted);
  --color-section-yellow: var(--color-secondary-yellow);
  --color-section-orange: var(--color-secondary-orange);
  --color-section-coral: var(--color-secondary-coral);
  --color-section-pink: var(--color-secondary-pink);
  --color-section-blue: var(--color-secondary-blue);
  --color-section-green: var(--color-primary-strong);
  --color-section-green-light: var(--color-primary-light);
  --color-section-green-brown: var(--color-secondary-brown);

  --color-section-inverse: var(--color-primary-strong);
  --color-section-inverse-text: #ffffff;
  --color-section-on-light: #16181d;
  --color-section-on-strong: #ffffff;

  /* =====================================
     Z-Index
  ===================================== */

  --z-base: 0;
  --z-hero-logo: 10;
  --z-hero-trees: 20;
  --z-hero-glade: 30;
  --z-hero-tagline: 40;
  --z-header: 100;
  --z-overlay: 1000;
  --z-overlay-trigger: 1001;
  --z-toast: 2000;

  --header-edge: 0.6rem;

  /* =====================================
     Focus / Motion
  ===================================== */

  --focus-ring: 3px solid var(--color-accent);
  --focus-offset: 3px;

  --motion-ok: 1;
}

/* =====================================
   Font Preference
===================================== */

body.font-dyslexic {
  --font-sans: var(--font-sans-dyslexic);
}

/* =====================================
   Motion Preference
===================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-ok: 0;
  }
}

/* =====================================
   Orientation Mapping
===================================== */

@media (orientation: portrait) {
  :root {
    --section-min-height: var(--section-min-height-portrait);
    --hero-min-size: var(--hero-min-size-portrait);
  }
}

@media (orientation: landscape) {
  :root {
    --section-min-height: var(--section-min-height-landscape);
    --hero-min-size: var(--hero-min-size-landscape);
  }
}