/* ============================================================
   The Rested Mama Village — design tokens
   The ONLY file where color, size, and spacing literals live.
   Components reference the semantic roles, never the raw brand names.
   ============================================================ */

:root {
  /* ---- Brand: locked (docs/HANDOFF.md) ---- */
  --deep-green:  #3C4A39;
  --meadow:      #74A449;  /* DECORATIVE ONLY — 2.73:1 on cream. Never carries text. */
  --sage:        #EDF0E8;
  --cream:       #FAF6EE;
  --oat:         #E7DDC9;
  --light-green: #a9d17e;  /* readable on deep green only — 5.43:1 */
  --meadow-deep: #4E7833;  /* Meadow one stop darker, for script and hovers on LIGHT grounds:
                              4.80:1 on cream, 4.49:1 on sage. Meadow itself is 2.73:1 there. */

  /* ---- Tertiary: Clay. Demoted 2026-09-07 to the error colour only. It used to be
     the interactive accent (links, focus, the Send button) and was the one warm object
     on an otherwise green page; it failed on sage (4.22:1) and read as unfinished. ---- */
  --tertiary:      #C77B54;
  --tertiary-deep: #A65F3C;  /* 4.51:1 on cream — field errors and invalid borders */

  /* ---- Semantic roles ---- */
  --bg:                 var(--cream);
  --bg-alt:             var(--sage);
  --bg-inverse:         var(--deep-green);
  --ink:                var(--deep-green);
  --ink-muted:          #5B6658;   /* 5.59:1 cream, 5.23:1 sage (was #6B7668: 4.41 / 4.13, under AA) */
  --ink-inverse:        var(--cream);
  --ink-inverse-muted:  #D5DDCF;   /* 6.76:1 deep green, 5.75:1 on the night price card */
  /* Interactive colour on light grounds: links, focus rings, the FAQ marker. The night
     section and the footer rebind it to light green. One interactive colour, everywhere. */
  --accent:             var(--ink);
  --accent-hover:       var(--meadow-deep);
  --danger:             var(--tertiary-deep);
  --rule:               #D8DED2;
  --rule-inverse:       #55634F;

  /* ---- Buttons: the deep-green pill, flipping to light green on hover ---- */
  --btn-bg:        var(--ink);
  --btn-ink:       var(--bg);
  --btn-hover-bg:  var(--light-green);   /* deep green on light green: 5.43:1 */
  --btn-hover-ink: var(--deep-green);

  /* ---- Type ---- */
  --font-display: "Italiana", Georgia, serif;
  --font-script:  "Great Vibes", cursive;
  --font-label:   "Source Serif 4", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.60rem, 1.40rem + 1.00vw, 2.20rem);
  --step-3:  clamp(2.10rem, 1.70rem + 2.00vw, 3.40rem);
  --step-4:  clamp(2.70rem, 1.90rem + 4.00vw, 5.50rem);

  /* Italiana is drawn as hairlines. The lockup carries a same-colour stroke so the
     mark holds its weight (docs/2026-09-09-site-lockup-weight-handoff.md: "The" at
     0.03em, the rest at 0.01em); content set in Italiana got no such bump and read
     under-inked beside it. This is that bump, for headings and display lines only —
     the lockup keeps its own values, which are tuned to match the exported PNGs. */
  --display-weight: 0.01em;

  --leading-tight: 1.08;
  --leading-snug:  1.30;
  --leading-body:  1.65;
  --tracking-label: 0.22em;
  --tracking-the:   0.34em;  /* per round2/nest-final-sage.html, the master lockup source */

  /* ---- Space ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.75rem;
  --space-m:   1.25rem;
  --space-l:   2rem;
  --space-xl:  3.25rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;
  --section-y: clamp(4rem, 3rem + 6vw, 9rem);

  /* ---- Measure & shape ---- */
  --measure:      62ch;
  --measure-tight: 46ch;
  --container:    1180px;
  --gutter:       clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --radius-s:     6px;
  --radius-m:     14px;
  --radius-pill:  999px;

  /* The arch. Echoes the cradle badge; must survive the swap to her
     professional photos without a redesign. */
  --arch:       50% 50% var(--radius-m) var(--radius-m) / 34% 34% var(--radius-m) var(--radius-m);
  --arch-outer: 50% 50% calc(var(--radius-m) + 14px) calc(var(--radius-m) + 14px)
              / 34% 34% calc(var(--radius-m) + 14px) calc(var(--radius-m) + 14px);

  /* The vine gutter and its centre line — the leaves anchor to --vine-c. */
  --vine-gutter: clamp(2.4rem, 2rem + 1vw, 3.6rem);
  --vine-w:      28px;
  --vine-c:      14px;

  /* ---- Lockup sizes: font-size = horizontal nest width / 10 (see .lockup) ----
     nav 6px = the 60px nest; condensed 4.6px = 46px. The hero mark is the
     stacked lockup, ~21.6em wide at the text block; its size is fluid and
     capped so it fits the hero column at any width. */
  --lockup-nav:           6px;
  --lockup-nav-condensed: 4.6px;
  /* The footer mark: a 125px nest, the mark's second big moment. The horizontal
     lockup is ~33em wide; on narrow screens it shrinks so that it fills only
     ~85% of the space between the gutters and keeps air on its right. */
  --lockup-footer: clamp(7px, (100vw - 2 * var(--gutter)) / 39, 12.5px);
  --lockup-hero: clamp(8px, min(0.5rem + 1vw, (100vw - 2 * var(--gutter)) / 21.6), 17px);

  --nav-h:      clamp(5.25rem, 4.75rem + 1.6vw, 6.5rem);
  --nav-h-condensed: 5rem;   /* the lockup is ~62px tall — this keeps it breathing */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-mid:  420ms;
  --dur-slow: 720ms;
}