/* ==========================================================
   TOKENS — every color, font, and size the site uses.
   Change the palette here and nowhere else.
   (Placeholder palette carried over from the holding page.)
   ========================================================== */
:root {
  /* Color */
  --bg:          #3f433e;  /* page background */
  --surface:     #353934;  /* dropdown panel, raised areas */
  --text:        #e8e6e1;  /* main text + logo */
  --text-muted:  #b9b4aa;  /* secondary text (4.8:1 on --bg) */
  --line:        rgba(232, 230, 225, 0.14);
  --rail-start:  #528740;  /* gradient rail, left end */
  --rail-end:    #3f6e37;  /* gradient rail, right end */
  --accent:      #528740;  /* hover tabs, current page */
  --focus:       #e8e6e1;  /* keyboard focus outline */
  --emblem-line: #8d877a;  /* emblem diamond outline */

  /* Type
     --font-heading and --font-body are set by partials/fonts.njk from
     src/_data/theme.json. Change fonts there, not here. */
  --font: var(--font-body);          /* alias, kept so older rules still work */

  /* Layout */
  --container: 75rem;                       /* max content width */
  --gutter: clamp(1rem, 4vw, 2.5rem);       /* side padding */
  --header-max: 100rem;                     /* nav links stop this far from the left edge */

  /* Header: logo width. Everything in the header scales from this. */
  --logo-w-mobile:  clamp(12.5rem, 100vw - 8.5rem, 19rem);
  --logo-w-desktop: clamp(16rem, 26vw, 22.5rem);
  /* Breakpoint where the nav collapses to a menu is in header.css (64em). */
}