:root {
  /* ── Forest green scale ── */
  --forest-ink: #ffffff;   /* deepest, unused now */
  --forest: #ead8c3;   /* hero sections — medium */
  --forest-mid: #ffffff;   /* nav — readable with white text */
  --forest-sage: #e0e0e0;   /* hero + dark sections — clearly light */
  --forest-pale:  #d8ecd0;   /* pale tint backgrounds */

  /* ── Warm linen scale ── */
  --linen: #f7f7f7;   /* main page background */
  --linen-dark: #e0e0e0;   /* slightly darker beige sections */
  --linen-deeper: #d8c9a8;   /* borders, dividers */

  /* ── Walnut brown ── */
  --walnut: #181818;
  --walnut-mid: #404040;
  --walnut-light: #888888;

  /* ── Dusty amber ── */
  --amber: #058a4b;
  --amber-deep: #046d3b;
  --amber-light: rgba(5,138,75,.15);
  --amber-pale: rgba(5,138,75,.06);

  /* ── Aliases used throughout CSS ── */
  --brand: #058a4b;
  --brand-dark: #046d3b;
  --brand-mid: #058a4b;
  --brand-light: #07a85c;
  --brand-pale: rgba(5,138,75,.06);
  --gold: #058a4b;
  --gold-light: #07a85c;

  --white: #ffffff;
  --cream: #f7f7f7;
  --cream-dark: #e0e0e0;
  --charcoal: #181818;
  --text: #181818;
  --text-mid: #404040;
  --text-light: #888888;
  --border: #e0e0e0;

  --green-deep:   #5a8050;
  --green-mid:    #7a9e6e;
  --green-light:  #7a9e6e;
  --green-pale:   #d8ecd0;

  --font: 'Jost', system-ui, sans-serif;

  --side-w:      260px;
  --top-h:       68px;
  --audio-h:     72px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --max-w:       1440px;
  --radius:      10px;
  --radius-lg:   20px;

  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:      0.18s ease;
  --t-mid:       0.35s var(--ease);
  --t-slow:      0.65s var(--ease);

  --shadow-sm:   0 2px 10px rgba(0,0,0,0.06);
  --shadow-md:   0 8px 30px rgba(0,0,0,0.10);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.15);

/* ════════════════════════════════════════════════════════════════
   SEMANTIC COLOR TOKENS — used by ALL CSS files
   Override these per theme — never hardcode colors in base CSS
════════════════════════════════════════════════════════════════ */

/* ── NAV ── */
--c-nav-bg: #ffffff;
--c-nav-border: rgba(0,0,0,.06);
--c-nav-shadow: 4px 0 20px rgba(0,0,0,.06);
--c-nav-text: #181818;
--c-nav-text-muted: rgba(24,24,24,.5);
--c-nav-hover-bg: #058a4b;
--c-nav-hover-text: #ffffff;
--c-nav-active-bg: #058a4b;
--c-nav-active-text: #ffffff;
--c-nav-active-bar: #058a4b;
--c-nav-logo-area-border: #e0e0e0;
--c-nav-cta-bg: #058a4b;
--c-nav-cta-text: #ffffff;
--c-nav-cta-hover: #046d3b;

/* ── NAV: LANG TOGGLE ── */
--c-lang-text: #181818;
--c-lang-border: #d4d4d4;
--c-lang-active-bg: #058a4b;
--c-lang-active-text: #ffffff;
--c-lang-active-border: #058a4b;
--c-lang-switcher-bg: #e0e0e0;

/* ── NAV: TOP BAR ── */
--c-topbar-bg: rgba(255,255,255,.95);
--c-topbar-border: rgba(0,0,0,.06);
--c-topbar-link-text: #181818;
--c-topbar-link-hover: #058a4b;
--c-topbar-underline: #058a4b;
--c-topbar-ctrl-text: rgba(24,24,24,.5);
--c-topbar-ctrl-hover: #e0e0e0;
--c-topbar-lang-bg: #e0e0e0;
--c-topbar-lang-active-bg: #ffffff;
--c-topbar-lang-active-text: #058a4b;

/* ── NAV: MOBILE ── */
--c-mobile-bar-bg: #ffffff;
--c-mobile-bar-border: rgba(0,0,0,.06);
--c-mobile-overlay-bg: #ffffff;
--c-mobile-overlay-border: #e0e0e0;
--c-mobile-link-text: #181818;
--c-mobile-link-border: #e0e0e0;
--c-mobile-link-hover: #058a4b;
--c-mobile-arrow: #058a4b;
--c-mobile-close-text: rgba(24,24,24,.5);
--c-mobile-close-bg: #e0e0e0;
--c-mobile-footer-border: #e0e0e0;
--c-mobile-lang-text: rgba(24,24,24,.5);
--c-mobile-lang-border: #d4d4d4;
--c-mobile-lang-active-bg: #058a4b;
--c-mobile-lang-active-text: #ffffff;
--c-mobile-lang-active-border: #058a4b;
--c-mobile-tagline: rgba(24,24,24,.35);
--c-hamburger: #181818;

