/* Budding — shared brand tokens.
   Every page should link this instead of defining its own :root block.
   Rebranding a color or font means editing ONE line here, not fifteen
   separate files.

   Scope, deliberately: this covers LIGHT-mode tokens and the font import
   only. Dark mode is NOT centralized here yet — it evolved page by page
   across this build, and several pages hardcode specific dark-mode values
   (e.g. a button that swaps its own foreground/background) rather than
   cleanly reusing variables. Centralizing dark mode too needs an audit of
   each page's dark-mode block first; folding it into this file before that
   audit would just hide the inconsistency, not fix it. */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Karla:wght@400;500;600;700&display=swap');

:root {
  /* Core palette */
  --forest: #1E3A2B;
  --sage: #4F7B5C;
  --sage-light: #C7D6C6;
  --brass: #C9A45C;
  --brass-light: #E4D2A6;

  /* Surfaces & text */
  --paper: #F6F2E7;
  --card: #FFFFFF;
  --ink: #1C1A16;
  --ink-soft: #5C574C;
  --rule: #E4DECE;

  /* Status */
  --danger: #A6472F;

  /* Typography */
  --font-display: 'Lora', serif;
  --font-body: 'Karla', sans-serif;
}

/* Dark mode — redefines the SAME variable names rather than introducing
   new ones, so every page that already uses var(--forest), var(--paper),
   etc. in its own CSS adapts automatically, with no per-page dark-mode
   overrides needed for anything that follows this pattern.

   Worth understanding why --forest becomes a LIGHT color here: across
   every page in this project, --forest is used for headings, the
   wordmark, and primary button backgrounds — and in every one of those
   cases, dark mode wants near-white instead, for contrast against the
   near-black page background. Same logic in reverse for --paper, which is
   both the page background AND the text color on top of forest-colored
   buttons — flipping both together is what makes button styling invert
   correctly (light bg, dark text) without any extra rules.

   The tradeoff: reading "var(--forest)" and having it render as near-white
   is a little counterintuitive in isolation. The alternative — introducing
   new semantic variable names and rewriting every page's CSS rules to use
   them — is a much bigger migration for a naming preference, so this file
   optimizes for "every existing page adapts with minimal changes" over
   "the variable name always literally matches its color." */
@media (prefers-color-scheme: dark) {
  :root {
    --forest: #F3EFE6;
    --paper: #0D140F;
    --card: #1F2B23;
    --rule: #33413A;
    --ink: #F3EFE6;
    --ink-soft: #A8A296;
    --sage-light: #2A3F30;
    --brass-light: #866727;
    /* --sage, --brass, and --danger are intentionally left unchanged —
       they've stayed the same color across modes everywhere they're used
       so far. */
  }
}

/* Shared utility — every page's logo SVG marks its forest-colored paths
   with this class so they flip to near-white in dark mode automatically.
   No per-page override needed anymore; --forest already does the work. */
.icon-forest {
  fill: var(--forest);
}