/* =============================================================
   MECHANICA NATURA — DESIGN TOKENS
   Single source of truth for color, typography, spacing, and
   radius. Every other stylesheet (mn-core.css, mn-compound.css,
   mn-reference.css, and future family stylesheets) reads from
   these variables instead of redefining its own :root block.

   Reconciliation notes (July 2026):
   - mn-styles.css and agent_style.css previously each defined
     their own :root with mostly-identical values under the same
     names — forest/pine/moss/sage/parch/cream/char/clay/lichen/
     bark/muted/bdr matched exactly across both files already.
   - The one real collision was --deep: mn-styles.css set it to
     #0B1A10 ("hero background", a value nothing actually renders
     with anymore now that the hero is a photo, not a flat color),
     while agent_style.css set it to #2B2F2E and used it live, for
     the footer background. That #2B2F2E value is also exactly
     what mn-styles.css separately called --slate. So this wasn't
     two real values in conflict — it was one real value (the
     footer dark) sitting under two different names, plus one
     unused legacy value that happened to collide on the name
     --deep. Resolved here: --deep is now the single canonical
     #2B2F2E. --slate is kept as an alias, pointing at --deep, so
     any not-yet-migrated rule referencing --slate still resolves
     correctly.
   - --misty and --pearl existed only in agent_style.css; carried
     over as-is.
   - agent_style.css never used the --sp-* spacing scale or --r-*
     radius scale — it hardcoded pixel values throughout. Those
     tokens are defined here for any new component built against
     this file, but retrofitting agent_style.css's existing rules
     to use them is a separate, later cleanup — not required for
     this file to work standalone.
   - Playfair Display is the locked house serif (confirmed against
     project doctrine — DM Serif Display and Libre Baskerville
     were both tested and rejected). It's exposed here as
     --font-serif. --font-display (Cormorant Garamond) is kept
     only because a handful of not-yet-migrated mn-styles.css
     headings on Framework/Pathways still reference it; new work
     should use --font-serif, not --font-display.
   ============================================================= */

:root {
  /* ── Brand colours ─────────────────────────────────────────── */
  --forest:  #1F3D2E;   /* Primary: headings, nav, key UI */
  --pine:    #284E3B;   /* Secondary green */
  --moss:    #556B4B;   /* Section eyebrows, badges */
  --sage:    #A5B39B;   /* Borders emphasis, soft accents */
  --parch:   #F2EFE6;   /* Page background */
  --cream:   #FBF7F1;   /* Card and section alt background */
  --char:    #1A1A1A;   /* Body text */
  --clay:    #C86A4B;   /* Safety / warning accent */
  --lichen:  #C4B381;   /* Protect role badge */
  --bark:    #6A4B3A;   /* Warm brown text on lichen */
  --muted:   #4a5c4f;   /* Secondary body text */
  --bdr:     #ddd9d0;   /* Default border colour */

  /* Dark surfaces (nav-on-photo, footer, hero letterbox/fallback) */
  --deep:    #2B2F2E;   /* Canonical dark surface — footer bg, etc. */
  --slate:   var(--deep); /* Legacy alias — do not use in new work */

  /* Extended neutrals (from agent_style.css) */
  --misty:   #B7C2BB;
  --pearl:   #D1D4C8;

  /* ── Typography ───────────────────────────────────────────── */
  --font-serif:   'Playfair Display', serif;        /* Locked house serif — use for all new display/heading work */
  --font-display: 'Cormorant Garamond', Georgia, serif; /* Legacy — only for not-yet-migrated mn-styles headings */
  --font-head:    'Poppins', system-ui, sans-serif;  /* UI labels, eyebrows, nav */
  --font-body:    'Inter', system-ui, sans-serif;    /* Body copy */

  /* ── Spacing (8pt grid) ───────────────────────────────────── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  48px;
  --sp-2xl: 80px;

  /* ── Radius ───────────────────────────────────────────────── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
}