/* ── NAV: AUDIO PLAYER ── */
--c-audio-bg: #e0e0e0;
--c-audio-border: rgba(5,138,75,.15);
--c-audio-play-bg: #e0e0e0;
--c-audio-play-text: #181818;
--c-audio-play-hover: #058a4b;
--c-audio-play-shadow: rgba(5,138,75,.25);
--c-audio-title: #058a4b;
--c-audio-time: rgba(24,24,24,.4);
--c-audio-vol-bg: rgba(0,0,0,.1);
--c-audio-thumb: #058a4b;

/* ── FOOTER ── */
--c-footer-bg: #1a1a1a;
--c-footer-text: rgba(255,255,255,.75);
--c-footer-tagline: rgba(255,255,255,.55);
--c-footer-heading: rgba(255,255,255,.35);
--c-footer-link: rgba(255,255,255,.65);
--c-footer-link-hover: #ffffff;
--c-footer-email: rgba(255,255,255,.65);
--c-footer-border: rgba(255,255,255,.1);
--c-footer-social-bg: rgba(255,255,255,.08);
--c-footer-social-border: rgba(255,255,255,.12);
--c-footer-social-text:rgba(255,255,255,.7);
--c-footer-social-hover-bg: rgba(255,255,255,.18);
--c-footer-social-hover-text: #ffffff;
--c-footer-copy: rgba(255,255,255,.35);
--c-footer-legal: rgba(255,255,255,.4);
--c-footer-legal-sep: rgba(255,255,255,.15);

/* ── PAGE & SECTIONS ── */
--c-page-bg: #f7f7f7;
--c-section-light: #f7f7f7;
--c-section-dark: #e0e0e0;
--c-section-dark-text: #181818;
--c-hero-bg: #ead8c3;
--c-hero-text: #181818;
--c-hero-sub: rgba(24,24,24,.6);

/* ── BUTTONS ── */
--c-btn-primary-bg: #e0e0e0;
--c-btn-primary-text: #181818;
--c-btn-primary-hover: #058a4b;
--c-btn-outline-color: #058a4b;
--c-btn-ghost-text: #181818;
--c-btn-ghost-border: #d4d4d4;
--c-btn-ghost-hover: #e0e0e0;

/* ── ACCENTS ── */
--c-accent: #058a4b;
--c-accent-dark: #046d3b;
--c-accent-light: rgba(5,138,75,.12);
--c-accent-pale: rgba(5,138,75,.06);

/* ── CARDS ── */
--c-card-bg: #ffffff;
--c-card-border: #e0e0e0;
--c-card-tag-text: #058a4b;
--c-card-tag-bg: rgba(5,138,75,.08);
--c-card-hover-shadow: 0 8px 24px rgba(0,0,0,.08);
--c-brand-card-glow: rgba(5,138,75,.25);
--c-brand-card-shimmer: rgba(5,138,75,.08);

/* ── FORMS ── */
--c-input-bg: #ffffff;
--c-input-border: #d4d4d4;
--c-input-focus: #058a4b;
--c-input-focus-ring: rgba(5,138,75,.2);

/* ── MISC ── */
--c-scrollbar-thumb: #d4d4d4;
--c-scrollbar-track: #f7f7f7;
--c-cookie-bg: #ffffff;
--c-cookie-border: rgba(5,138,75,.2);
--c-eyebrow: #058a4b;
--c-stat-num: #058a4b;
--c-value-num: #058a4b;
--c-post-cat: #058a4b;
--c-highlight-border: #058a4b;
--c-highlight-bg: rgba(5,138,75,.06);


  /* ── WAVE DIVIDERS ──
     Wave fills/backgrounds are handled by .c-wave--{from}-{to}-{dir}
     modifier classes in content.css. These variables are the wrapper
     backgrounds for brand/footer context (still referenced by CSS). */
  --c-wave-bg-dark: #e0e0e0;   /* wrapper bg = dark section color above wave */
  --c-wave-bg-light: #f7f7f7;         /* wrapper bg = light section color above wave */
  --c-wave-bg-hero: #ead8c3;        /* wrapper bg = hero color above wave */
  --c-wave-bg-footer: #f7f7f7;     /* wrapper bg = last section before footer */

}

/* ════════════════════════════════════════════════════════════════
   COLOR THEMES — override CSS variables per theme
   Applied via data-theme="noir" | "sand" | "dusk" on <html>
════════════════════════════════════════════════════════════════ */

/* ── Brand box tokens ── */
--c-brandbox-bg: #484848;
--c-brandbox-card: #2e2e2e;
--c-brandbox-logo: #1e1e1e;
--c-brandbox-border: rgba(255,255,255,.08);
--c-brandbox-text: #ffffff;
--c-brandbox-muted: rgba(255,255,255,.55);

/* ── Button gradient tokens ── */
--c-btn-gradient: linear-gradient(145deg, #ffffff 0%, #e8e8e8 100%);
--c-btn-gradient-hover: linear-gradient(145deg, #058a4b 0%, #046d3b 100%);
--c-btn-shadow: 0 1px 3px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.9);
--c-btn-shadow-hover: 0 4px 14px rgba(5,138,75,.3), inset 0 1px 0 rgba(255,255,255,.15);