/* ==================================================
   tokens.css — the design brief, compiled.
   pk-son-lawn-care-green-bay-wi · brief.md (approved C3, 2026-08-24)

   THIS FILE IS THE ONLY PLACE RAW VALUES LIVE. Every value is quoted from the
   approved brief, or is a house-required token name pointed at a brief value.
   Where the brief is silent the skeleton's default stands. Full derivations,
   the font substitution and the coverage gap are in README.md.

   Brief map: palette/motion/radius/shadow/border §2 · type §3 ·
   layout/rail/section-gap §4 · first screen §5 · motion §7.
   ================================================== */

:root {

  /* --- Colour ------------------------------------
     Brief §2's token block, verbatim. Every pairing used on the site is in
     brief §2's computed contrast table. */

  --scheme: light;

  --color-bg: #F7EFE0;                /* parchment */
  --color-surface: #EFE1C8;
  --color-ink: #1B2436;
  --color-ink-muted: #5C5245;
  --color-accent: #A32F27;            /* barn-red — dominant hue */
  --color-accent-ink: #FBF3E4;

  --color-border: #E4D3AF;
  --color-focus: #A32F27;             /* = accent; 6.14:1 vs bg, 5.44:1 vs surface */

  /* Dark-band-safe ring for the site's one dark ground, the rail. Resolves to
     a brief token rather than a new tint: brief §2 already measures accent-ink
     on accent-2 at 11.56:1 and on accent at 6.36:1. Scoped in site.css. */
  --color-focus-on-band: var(--color-accent-ink);

  --color-selection-bg: #A32F27;
  --color-selection-ink: #FBF3E4;

  /* Brief §2's sign-painter secondary. CHROME ROLE ONLY: rail ground,
     section mark, badge-card border, process numerals. Never a ground, never
     body text. */
  --color-accent-2: #1F3350;

  /* The hero's two radial washes (brief §2 §8): barn-red ≤14%, navy ≤10%,
     over the flat page ground. Neither sits behind hero text at any width. */
  --wash-accent: rgba(163, 47, 39, 0.14);
  --wash-accent-2: rgba(31, 51, 80, 0.10);


  /* --- Typography --------------------------------
     Brief §3. Yeseva One 400 display, Barlow body, both OFL 1.1, both upright
     only — no italic instance of either face ships.

     BRIEF §3 ASKS FOR A VARIABLE BARLOW AND NONE EXISTS (Google Fonts reports
     `axes: []`; `Barlow:wght@400..700` answers HTTP 400). Two static
     instances ship instead, 400 and 700 — the only two weights brief §3's own
     text names. Flagged to the Critic; full note in README.md. */

  --font-display: 'Yeseva One', 'Yeseva One Fallback', Georgia, serif;
  --font-body: 'Barlow', 'Barlow Fallback', Arial, 'Helvetica Neue', sans-serif;

  --font-weight-body: 400;
  /* 700 is the only non-400 weight brief §3 names for Barlow, and it is the
     only other instance that ships. */
  --font-weight-body-strong: 700;
  /* Yeseva One is a single-weight face (400). Declaring 400 here is what
     stops base.css's h1–h4 rule asking for a bold the face does not have and
     getting a synthesized one. */
  --font-weight-display: 400;

  /* --- Type scale --------------------------------
     Brief §3's fluid table, verbatim. Computed there across the range, not
     only at the ends: hero 41.6px @375 → 76.8px @1440. */

  --text-hero: clamp(2.6rem, 9.5vw, 4.8rem);
  --text-h2: clamp(1.8rem, 4.6vw, 2.6rem);
  --text-h3: clamp(1.2rem, 2.6vw, 1.5rem);
  --text-lead: clamp(1.125rem, 2.1vw, 1.375rem);
  --text-body: clamp(1rem, 1.3vw, 1.0625rem);
  --text-small: 0.9375rem;
  --text-eyebrow: 0.8125rem;

  --leading-tight: 1.08;
  --leading-snug: 1.28;
  --leading-body: 1.6;

  /* Brief §3 states --tracking-wide only. The other two are house-required
     names the brief is silent on; the skeleton's defaults stand. */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.11em;

  /* --- Space -------------------------------------
     The house scale, unchanged: brief §5's arithmetic is computed against
     exactly these steps (xs 12 · sm 16 · md 24 · lg 40 · xl 64 · 2xl 96). */

  --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: 4rem = 64px, fixed at every breakpoint. Two call sites only —
     .section's padding-block and the hero's padding-block-end. */
  --section-gap: var(--space-xl);

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

  --layout-container: 72rem;          /* brief §5 — the hero's own max-width cap */
  --layout-measure: 62ch;             /* house default; brief silent */
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;             /* WCAG touch-target floor — spec §8 */

  /* Brief §5's H1 container: rem-based, never ch-based, so it does not
     depend on Yeseva One's glyph advance. */
  --layout-headline: 34rem;

  /* Brief §4: 56px + 1px border at EVERY breakpoint. Brief §5's 101px
     sticky-stack term depends on it not moving. */
  --header-height: 56px;

  /* Top of the site's own sticky stack: 0 on the sold site. preview.css
     re-points it at the 44px bar and that override dies at purchase. */
  --chrome-top: 0px;

  /* Execution values the brief does not state — visible and re-themeable
     here rather than buried in site.css. */
  --layout-badge: 15rem;              /* badge-board grid track minimum */
  --layout-brand: 5rem;               /* the wordmark's cap below 48em */
  --layout-accent: 13rem;             /* the owner accent image (slot 4) */
  --layout-accent-sm: 7rem;           /* the process accent image (slot 3) */
  --opacity-texture: 0.14;            /* slot 2's plate behind the badge cards */
  --opacity-ground: 0.18;             /* slot 5's band behind "About the owner" */

  /* The sidebar-anchor rail (brief §4). ONE number for 320px → 1600px+, no
     breakpoint transition — C2 open item 2's resolution, stated bare. */
  --rail-width: 56px;

  /* --- Radius / shadow / border -----------------
     Brief §2 declares exactly two radii and exactly one shadow. The house
     names point at those values, so nothing can acquire one the brief did
     not ask for. */

  --radius-md: 4px;                   /* brief §2 */
  --radius-pill: 6px;                 /* brief §2 — the rail CTA chip */
  --radius-none: 0;
  --radius-sm: var(--radius-md);
  --radius-lg: var(--radius-pill);

  /* Brief §2: the ONE shadow on the site, used once, on fixed chrome. The
     four `none` steps make "no card carries a shadow" structural. */
  --shadow-rail: 4px 0 12px rgba(27, 36, 54, 0.08);
  --shadow-none: none;
  --shadow-sm: var(--shadow-none);
  --shadow-md: var(--shadow-none);
  --shadow-lg: var(--shadow-none);

  --border-hairline: 1px;             /* brief §2's --border-width */
  --border-width: var(--border-hairline);
  --border-thick: 3px;                /* house default (focus ring); brief silent */
  --border-style: solid;

  /* --- Motion ------------------------------------
     Brief §2 §7. One easing curve; both house names resolve to it. */

  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: var(--ease-standard);
  --ease-in-out: var(--ease-standard);

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

  /* The signature move (brief §7): two boards, independent loops. 1 — 6.5s,
     −3°→+3°. 2 — 8s, +2°→−4°, −2.4s delay, so they never move in phase. */
  --swing-1-duration: 6500ms;
  --swing-1-from: -3deg;
  --swing-1-to: 3deg;
  --swing-2-duration: 8000ms;
  --swing-2-delay: -2400ms;
  --swing-2-from: 2deg;
  --swing-2-to: -4deg;

  /* Brief §4: the section mark is FIXED at 16×16px at every breakpoint —
     never fluid — so it has no minimum distinct from its stated size. */
  --mark-size: var(--space-sm);

  /* --- Z layers -----------------------------------
     Brief §4 fixes these by ordering: rail below the bar and the header,
     skip link above the rail. */
  --z-base: 0;
  --z-rail: 20;                       /* brief §4 */
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* --------------------------------------------------
   @font-face — self-hosted woff2, subset to house-tech-spec §8's declared safe
   range, identical unicode-range on every face.

   COVERAGE GAP, recorded per §8: U+2010, U+2011, U+2012, U+2015, U+2032 and
   U+2033 are absent from all three shipped faces EQUALLY, so no page can split
   mid-sentence between two faces, and none of the six renders in this site's
   copy. Three of the six were symmetric only after a build step — Yeseva One's
   source lacks them and Barlow's does not — so they were excluded from
   Barlow's subset too. Measured with fontTools; derivation in README.md.
   -------------------------------------------------- */

@font-face {
  font-family: 'Yeseva One';
  src: url('../assets/fonts/yeseva-one-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-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;
}

/* --- Metrics-matched fallbacks (house-tech-spec §8, brief §3) -------------
   One per shipped face, so `font-display: swap` cannot move a line. Donors are
   the brief's own bases — Georgia for Yeseva One, Arial for Barlow — each with
   its metric-compatible clone as a second local(). size-adjust measured with
   canvas.measureText() in headless Chromium against the real shipped woff2;
   the overrides are each face's own hhea metrics ÷ size-adjust. Derivation in
   README.md. Weights are declared so no bold is ever synthesized. */

@font-face {
  font-family: 'Yeseva One Fallback';
  src: local('Georgia'), local('Gelasio');
  font-weight: 400;
  size-adjust: 105.6%;
  ascent-override: 86.7%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  size-adjust: 92.3%;
  ascent-override: 108.3%;
  descent-override: 21.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 700;
  size-adjust: 91.5%;
  ascent-override: 109.3%;
  descent-override: 21.9%;
  line-gap-override: 0%;
}