/* ==========================================================================
   tokens.css — the design brief, compiled.

   Every value below is taken verbatim from the approved brief
   (runs/716-towing-and-roadside-buffalo-ny/brief.md §2). Nothing here is
   improvised; every token traces to a brief line. house-tech-spec §3: this
   is the only file that may carry a raw hex, px-size or font-name literal.
   ========================================================================== */

:root {

  /* --- Colour (brief §2.1) -------------------------------------------------
     One deliberate mode: dark, throughout. Derivation: business's own real-
     world sampled yellow (#FFF946, V-tier, two independent GMB sightings) ->
     no local-character asset on record -> bold-industrial family norms. */

  --scheme: dark;

  --color-bg:      #14171B; /* asphalt-charcoal — page ground */
  --color-surface: #1E2227; /* raised/alternate panel — services, hours, where-we-help, process, faq bands */
  --color-ink:       #F5F3EE; /* primary text — warm off-white */
  --color-ink-muted: #B8B4AC; /* secondary text — eyebrow-adjacent labels, facts row, footer, review attributions */

  /* Their own sampled yellow — large/UI/display only, per the brief's hard
     rule: NEVER body text or any text under the large-text threshold (24px /
     19px bold), on any ground, anywhere on this site. */
  --color-accent:     #FFF946;
  --color-accent-ink: #14171B; /* = --color-bg — text ON accent fills */

  --color-border:        #B8B4AC; /* decorative hairlines reuse the same measured value as the control boundary below — the brief carries one grey, not two */
  --color-border-strong: #B8B4AC; /* a control's own boundary, WCAG 1.4.11 — form-field borders, nav-toggle outline */

  --color-focus: #FFF946; /* :focus-visible ring — clears >=3:1 with very wide margin on both bg and surface (brief rows 5/6/12) */

  --color-selection-bg:  #FFF946;
  --color-selection-ink: #14171B;

  /* Hero gradient extreme (brief §2.1 row 8-10): 16% #FFF946 blended over
     #14171B, the radial atmosphere's own worst-case highlight at 375px. Hero
     text sitting inside the radial gradient's bounding area is checked
     against THIS value, never the flat --color-bg token (design-rules §6). */
  --color-hero-atmosphere: #3A3B22;

  /* --- Typography (brief §2.2) ---------------------------------------------
     Display: Chivo, weight 900 (its only loaded weight). Body: Barlow 400/
     600/400-italic. Both OFL, named directly in design-rules §5's
     bold-industrial starter pool — no watch-list justification owed. */

  --font-display: 'Chivo', 'Chivo Fallback', Arial, sans-serif;
  --font-body:    'Barlow', 'Barlow Fallback', Arial, sans-serif;

  --font-weight-body:        400;
  --font-weight-body-strong: 600;
  --font-weight-display:     900;

  /* --- Fluid type scale (brief §2.2, specified across 375/768/1024/1440) --- */

  --text-eyebrow: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);
  --text-small:   clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem); /* house alias: base.css/site.css read --text-small for labels/hints — brief carries one small size, not two */
  --text-hero:    clamp(2.75rem, 2rem + 4vw, 5rem);
  --text-h2:      clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --text-h3:      clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --text-lead:    clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
  --text-body:    clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --text-numeral: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);

  --leading-tight: 0.98;   /* Chivo H1 — carried forward from the tile's own measured value */
  --leading-snug:  1.15;   /* h2/h3 */
  --leading-body:  1.6;    /* Barlow body */

  --tracking-tight: 0em;   /* house alias: base.css's h1-h4 read --tracking-tight; this brief tracks no heading negatively */
  --tracking-wide:  0.14em;  /* eyebrow */
  --tracking-label: 0.1em;   /* hours-band k labels, other small uppercase tags */

  /* --- Space (house scale, brief §2.3) -------------------------------------- */

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

  /* One inter-section token, two call sites only: .section's padding-block
     and .hero's padding-block-end (design-rules §7.1). */
  --section-gap: var(--space-xl); /* 64px, fixed at every breakpoint */

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

  --layout-container: 72rem;
  --layout-measure:   62ch;
  --layout-gutter:    clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min:   44px;
  --layout-header-height: 56px; /* house default, measured — part of the 101px sticky-chrome term */

  /* --- Radius / shadow / border (brief §2.3) --------------------------------
     Three distinct treatments for three distinct object classes. */

  --radius-none: 0;
  --radius-sm:   3px;    /* buttons, form inputs — matches the tile's own CTA */
  --radius-pill: 999px;  /* service chips only */

  --shadow-none: none;   /* the only shadow token consumed anywhere on this site */

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

  /* --- Motion (brief §6, §2.3) -----------------------------------------------
     The signature move's three independently-timed ambient loops. */

  --duration-beacon-pulse: 4.8s;  /* the cab beacon's independent glow loop */
  --duration-glint:        6.4s;  /* the flatbed-edge light, out of phase with the beacon */
  --duration-roaddash:     9s;    /* the receding road-line — intentionally linear */
  --ease-ambient: ease-in-out;
  --ease-linear:  linear;

  --duration-reveal: 500ms;       /* scroll reveals, house standard */
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* House aliases: base.css's [data-reveal] system and .btn's hover
     transition read these three names directly. --duration-slow carries the
     brief's --duration-reveal value; --duration-fast/--duration-base are
     house defaults for micro-interactions the brief does not name, and both
     collapse identically to ~0 under prefers-reduced-motion alongside
     --duration-slow (base.css's kill switch). */
  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 500ms;

  --reveal-shift:   var(--space-2xs); /* 8px */
  --reveal-stagger: 90ms;

  /* --- Signature-move geometry (bespoke, argued, brief §4/§6) ---------------
     The recurring beacon-dot head-mark: a fixed 6px dot at every width from
     320px up — it never scales down. A 20px hairline beside it is what
     yields first if a label string ever runs long. */
  --mark-dot-size:   6px;
  --mark-line-width: 20px;

  /* The living-hero field's aspect ratio, carried forward from the tile's own
     measured hero-art viewBox (375x150 = 2.5:1, brief §4 Target 2). */
  --hero-field-aspect: 2.5;

  /* Desktop hero geometry (bespoke, argued, brief §4's ">=1024px the plate
     extends true edge-to-edge" rule). --hero-min-height-desktop gives the
     full-bleed plate room to read as a scene, not a sliver; --hero-column-
     width is the text column sitting "over the plate's left third" per the
     same brief line, sized to comfortably hold the H1 at --text-hero's
     1440px ceiling without crowding the image. */
  --hero-min-height-desktop: 34rem;
  --hero-column-width: 34rem;
  --hero-field-breakout-width: 100vw; /* the full-bleed breakout's own width, brief §4's "extends true edge-to-edge" */

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

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, static instances, latin subset.
   Chivo: SIL OFL 1.1, The Chivo Project Authors (assets/fonts/OFL-Chivo.txt).
   Barlow: SIL OFL 1.1, The Barlow Project Authors (assets/fonts/OFL-Barlow.txt).
   Subset to the house declared safe range (house-tech-spec §8), identical
   unicode-range on every face — the copy's plain Latin + middot introduces
   no codepoint outside it.

   COVERAGE GAP (house-tech-spec §8, measured via fontTools cmap against the
   shipped woff2 files, 2026-09-23): U+2010, U+2011, U+2012, U+2015 are
   absent from Chivo 900; U+2011, U+2012, U+2015 are absent from every Barlow
   instance. This site's copy uses no dash beyond the plain hyphen-minus and
   no prime mark — none of these gaps is exercised. The only non-ASCII
   character actually used is the middot (U+00B7), present in every face.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Chivo';
  src: url('../assets/fonts/chivo-900-latin.woff2') format('woff2');
  font-weight: 900;
  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-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;
}

