/* tokens.css — the design brief, compiled (house-tech-spec §3). Compiled
   from runs/snaza-landscaping-sioux-falls-sd/brief.md §2/§3/§4/§5/§7 ("The
   Ember Settles", fresh-organic, split-hero). Every value traces to a brief
   section named in its comment; sizes not given numerically (grid widths,
   motion-element placement) are marked "Builder execution value" per the
   brief's own precedent (§3's H1-budget note, §7's motion plan). */

:root {

  /* Colour — brief §2. Derivation: real-world (none, dossier §4.5 blank) →
     local character (none) → family norms pushed via §4.1's outdoor-living
     service (a fire-pit ember). One mode: light. Pairings in brief's
     contrast table, WCAG relative luminance, 2 dp. */

  --scheme: light;

  --color-bg: #FBF4E7;                /* parchment — brief §2, L 0.9099 */
  --color-surface: #F1E4CB;           /* oat — raised plate / honest-strip bg, L 0.7851 */
  --color-ink: #2B2A1F;               /* deep olive-black, L 0.02271 */
  --color-ink-muted: #6B6650;         /* olive-grey — captions/footnotes, L 0.13211 */
  --color-accent: #9C5D14;            /* harvest-amber — DOMINANT. Text-safe on bg/surface
                                          ONLY — never on the hero atmosphere (4.17:1, FAILS AA). */
  --color-accent-ink: #FFFDF8;        /* text ON accent fill (primary CTA) */

  /* House-required structural colours (consumed by base.css) */
  --color-border: #E3D6B8;            /* hairline rule / honest-strip row dividers */
  --color-focus: #9C5D14;             /* = accent; 4.81:1 vs bg, 4.19:1 vs surface — clears 3:1 ring floor */

  /* No dark band on this site (hero field is a photograph, brief §2/§4), so
     no --color-focus-on-band token — left out rather than unused. */

  --color-selection-bg: #9C5D14;
  --color-selection-ink: #FFFDF8;

  /* Brief §2: semantic-anchor green — hero-only, the two turf-blade
     satellites. Never body text/ornament outside the hero. */
  --color-turf: #4E6435;

  /* Hero atmosphere — bounded to .field only (brief §2), never the whole
     hero section; the radial gradient behind the fire-pit photograph. */
  --color-hero-atmo-1: #FDF8EE;       /* lightest radial stop, L 0.9419 */
  --color-hero-atmo-3: #F0E4C9;       /* darkest radial stop, L 0.7824 — accent text FAILS here (4.17:1) */


  /* --- Typography ------------------------------------------------------------
     Brief §3: Epilogue (display, 700 only, upright) + Hanken Grotesk (body,
     400/600, upright). Both self-hosted, OFL 1.1, subset to the house
     declared safe range (house-tech-spec §8). 2 woff2 files total. No italic
     anywhere on this site (brief §3). */

  --font-display: 'Epilogue', 'Epilogue Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Hanken Grotesk', 'Hanken Grotesk Fallback', 'Helvetica Neue', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 600;
  --font-weight-display: 700;         /* the only Epilogue weight shipped (brief §3) */

  /* --- Type scale ------------------------------------------------------------
     Brief §3's own fluid scale table, verbatim — including the corrected
     --text-lead coefficient (22.0px @1440, replacing the tile stage's
     rounded/mismatched comment). Token NAME is --text-display, matching the
     brief's own table exactly (not the skeleton's example --text-hero). */

  --text-display: clamp(1.875rem, 1.2588rem + 2.629vw, 3.625rem);  /* 30.0 / 43.8 / 58.0px */
  --text-h2: clamp(1.3125rem, 1.0704rem + 1.0329vw, 2rem);          /* 21.0 / 26.4 / 32.0px */
  --text-lead: clamp(1.0625rem, 0.9525rem + 0.4695vw, 1.375rem);    /* 17.0 / 19.5 / 22.0px */
  --text-body: 1rem;                  /* 16px, fixed */
  --text-eyebrow: 0.75rem;            /* 12px, fixed */
  --text-micro: 0.6875rem;            /* 11px, fixed */

  --leading-tight: 1.05;              /* display, h2 */
  --leading-snug: 1.35;               /* eyebrow */
  --leading-body: 1.6;                /* body copy, lead, facts, honest-strip rows */

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.20em;            /* eyebrow — brief §3 */

  /* --- Space -----------------------------------------------------------------
     House scale, unchanged — brief §4/§5's own arithmetic is built entirely
     from these steps (space-lg=40px hero pad-start mobile, space-2xl=96px
     desktop, space-md=24px/space-xs=12px/space-sm=16px internal hero gaps). */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Brief §4: --section-gap = --space-xl = 4rem = 64px, fixed at every
     breakpoint. Two call sites only: every .section's padding-block, and the
     hero's padding-block-end. */
  --section-gap: var(--space-xl);

  /* --- Layout ------------------------------------------------------------- */

  --layout-container: 72rem;
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;

  /* Brief §4/§5: header (shared block) is "sticky below the expiry bar",
     fixed at 56px content + 1px border-bottom at every breakpoint.
     Sticky-chrome stack (§5 rule 3): expiry bar (44px, preview.css's
     --expiry-height) + header (56px + 1px) = 101px, matching the verified
     precedent (auto-evolution-north-logan-ut). css/preview.css carries the
     sticky override per its own documented pattern. */
  --layout-header-height: 56px;

  /* Split-hero archetype breakpoint (brief §4/§5: "<900px single column,
     ≥900px two-column"). 900px = 56.25em. This is a media-query condition,
     the one house-recognised literal escape hatch (base.css banner) — the
     house's two named breakpoints (48em/64em) don't carry this archetype's
     own computed switch point, so the brief's own value is used directly at
     every call site rather than approximated to a nearby house step. */

  /* Brief §5's H1 budget: container max-width 15ch at <900px (Epilogue's
     real advance width at the 30px floor), 40rem at ≥900px (the §3 scale's
     own ceiling-width pairing). Builder execution values, transcribed
     directly from §5's arithmetic table. */
  --hero-h1-max-mobile: 15ch;
  --hero-h1-max-desktop: 40rem;

  /* Brief §5: hero field is 340px at <900px, 520px at ≥900px (fixed, not
     fluid — the arithmetic table's own numbers). */
  --hero-field-height-mobile: 340px;
  --hero-field-height-desktop: 520px;

  /* Brief §4: the hero's own two-column grid gap at ≥900px. */
  --hero-grid-gap: var(--space-lg);   /* 40px */

  /* Brief §5: primary CTA is 52px tall at both breakpoints — a Builder
     execution value taken directly from the arithmetic table's own CTA row,
     not invented; it is what makes the CTA-bottom numbers in §5 correct. */
  --control-height-primary: 52px;

  /* Brief §3: the head-rule ornament's stated minimum. */
  --rule-min-width: 3rem;

  /* --- Radius / shadow / border -------------------------------------------
     The brief carries no bespoke radius/shadow direction; the house default
     scale is used unchanged, applied selectively (buttons, the hero field's
     image corners) rather than uniformly across a card grid this brief does
     not have (design-rules §4). */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(43 42 31 / 0.06);
  --shadow-md: 0 6px 24px rgb(43 42 31 / 0.09);
  --shadow-lg: 0 24px 60px rgb(43 42 31 / 0.14);

  --border-hairline: 1px;
  --border-thick: 3px;
  --border-style: solid;

  /* Brief §3: the head-rule ornament is a literal 2px bar — not on the
     border-hairline(1px)/border-thick(3px) scale, so it is named here as its
     own Builder execution value, transcribed from the brief's own number. */
  --rule-height: 2px;

  /* Component gaps the brief's §4 largest-gap check names explicitly that do
     not land on the shared space scale above (14px, 32px) — named here
     rather than left as bare literals in site.css, the same pattern
     thoms-lawn-care-smithfield-ut used for its own off-scale gaps. */
  --gap-honest-strip: 0.875rem;       /* 14px — brief §4 */
  --gap-process: 2rem;                /* 32px — brief §4 */

  /* --- Motion --------------------------------------------------------------
     House defaults for reveals (brief §7 does not depart from them). The
     ember-settle signature move (brief §7) gets its own duration tokens:
     the one-shot 1400ms settle, and the five independent, non-synchronised
     drift loops (three embers, two turf blades) named at their brief values. */

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --reveal-shift: 1.25rem;
  --reveal-stagger: 90ms;

  /* Signature move — "the ember settles" (brief §7). */
  --duration-ember-settle: 1400ms;    /* one-shot, cubic-bezier ease-out */
  --duration-ember-drift-1: 14s;
  --duration-ember-drift-2: 19s;
  --duration-ember-drift-3: 24s;
  --duration-turf-sway-1: 8s;
  --duration-turf-sway-2: 11s;
  --ember-glow-rest-opacity: 0.9;     /* the settled glow's rest state (brief §7) */

  /* Ember-settle device geometry — Builder execution values (brief §7 fixes
     the physics/timing, not exact pixel sizes for the overlay shapes). */
  --field-glow-size: 2.25rem;
  --field-ember-size: 0.5rem;
  --field-ember-drift-distance: 0.875rem;
  --field-turf-width: 0.25rem;
  --field-turf-height: 1.75rem;

  /* --- Z layers ------------------------------------------------------------- */
  --z-base: 0;
  --z-hero-field-atmo: 1;
  --z-hero-field-embers: 2;
  --z-hero-field-turf: 3;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* @font-face — self-hosted woff2, OFL 1.1, subset to the house safe range
   (spec §8), identical unicode-range on both. Coverage gap (§8): U+2010/
   2011/2012/2015/2032/2033 absent from BOTH faces — not the mid-sentence
   split §8 flags; none render in this site's copy. Epilogue: static 700
   instance. Hanken Grotesk: partial-variable, 400-600. */

@font-face {
  font-family: 'Epilogue';
  src: url('../assets/fonts/epilogue-variable-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF,
    U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/hanken-grotesk-variable-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF,
    U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}

/* Metrics-matched fallbacks (house-tech-spec §8, brief §3). Measured with
   scripts/font-metrics.mjs (the fontaine/next-font method): size-adjust =
   frequency-weighted avgCharWidth ratio; overrides derived from each real
   face's hhea/OS2 metrics divided by size-adjust. Brief §3 names Helvetica
   Neue/Arial as the donor for both faces (Georgia is a placeholder ancestor
   for Epilogue's stack only). Matched at real usage weight against
   Liberation Sans (Arial's Linux metric twin; Arial itself is
   metric-identical on Windows/macOS) — Bold for Epilogue at 700, Regular
   for Hanken Grotesk at 400. */

@font-face {
  font-family: 'Epilogue Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  font-weight: 700;
  size-adjust: 108.36%;
  ascent-override: 72.9%;
  descent-override: 21.69%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Hanken Grotesk Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  font-weight: 400;
  size-adjust: 101.56%;
  ascent-override: 98.47%;
  descent-override: 29.84%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Hanken Grotesk Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  font-weight: 600;
  size-adjust: 94.96%;
  ascent-override: 105.31%;
  descent-override: 31.91%;
  line-gap-override: 0%;
}