/* ==========================================================================
   tokens.css — Barr Landscaping & Lawn Service, Peoria IL. Compiled from
   the approved brief (brief.md v1, tile-b / bold-industrial / poster-hero).
   Every value below traces to a brief section cited inline. No improvised
   values (house-tech-spec §3, §12).
   ========================================================================== */

:root {

  /* --- Colour (brief §4.2) -------------------------------------------------
     Derivation order per design-rules §6: no real-world colour sighting
     (dossier §4.5 — brand_color omitted), so every value below is argued
     from local character + family norms, not a departure from a sighting. */

  --scheme: light;                    /* one deliberate mode, brief §4.1 */

  --color-bg: #F5F1E6;                /* worklight cream — page ground */
  --color-surface: #EAE3D2;           /* form fields, trust-strip/services-index panel interior */
  --color-ink: #1C1A16;               /* loam-black — body/heading text, button fills */
  --color-ink-muted: #55524A;         /* secondary text */
  --color-accent: #7A8C23;            /* controlled chartreuse — utility colour + §6.1 anchor carrier */
  --color-accent-ink: #1C1A16;        /* text ON the accent fill */

  --color-border: #D8CFB8;            /* decorative hairlines ONLY — no contrast floor */
  --color-border-strong: #55524A;     /* control boundaries, WCAG 1.4.11, >=3:1 vs bg AND surface */

  --color-focus: #1C1A16;             /* :focus-visible ring — AA vs bg AND surface (both >13:1) */

  /* Dark-band-safe focus ring (brief §4.4's scrimmed hero textzone). A light
     tint of bg-cream, reusing the EXACT pairing already measured at 7.10:1
     against the scrim's worst-case composite ground in brief §4.4 — no new
     computation owed, this is the same ratio the eyebrow/H1/CTA/lead text
     already clears. Scoped to `.hero-textzone :focus-visible` only (site.css);
     every other control on the page sits on the light page ground and uses
     --color-focus directly. */
  --color-focus-on-band: var(--color-bg);

  --color-selection-bg: #7A8C23;
  --color-selection-ink: #1C1A16;

  /* R3 — the CTA's hover/focus state inverts fill and text rather than
     darkening the fill; the measured ratio (4.63:1) is identical in both
     states because the WCAG formula is symmetric under fg/bg exchange. */
  --color-accent-hover: #7A8C23;

  /* Hero atmosphere stops — NAMED so contrast is computed against the
     ground's actual extremes (brief §4.4), never against a flat token. */
  --color-atmos-hi: #C9B36B;          /* lightest stop — the radial's warm-amber peak */
  --color-atmos-lo: #1C1A16;          /* darkest stop == --color-ink, the radial's core */


  /* --- Typography (brief §2) -----------------------------------------------
     Two families, three woff2 files. Self-hosted, no CDN, no remote request
     (brief §2.2 R1). Metrics-matched fallbacks declared below, before the
     @font-face blocks (house-tech-spec §8). */

  --font-display: 'Big Shoulders Display', 'Big Shoulders Display Fallback', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', 'Barlow Fallback', Arial, 'Helvetica Neue', sans-serif;

  --font-weight-display: 800;
  --font-weight-body: 400;
  --font-weight-body-strong: 700;

  /* House alias: the skeleton's shared header component reads --text-h3 for
     .site-header__brand, and this brief's own scale (§2.7) does not declare
     an h3 role — the section plan (§5.3) uses no <h3> anywhere. Builder
     execution fill, flagged rather than chosen silently, matching the house
     precedent set on dakota-lawn-landscape-grand-forks-nd (identical gap,
     same vertical): alias to an already-computed, already-justified token
     rather than inventing a new clamp. */
  --text-h3: var(--text-lead);

  /* --- Type scale — computed across its full range, not sampled at the ends
     (brief §2.7). Declared breakpoint: exactly one, 48rem/768px. */

  --text-hero:    clamp(2.75rem, 1.9rem + 4.2vw, 5.25rem);
  --text-h2:      clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-lead:    clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --text-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-eyebrow: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-small:   clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);

  --leading-tight: 0.94;   /* h1 only, uppercase poster set */
  --leading-h2:    1.15;   /* h2 */
  --leading-body:  1.5;    /* prose, lead, review quotes, form */
  --leading-caps:  1.4;    /* every caps label */

  /* House alias: skeleton .btn/.expiry__text read --leading-snug, a role
     this brief's own leading list (§2.7) does not name. Builder execution
     fill — kept at the house skeleton default (compact button/chip text),
     matching the same not-in-brief handling as --text-h3 above. */
  --leading-snug: 1.25;

  --tracking-caps:  0.14em;   /* eyebrow, section eyebrows */
  --tracking-tight: 0.005em; /* H1 only */


  /* --- Space (brief §3) ----------------------------------------------------- */

  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 144px;

  /* Inter-section rhythm (brief §3, §5.2): 64px below 768, 96px at >=768.
     Two call sites only: .section's padding-block and the hero's
     padding-block-end. Responsive step at the media query below. */
  --section-gap: var(--space-xl);


  /* --- Layout (brief §3, §5.2) ----------------------------------------------
     --layout-gutter-below-768 / --layout-gutter-at-768-plus are the brief's
     own literal token names; --layout-gutter is the house name site.css's
     .container actually consumes (aliased below, stepped at the media query,
     matching the house pattern already shipped on
     anderson-landscape-green-bay-wi for the identical two-tier shape). */

  --layout-container: 72rem;          /* 1152px, house default */
  --layout-measure: 62ch;
  --layout-gutter-below-768: 16px;
  --layout-gutter-at-768-plus: 40px;
  --layout-gutter: var(--layout-gutter-below-768);
  --layout-tap-min: 44px;

  /* Fixed header height, every breakpoint (brief §5.3 step 1, §7's sticky-
     chrome term). Builder-added: the brief states the constant directly but
     the skeleton has no existing token for it. */
  --layout-header-height: 56px;

  /* Hero turf-blade band (brief §4.5/§7.3): fixed pitch, fixed heights per
     breakpoint. Builder-added tokens — the brief states both constants. */
  --turf-blade-pitch: 28px;
  --turf-band-height: 96px;           /* below 768 */


  /* --- Radius / shadow / border (brief §3) ---------------------------------
     Whole-site answer: zero rounding, zero elevation — a legitimate answer
     design-rules §4 explicitly allows in place of selective variation. */

  --radius-none: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;

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

  --border-hairline: 2px;             /* brief §3 — heavier than the house 1px default */
  --border-thick: 3px;                /* house default, unaffected by the brief's radius/shadow rule */
  --border-style: solid;


  /* --- Motion (brief §8) ---------------------------------------------------
     House defaults unchanged except reveal geometry/stagger, which the
     brief states explicitly. */

  --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: 1rem;      /* brief §8: translateY(1rem) -> 0 */
  --reveal-stagger: 80ms;    /* brief §8: staggered 80ms per item */

  /* The two hero satellites' independent, non-synchronised loops (brief
     §7.4). Distinct from the reveal/fast/base/slow scale on purpose — they
     are ambient, not interaction-driven. */
  --duration-satellite-stake: 7.8s;
  --duration-satellite-paver: 6.6s;


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

