/* ==========================================================================
   DESIGN TOKENS
   The only file with color values. Everything else uses these names.
   Brand palette plus its listed tints.
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --deep-forest: #193C36;        /* primary dark: buttons, dark bands */
  --deep-forest-shade: #17322E;  /* headings, footer */
  --soft-sage: #BBC9BD;
  --eucalyptus: #78958A;
  --off-white: #F4F0E8;          /* light bands, text on dark */
  --page-white: #FFFDF8;         /* page background (warm white) */
  --muted-brass: #B89458;        /* CTAs and accents */
  --black: #000000;

  /* ---- Tints from the design ---- */
  --body-muted: #3F5C52;         /* secondary text, eyebrows */
  --muted: #5D7A70;              /* placeholders */
  --sage-light: #E1E6DD;         /* light sage panel */
  --sage-mid: #A3B5A9;
  --brass-light: #DCCBA8;
  --brass-hover: #A9864B;        /* brass buttons on hover (slightly darker) */

  /* ---- Lines ---- */
  --line: rgba(23, 50, 46, 0.16);
  --line-strong: rgba(23, 50, 46, 0.24);
  --line-on-dark: rgba(187, 201, 189, 0.25);

  /* ---- Fonts (loaded in css/fonts.css) ---- */
  --font-display: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* ---- Fluid sizing ----
     The design has a desktop artboard (1456px) and a mobile one (402px).
     --fl is 0 at 402px wide and 1px at 1456px wide, so
     calc(MOBILEpx + (DESKTOP - MOBILE) * var(--fl)) moves smoothly between the two.
     Every use is wrapped in clamp() so it never goes past either design value. */
  --fl: calc((100vw - 402px) / 1054);

  /* Page side padding: 20px on phones, 80px on desktop. On screens wider than the
     design, the padding grows so content stays 1296px wide (backgrounds still run edge to edge). */
  --pad-x-fluid: clamp(20px, calc(20px + 60 * var(--fl)), 80px);
  --pad-x: max(var(--pad-x-fluid), calc((100vw - 1296px) / 2));
  /* Two-column photo/panel layouts that run edge to edge use --pad-x-fluid inside the panel. */
  /* Vertical section spacing: 64px on phones, 144px on desktop */
  --pad-y: clamp(64px, calc(64px + 80 * var(--fl)), 144px);

  /* Grid gutter (12 columns on desktop) */
  --gutter: 32px;

  --header-h: 91px;              /* sticky header height on desktop (for anchor offsets) */
  --transition: 0.2s ease;
}

@media (max-width: 959.98px) {
  :root {
    --header-h: 72px;
  }
}