@font-face {
  font-family: 'Barlow';
  src: url('../assets/fonts/barlow-italic-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  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), MEASURED via
   scripts/font-metrics.mjs (the fontaine algorithm) against the real shipped
   woff2 files directly, 2026-09-23. Donor: Liberation Sans — Arial's
   verified metric-compatible open clone, since no Arial binary is reachable
   on the Linux build host to measure directly (same substitution as this
   repo's dakota-lawn-landscape-grand-forks-nd / professional-lawn-care-
   waterloo-ia precedent). The shipped CSS still names the brief's first-
   choice face, Arial, first. Verified against Lighthouse: CLS 0.000.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Chivo Fallback';
  src: local('Arial Bold'), local('Liberation Sans Bold');
  font-weight: 900;
  font-style: normal;
  size-adjust: 102.13%;
  ascent-override: 92.04%;
  descent-override: 24.48%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial'), local('Liberation Sans');
  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('Liberation Sans Bold');
  font-weight: 600;
  font-style: normal;
  size-adjust: 91.42%;
  ascent-override: 109.38%;
  descent-override: 21.88%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial Italic'), local('Liberation Sans Italic');
  font-weight: 400;
  font-style: italic;
  size-adjust: 94.58%;
  ascent-override: 105.73%;
  descent-override: 21.15%;
  line-gap-override: 0%;
}