/* ==========================================================================
   tokens.css — Western Landscaping & Decorative Curbing (Pocatello, ID)
   Compiled from the approved brief (runs/western-landscaping-and-decorative-
   curbing-pocatello-id/brief.md), §2 (type), §3 (palette), §4.2 (layout),
   §4.3 (hero field), §7 (motion). Every value below traces to a brief line;
   nothing here is improvised.
   ========================================================================== */

:root {

  /* --- Colour (brief §3.2) -------------------------------------------------
     Derivation: design-rules §6 order — real-world colour (none, dossier
     §4.5/§4.8 gap 9) → local character (none, dossier §4.5) → family norms
     (fresh-organic: nature-toned; playbook §6.1 anchor "green and growth").
     One deliberate mode: LIGHT. Contrast ratios computed at brief §3.3. */

  --scheme: light;

  --color-bg:              #F7F1E6;  /* warm oat-cream ground */
  --color-surface:         #E9EDD9;  /* pale moss-tint — rail bg, chip bg, band bg */
  --color-ink:             #24301F;  /* dark warm forest-charcoal */
  --color-ink-muted:       #556249;  /* secondary text, eyebrow flat portion */
  --color-accent:          #2E6B31;  /* turf-green — dominant, direct anchor carrier */
  --color-accent-ink:      #FFFFFF;  /* type on the accent-strong fill */
  --color-accent-strong:   #1F4A22;  /* primary CTA fill (default state) */
  --color-accent-hover:    #163717;  /* primary CTA fill (:hover/:active) */
  --color-accent-2:        #C98A2E;  /* sunbaked-gold — decorative icon-fill ONLY, fails AA as text (brief R6) */
  --color-accent-2-strong: #A66E1F;  /* chip border — non-text UI use of the gold family, clears 3:1 */
  --color-border:          #DAD0AF;  /* decorative hairlines ONLY — never the sole differentiator of a control boundary */
  --color-focus:           #2E6B31;
  --color-selection-bg:    #2E6B31;
  --color-selection-ink:   #F7F1E6;

  /* Hero atmosphere stops — named so contrast is computed against the
     ground's actual extremes and never against a flat token (brief §3.4). */
  --color-atmos-hi: #F7F1E6;  /* == --color-bg, the lightest stop */
  --color-atmos-lo: #EDE3CE;  /* darkest of the two named stops */

  /* No dark band exists on this site (one deliberate light mode, brief §3.1),
     so --color-focus-on-band is intentionally left undeclared (base.css note). */

  /* --- Typography (brief §2) ----------------------------------------------
     Urbanist (display, 800/700) + Nunito Sans (body, 400/600). Self-hosted
     woff2, latin subset to the house declared range (brief §2.4). No
     emphasis face (brief §2.1: emphasis_font null). */

  --font-display: 'Urbanist', 'Urbanist Fallback', Verdana, 'Segoe UI', sans-serif;
  --font-body:    'Nunito Sans', 'Nunito Sans Fallback', 'Trebuchet MS', 'Segoe UI', sans-serif;

  --font-weight-display-strong: 800;   /* H1, wordmark */
  --font-weight-display:        700;   /* h2, h3, rail active-state item */
  --font-weight-body:           400;   /* body prose, form values */
  --font-weight-body-strong:    600;   /* every caps label */

  /* --- Type scale (brief §2.7 — computed across the range, not sampled) --- */

  --text-h1:      clamp(2.5rem, 2rem + 2.6vw, 3.75rem);
  --text-h2:      clamp(1.5rem, 1.3rem + 1.0vw, 2.0rem);
  --text-body:    clamp(1rem, 0.95rem + 0.22vw, 1.0625rem);
  --text-eyebrow: clamp(0.75rem, 0.68rem + 0.35vw, 0.875rem);
  --text-small:   clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);

  --leading-tight: 1.1;    /* h1 only, 2-line budget */
  --leading-h2:    1.14;   /* h2, h3 */
  --leading-body:  1.5;    /* prose, chip labels, form */
  --leading-caps:  1.4;    /* every caps label */
  --leading-snug:  1.14;   /* alias used by house button/nav primitives */

  --tracking-caps:  0.1em;    /* eyebrow, chip section heads, footer meta */
  --tracking-tight: 0.01em;   /* footer meta secondary line / heading tracking */
  --tracking-normal: 0em;

  /* --- Space --------------------------------------------------------------
     House scale, unchanged in step values (design-rules §7.1: the scale is
     house, the brief picks which step). */

  --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.2: gutter 16px below 1024, 40px at >=1024 (site.css switches the
     value at the house 64em breakpoint — the one literal escape hatch). */
  --layout-gutter: var(--space-sm);

  /* Brief §4.1 rule 4 / §4.2: one inter-section token, two call sites
     (.section padding-block, hero padding-block-end). 64px below 1024,
     96px at >=1024 (site.css switches at 64em). */
  --section-gap: var(--space-xl);

  /* Brief §4.2: hero's own top padding — 16px below 1024, 96px at >=1024.
     Distinct from --section-gap (which governs the BOTTOM of the hero and
     every other section's own padding-block). */
  --hero-pad-start: var(--space-sm);

  /* --- Layout ---------------------------------------------------------------
     Brief §4.2: container caps at 1152px (min(vw,1152)); rail fixed 320px;
     content column is the grid remainder. */

  --layout-container: 72rem;          /* 1152px */
  --layout-measure:   62ch;
  --layout-tap-min:   44px;

  /* Brief §4.1 rule 2: rail fixed 320px wide, only at >=1024. */
  --rail-width: 20rem;

  /* Brief §4.4 step 1: header fixed 56px + 1px border-bottom, every
     breakpoint. Reused for the mobile fixed bottom CTA bar, whose height the
     brief's own §5 arithmetic also states as 56px. */
  --header-height: 3.5rem;

  /* Brief §5: sticky-chrome stack = header + its border (57px once sold;
     preview.css adds the expiry bar's height on top of this, taking it to
     101px, matching the brief's verified figure). Buyer-inherited default. */
  --chrome-height: calc(var(--header-height) + var(--border-hairline));

  /* Rail-only (>=1024): vertical space the service-index block occupies
     before the primary-CTA block begins directly beneath it (eyebrow + h2 +
     4-item list, each item carrying a name and a description line, + a
     picture). Positions the CTA block via margin-block-start rather than
     DOM nesting, because rule 1's mobile order (§4.4/§5) requires the CTA
     to sit between the H1 and the hero field — before the service-index
     section — so the two rail pieces cannot share one wrapper element.
     MEASURED, not estimated: the brief's own §5 rail arithmetic (eyebrow
     ~20 + gap 12 + list 160 + gap 24 = 216px) covers only a bare list and
     undershoots this dossier's actual copy (4 items, each with a name AND
     a description, plus the section's own accent image) by roughly 4.6x —
     confirmed by rendering the real DOM with Playwright at 1024/1152/1440
     (#services measured 1137.6 / 1145.2 / 1145.2px). Set to the largest of
     the three plus a --space-md gap, rounded up for headroom. Content-
     derived and therefore fragile to a copy change in the service index —
     re-measure if that copy ever changes. */
  --rail-services-block: 74rem;

  /* --- Radius / shadow / border --------------------------------------------
     Brief §3.2 R5: 0.375rem (== house --radius-md) on chips only, 0
     everywhere else. No drop shadow anywhere on this site. */

  --radius-none: 0;
  --radius-sm:   0;
  --radius-md:   0.375rem;   /* chips only */
  --radius-lg:   0;
  --radius-pill: 0;

  --shadow-none: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

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

  /* --- Motion (brief §7) ----------------------------------------------------
     prefers-reduced-motion collapses these to ~0 at the source (base.css),
     with no exceptions. */

  --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 geometry — brief §7: fade + rise translateY(1rem) -> 0, staggered
     80ms per item within a group. */
  --reveal-shift: 1rem;
  --reveal-stagger: 80ms;

  /* Signature move — brief §4.3/§7: the curb line pours once on load (0.9s,
     fill-mode forwards, no loop); three plants sway independently and
     continuously afterward at three non-phase-locked periods. */
  --duration-pour: 0.9s;
  --duration-sway-1: 7.2s;
  --duration-sway-2: 8.6s;
  --duration-sway-3: 6.4s;

  /* --- Z layers ----------------------------------------------------------- */
  --z-base: 0;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset to the house declared range
   (brief §2.4), identical unicode-range on every face. Static instances only
   (brief R3: no font-variation-settings anywhere; font-weight alone sets
   weight).

   FALLBACK METRICS — sourced, not guessed. The house method
   (scripts/font-metrics.mjs) computes size-adjust/ascent-override/
   descent-override/line-gap-override from two real font files. Verdana and
   Trebuchet MS are proprietary Microsoft faces with no binary available in
   this build environment (not installed, not legally redistributable), so
   the WEBFONT side of each pair was measured directly from the real,
   subsetted Urbanist/Nunito Sans woff2 files (weighted-average glyph advance
   per scripts/font-metrics.mjs's method), and the FALLBACK side used the
   published xWidthAvg/ascent/descent/unitsPerEm for Verdana and Trebuchet MS
   from @capsizecss/metrics v4.2.0 (npm, 2026-09-10) — a metrics dataset built
   for exactly this purpose (system-font fallback matching without shipping
   the font itself), the same category of source every comparable tool
   (fontaine, next/font) relies on for non-redistributable system donors.
   Combined via the house formula in scripts/font-metrics.mjs's overrides().
   Acceptance test per house-tech-spec §8: Lighthouse CLS 0.000, verified at
   self-check. -------------------------------------------------------------- */

@font-face {
  font-family: 'Urbanist Fallback';
  src: local('Verdana');
  font-weight: 800;
  font-style: normal;
  size-adjust: 89.4%;
  ascent-override: 106.27%;
  descent-override: 27.96%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Urbanist Fallback';
  src: local('Verdana Bold'), local('Verdana');
  font-weight: 700;
  font-style: normal;
  size-adjust: 79.3%;
  ascent-override: 119.81%;
  descent-override: 31.53%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Nunito Sans Fallback';
  src: local('Trebuchet MS');
  font-weight: 400;
  font-style: normal;
  size-adjust: 97.5%;
  ascent-override: 103.69%;
  descent-override: 36.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Nunito Sans Fallback';
  src: local('Trebuchet MS Bold'), local('Trebuchet MS');
  font-weight: 600;
  font-style: normal;
  size-adjust: 95.03%;
  ascent-override: 106.39%;
  descent-override: 37.15%;
  line-gap-override: 0%;
}

/* House declared safe range (house-tech-spec §8, brief §2.4) — identical on
   every face shipped by this site. */
@font-face {
  font-family: 'Urbanist';
  src: url('../assets/fonts/urbanist-800-latin.woff2') format('woff2');
  font-weight: 800;
  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: 'Urbanist';
  src: url('../assets/fonts/urbanist-700-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: 'Nunito Sans';
  src: url('../assets/fonts/nunito-sans-400-latin.woff2') format('woff2');
  font-weight: 400;
  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: 'Nunito Sans';
  src: url('../assets/fonts/nunito-sans-600-latin.woff2') format('woff2');
  font-weight: 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;
}