/* Section rhythm + gutter step at >=768 (brief §5.2's table: --section-gap
   64->96px, gutter 16->40px, at the one declared breakpoint). Both sides
   resolve to existing scale steps. */
@media (min-width: 48em) {
  :root {
    --section-gap: var(--space-2xl);
    --layout-gutter: var(--layout-gutter-at-768-plus);
    --turf-band-height: 140px;
  }
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset, static instances only
   (brief §2.1: Big Shoulders Display 800 static; Barlow 400/700 static).
   SIL OFL 1.1 for both; assets/fonts/OFL.txt carries both notices. Subset to
   the house declared safe range, identical unicode-range on all three files
   (house-tech-spec §8; brief §2.4). No remote font request of any kind.

   METRICS-MATCHED FALLBACKS FIRST, so font-display: swap costs no CLS
   (house-tech-spec §7/§8). Donor faces per brief §2.5: Arial Narrow for Big
   Shoulders Display, Arial for Barlow. Measured with
   scripts/font-metrics.mjs against the real subset woff2 files and the
   closest available metric-compatible donor substitutes on this machine
   (Liberation Sans Narrow Bold / Liberation Sans Regular+Bold — metrically
   compatible with Arial Narrow/Arial, the standard open substitute), per
   the method house-tech-spec §8 requires (never invented). */

@font-face {
  font-family: 'Big Shoulders Display Fallback';
  src: local('Arial Narrow'), local('Arial');
  font-weight: 800;
  font-style: normal;
  size-adjust: 95.98%;
  ascent-override: 102.52%;
  descent-override: 22.19%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial');
  font-weight: 400;
  font-style: normal;
  size-adjust: 96.96%;
  ascent-override: 103.14%;
  descent-override: 20.63%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial Bold'), local('Arial');
  font-weight: 700;
  font-style: normal;
  size-adjust: 92.39%;
  ascent-override: 108.23%;
  descent-override: 21.65%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Big Shoulders Display';
  src: url('../assets/fonts/big-shoulders-display-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: 'Barlow';
  src: url('../assets/fonts/barlow-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: 'Barlow';
  src: url('../assets/fonts/barlow-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;
}