/* ==========================================================================
   tokens.css — the design brief, compiled. THE ONLY PLACE RAW VALUES LIVE
   (house-tech-spec §3). Compiled from runs/thoms-lawn-care-smithfield-ut/
   brief.md §2/§3/§4/§7; unmarked values carry forward unchanged house
   defaults the brief kept (type scale, reveal geometry).

   RESOLVED 2026-08-29 (was an open escalation, now the brief's own §3):
   Domine ships no italic on Google Fonts (confirmed via its METADATA.pb and
   the Fontsource API). AD ruling: emphasis is carried by colour
   (--color-accent) + a weight step (600→700) within the one upright Domine
   face — never italic, never a synthesised oblique. Two font files ship,
   not three; no `font-style: italic` appears anywhere on this site.
   ========================================================================== */

:root {

  /* Colour
     Brief §2. Derivation order: real-world colour (none recorded, dossier
     §4.5 BLOCKED at every tier) → local character (Smithfield's farm-adjacent
     Cache Valley setting) → family norms (quiet-premium: restraint,
     whitespace, muted). Every pairing below is in the brief's contrast
     table, computed WCAG relative luminance, 2 dp. */

  --scheme: light;

  --color-bg: #f5f2ea;                /* parchment-stone */
  --color-surface: #ece6d8;           /* raised panels, sidebar rail background */
  --color-ink: #232823;
  --color-ink-muted: #5b6058;         /* 5.75:1 on bg, 4.85:1 on surface */
  --color-accent: #4c5f55;            /* flint-sage — dominant hue, text-safe */
  --color-accent-ink: #f5f2ea;        /* text ON accent (buttons); matches bg exactly */

  /* House-required structural colours (consumed by base.css) */
  --color-border: #d8d2bd;
  --color-focus: #4c5f55;             /* = accent; 6.10:1 vs bg, 5.49:1 vs surface — clears 3:1 ring floor */

  /* Dark-band-safe focus ring. The hero is the one dark band on this site
     (brief §2, §4). Brief's own contrast table validates accent-ink
     (#f5f2ea) at 11.21:1 against the hero's lightest reachable stop, for the
     hero's own text — the same pairing is reused here for the ring rather
     than minting an unvalidated fourth colour: it is scoped to .hero only
     (site.css), never applied globally. */
  --color-focus-on-band: var(--color-accent-ink);

  --color-selection-bg: #4c5f55;
  --color-selection-ink: #f5f2ea;

  /* Brief-specific colour (§2). Decorative-only, binding rule from the
     brief's contrast table: accent-2 measures 3.04:1 on bg — AA LARGE only —
     so it NEVER carries text of any kind, at any size. It is the thin gold
     hairline / head-rule motif only (brief §3, §7). */
  --color-accent-2: #a9863e;

  /* Hero atmosphere — dark ground the living-hero sits on. Not used
     elsewhere on the site (brief §2, §4). */
  --color-hero-bg-1: #161c18;         /* darkest stop */
  --color-hero-bg-2: #2c362f;         /* lightest reachable stop under text at 375px */

  /* Hero-only emphasis tint (brief §2, rev. 2): 7.73:1 on hero atmosphere.
     Never used outside hero — --color-accent itself is 2.53:1 there. */
  --color-hero-accent: #bfcfc6;

  /* The hero's full background, brief §2's gradient-vs-flat measurement,
     verbatim — one token because it is one visual layer, not a palette of
     independent colours. #1e2621 / #202823 are intermediate gradient stops
     specific to this composition, not reused roles, so they are named here
     rather than promoted to --color-* tokens of their own. */
  --hero-atmosphere:
    radial-gradient(120% 90% at 85% -10%, var(--color-hero-bg-2) 0%, transparent 55%),
    radial-gradient(150% 110% at -5% 115%, #1e2621 0%, transparent 60%),
    linear-gradient(180deg, var(--color-hero-bg-1) 0%, #202823 58%, var(--color-hero-bg-1) 100%);

  /* Hero field scrim — darkens the top/bottom edge of the LCP image so the
     level-line device stays legible over it. Same hero-bg-1 hue, restated
     as rgb()+alpha rather than mixed via a function, so it stays one token
     rather than a per-use color-mix() call. */
  --hero-field-scrim:
    linear-gradient(180deg, rgb(22 28 24 / 0.35) 0%, rgb(22 28 24 / 0.05) 45%, rgb(22 28 24 / 0.35) 100%);


  /* Typography
     Brief §3: Domine (display, variable 500-700, upright) + Figtree (body,
     variable 400-700). Both self-hosted, subset to the house declared safe
     range (house-tech-spec §8), OFL 1.1. See the file banner above for the
     "Domine Italic" gap and its interim resolution. */

  --font-display: 'Domine', 'Domine Fallback', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: 'Figtree', 'Figtree Fallback', 'Helvetica Neue', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 600;
  --font-weight-display: 600;         /* brief §3: Domine 600, never 700, for the H1 */

  /* Type scale
     Brief §3: "No dossier or playbook line argues for a scale different
     from the house default... restraint is expressed through weight choice
     and a generous --section-gap, not through a bespoke scale." Identical
     to the skeleton default; restated here because tokens.css is the single
     place values live. */

  --text-hero: clamp(2.6rem, 9vw, 5rem);
  --text-h2: clamp(1.9rem, 5vw, 3rem);
  --text-h3: clamp(1.3rem, 3vw, 1.75rem);
  --text-lead: clamp(1.125rem, 2.2vw, 1.375rem);
  --text-body: clamp(1rem, 1.4vw, 1.0625rem);
  --text-small: 0.9375rem;
  --text-eyebrow: 0.8125rem;

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;            /* eyebrows — checked against Figtree's real metrics, brief §3 */

  /* Space
     House scale, unchanged — brief §4 argues no departure. */

  --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-2xl = 6rem = 96px, fixed at every
     breakpoint — the larger house step, chosen to express quiet-premium's
     "restraint, whitespace" directly in the rhythm. Two call sites only:
     every .section's padding-block, and the hero's padding-block-end. */
  --section-gap: var(--space-2xl);

  /* Component gap values the brief's §4 largest-gap check names explicitly,
     that do not land on the shared space scale above (20px, 32px). Named
     here rather than left as bare literals in site.css, per the token
     contract (house-tech-spec §3) — the same pattern as
     bonneville-lawn-care-idaho-falls-id's --season-card-min etc. */
  --gap-season-grid: 1.25rem;         /* 20px — season-card grid gap, brief §4 */
  --gap-loose: 2rem;                  /* 32px — testimonial gaps AND process-step gaps, brief §4 */

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

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

  /* Brief §4/§5: header fixed at 56px content + 1px border-bottom at every
     breakpoint. Sticky-chrome stack (rule 3): expiry bar (44px, preview.css's
     --expiry-height) + header (56px + 1px) = 101px — also the sidebar rail's
     sticky top offset at ≥768px (§4). Computed via calc() in site.css /
     preview.css rather than hand-typed, so the number cannot drift from its
     own inputs. */
  --layout-header-height: 56px;

  /* Brief §5's H1 budget arithmetic: container max-width 11ch below 48em,
     44rem (the §3 fluid-scale table's own ceiling-width pairing) at 48em and
     up. Brief §5: hero field (the LCP image + atmosphere band) is a fixed
     170px at both breakpoints. Builder execution values, not bare literals. */
  --hero-h1-max-mobile: 11ch;
  --hero-h1-max-desktop: 44rem;
  --hero-field-height: 170px;

  /* Sidebar-anchor archetype (brief §4): rail column width and the season
     card grid's minimum card width. Builder execution values. */
  --sidebar-rail-width: 18rem;
  --season-card-min: 14rem;

  /* Living-hero mist-plate sizing (brief §7). Builder execution values. */
  --mist-size-1: 20rem;
  --mist-size-2: 15rem;
  --hero-level-width: 12rem;
  --hero-bubble-offset: -1.75rem;      /* 28px — the settle animation's start offset */
  --sidebar-rail-min: 14rem;
  --rule-min-width: 3rem;              /* brief §3: the head-rule's stated minimum */

  /* Radius/shadow/border: house scale. quiet-premium's restraint stays near
     --radius-sm; no shadow above --shadow-none ships (flat fields, hairline
     borders — ref-007's "considered" register, 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(35 40 35 / 0.06);
  --shadow-md: 0 6px 24px rgb(35 40 35 / 0.09);
  --shadow-lg: 0 24px 60px rgb(35 40 35 / 0.14);

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

  /* Motion
     House defaults. Brief §7's reveal geometry equals these already —
     restated, not overridden. */

  --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;

  /* Living hero (brief §7/§8): the level-line settle + two mist-plate drift
     loops. Reduced-motion is scoped in site.css to these three elements
     (animation: none; the resting CSS state is already the settled
     position), not folded into base.css's global duration collapse. */
  --duration-settle: 3.4s;
  --duration-mist-1: 10.5s;
  --duration-mist-2: 13.2s;
  --delay-mist-2: 2.1s;

  /* Z layers
     Hero stack (atmosphere < mist < bubble < text), house pattern. */
  --z-base: 0;
  --z-atmosphere: 1;
  --z-mist: 2;
  --z-bubble: 3;
  --z-hero-text: 4;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* @font-face — self-hosted woff2, OFL 1.1, subset to the house declared safe
   range (house-tech-spec §8), identical unicode-range on both faces.
   Coverage gap, recorded per §8: U+2010/2011/2012/2015/2032/2033 are absent
   from BOTH faces equally (never a mid-sentence split) and none render in
   this site's copy — verified with a fontTools cmap read. */

@font-face {
  font-family: 'Domine';
  src: url('../assets/fonts/domine-variable-latin.woff2') format('woff2');
  font-weight: 500 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: 'Figtree';
  src: url('../assets/fonts/figtree-variable-latin.woff2') format('woff2');
  font-weight: 400 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;
}

/* Metrics-matched fallbacks (house-tech-spec §8, brief §3)
   Measured with scripts/font-metrics.mjs (fontaine / next/font's own
   method): size-adjust = frequency-weighted avgCharWidth ratio; overrides
   derived from the real face's hhea/OS2 metrics divided by size-adjust.

   Domine's donor for MEASUREMENT ONLY is Gelasio, Google's metric clone of
   Georgia (no Georgia binary is installed in this build environment); the
   @font-face below still declares `local('Georgia')` etc. per brief §3 —
   Gelasio is never a font this site loads or ships.

   Matched at each face's PRIMARY usage weight, declared explicitly so the
   browser never synthesizes bold onto an unmatched instance: Domine 600
   (display/H1, brief §3) against Gelasio Bold (Georgia ships 400/700
   only); Figtree 400 (dominant body weight) against Liberation Sans
   Regular (Arial's Linux metric
   twin, installed in this build environment; Arial itself on
   Windows/macOS is metric-identical). Full derivation logged in README.md. */

@font-face {
  font-family: 'Domine Fallback';
  src: local('Georgia'), local('Iowan Old Style'), local('Times New Roman');
  font-weight: 600;
  size-adjust: 95.34%;
  ascent-override: 94.4%;
  descent-override: 25.17%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Figtree Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  font-weight: 400;
  size-adjust: 101.18%;
  ascent-override: 93.89%;
  descent-override: 24.71%;
  line-gap-override: 0%;
}