/* ==========================================================================
   tokens.css — the design brief, compiled. Patriot Plumbing, Prescott AZ —
   brief.md (C3 approved 2026-09-21). Family: bold-industrial. Archetype:
   spec-plate ("comes prepared"). Dominant hue: signal-crimson #D41B3A, two
   depths (brief §2.1) — bright never carries text, deepened carries every
   text role. Display: Chivo. Body: Barlow. ONLY PLACE RAW VALUES LIVE
   (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour (brief §2.1). Derivation, design-rules §6: real-world colour
     (dossier §4.5/§4.6 — recorded navy #02255b sits ~3.3° from Miracle
     Man's own navy, ~0.6° from Gold Star's own blue; departs on DISTANCE,
     tiles/README.md §1/§4 — no navy anywhere) → the logo's other real hex
     #b00b2d, re-pitched on CONTRAST into two depths → local character (cool
     concrete/granite, imagery-carried not palette-carried) → family norms
     (bold-industrial: heavy display type, high contrast). One mode: light —
     no dark band on this site (brief §2.1). */

  --scheme: light;

  --color-bg: #F1EEE8;                /* page ground — concrete-ivory */
  --color-surface: #E3DFD6;           /* raised panels — ledger rows, trust cards, form fields, the plate's own fill */
  --color-ink: #1E1D1B;               /* primary text */
  --color-ink-muted: #565349;         /* secondary text — lead, facts, footer, row descriptions */

  /* TWO-DEPTH RED SYSTEM (brief §0/§2.1, the C2 decision's own catch).
     Bright signal-crimson is the named dominant hue but never carries body
     text, UI-label text, or any text under the large-text threshold (24px /
     19px bold) on any ground — AA large on bg (4.51:1, row 5), fails body
     AA on surface (3.93:1, row 6). --color-accent-button is the
     text-bearing depth. Grep for --color-accent under the large-text
     threshold, and as a background behind text of any size. */
  --color-accent: #D41B3A;            /* bright — large numerals, rule-work, icon fills, decorative accents ONLY */
  --color-accent-button: #7E0E23;     /* deepened — every text-bearing role: eyebrow, CTA fills, button labels */
  --color-accent-ink: #F1EEE8;        /* text ON --color-accent-button */

  --color-border: #CFC9BC;            /* DECORATIVE hairlines only — no contrast floor */

  /* Control boundary, WCAG 1.4.11 (>=3:1 vs bg AND surface): ink-muted
     clears both (6.64:1 / 5.79:1, brief rows 2/4) — reused, not invented. */
  --color-border-strong: #565349;

  /* :focus-visible ring — deepened accent, AAA on bg (9.19:1) and surface (8.00:1), brief rows 7/9. */
  --color-focus: #7E0E23;

  /* No dark band on this site — --color-focus-on-band not declared (unused token is noise). */

  --color-selection-bg: #7E0E23;
  --color-selection-ink: #F1EEE8;

  /* Hero atmosphere gradient extremes — byte-identical from the approved
     tile (tiles/tile-b.html .hero background); row 10 measured the eyebrow
     against the darker extreme (8.16:1 AAA), not the flat bg token
     (design-rules §6: "a gradient is not a pairing"). */
  --color-hero-atmosphere-1: #F8F6F1;
  --color-hero-atmosphere-2: #E6E1D6;

  /* --- Typography (brief §2.2). Two families, 4 woff2 files (§5 ceiling).
     Static instances, not variable (Chivo's range unused — house-tech-spec
     §8's font-variation-settings trap does not arise). Self-hosted Google
     Fonts latin files, subset to the house declared safe range. */

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

  --font-weight-display: 700;   /* h2/h3, nav wordmark, CTA labels */
  --font-weight-display-black: 900; /* h1, spec-plate numerals (01/02/03), hero eyebrow — a second loaded weight */
  --font-weight-body: 400;      /* body, lead, facts, row descriptions, FAQ answers */
  --font-weight-body-strong: 700; /* strong emphasis, footer NAP label, review attributions */

  /* Fluid scale — brief §2.2 table, clamp()s copied byte-identical. Floor
     375px, ceiling 1440px (most cross over well before). */

  --text-hero:    clamp(2.1rem, 1.5rem + 3vw, 3.75rem);      /* H1: 35.2px @375 -> 60.0px ceiling @1200 */
  --text-h2:      clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);    /* section titles: 24.4px -> 36.0px ceiling @1200 */
  --text-h3:      clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem); /* card/row sub-heads: 18.7px -> 22.0px ceiling @1040 */
  --text-lead:    clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);  /* hero lead, intros: 17.0px -> 19.2px ceiling @1006 */
  --text-body:    clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);   /* body: 16.1px -> 17.0px ceiling @820 */
  --text-small:   clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); /* row labels, badges: 14.0px -> 15.0px ceiling @1040 */
  --text-eyebrow: clamp(0.75rem, 0.71rem + 0.2vw, 0.85rem);  /* eyebrow, tracked labels: 12.1px -> 13.6px ceiling @1120 */
  --text-numeral: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);  /* spec-plate index numerals: 29.0px -> 44.0px ceiling @1234 */

  --leading-tight: 1.02;    /* display — Chivo's condensed proportions */
  --leading-snug: 1.2;      /* eyebrow, small labels */
  --leading-body: 1.55;     /* body */

  --tracking-tight: 0em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;  /* eyebrow/uppercase — Chivo's tracked-caps register */

  /* --- Space (brief §2.3 — house scale, identical to house default). ----- */

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

  /* Inter-section rhythm (design-rules §7.1) — .section's padding-block and
     the hero's padding-block-end only. Tighter than the house 96px option,
     argued from family norms: bold-industrial's "no-nonsense" register and
     a page built as one running ledger earn a snappier rhythm. */
  --section-gap: var(--space-xl);   /* 64px */

  /* --- Layout: brief §4, single centered column below the hero.
     --layout-measure is the narrower prose figure (720px — process, FAQ,
     reviews, service area, quote-form); --layout-ledger is the brief's
     named ruled/bordered figure (960px — service roster, equipment index,
     trust-strip). --layout-container stays house default for the nav row
     and the two-column hero. */

  --layout-container: 72rem;          /* 1152px */
  --layout-measure: 45rem;            /* 720px */
  --layout-ledger: 60rem;             /* 960px */
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;             /* WCAG touch floor; expiry bar height */

  /* Sticky-chrome term (house-tech-spec §7.2 rule 3): the MEASURED stack
     height, never the sum of tokens — 44 (expiry) + 56 (header) + 1
     (border-bottom) = 101px, the auto-evolution-north-logan-ut figure. */
  --size-header-height: 3.5rem;       /* 56px, tile-matched */
  --size-sticky-chrome: 6.3125rem;    /* 101px = 44 + 56 + 1 */

  /* --- Radius/shadow/border: brief §2.3, two treatments. --radius-sm —
     buttons, inputs, the plate frame (tile's rect rx="4"). --radius-none —
     index rows, hairlines, trust-strip, FAQ: square objects. No
     --radius-lg/pill. --shadow-none only — hairlines and the plate's own
     stroke, never a drop shadow (unused shadow steps not declared). */

  --radius-sm: 4px;
  --radius-none: 0;

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

  /* --- Motion (brief §2.3/§6). base.css collapses fast/base/slow under
     reduced motion (spec §8). The hero's signature motion is NOT built
     from these three — its own named tokens below, separately gated in
     site.css. --duration-slow is base.css's reveal-transition name; value
     is the brief's --duration-reveal (500ms). */

  --duration-fast: 140ms;     /* hover / focus */
  --duration-base: 320ms;     /* house default, unused here, collapsed identically under reduced motion */
  --duration-slow: 500ms;     /* section-entry reveal — brief's --duration-reveal */

  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* scroll reveals */
  --ease-overshoot: cubic-bezier(.2, .8, .2, 1);  /* the plate settle — tile's own curve */
  --ease-ambient: ease-in-out;                     /* ambient motion — never linear */

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

  /* Hero signature timings — byte-identical to the tile-specified values. */
  --duration-settle: 1.2s;    /* the plate's one-shot rivet-seat, on load */
  --duration-glint: 8.8s;     /* the four-rivet glint loop, staggered offsets */

  /* --- Component sizing — brief-specific one-offs off the space scale. --- */
  --size-headmark-dot: 8px;       /* corner-rivet head-mark dot — never scales down, brief §4 */
  --size-headmark-rule: 28px;     /* head-mark hairline — yields first if a label runs long */
  --size-spec-num-width: 3ch;     /* roster/equipment numeral column (01/02/03) */
  --size-spec-label-offset: 0.15em; /* equipment-row label baseline nudge vs. its numeral */
  --size-motif-max: 26rem;        /* service-area motif — low visual weight, brief §5 */
  --size-marker-width: 1em;       /* FAQ +/- marker column */
  --size-equipment-media-max: 12rem; /* equipment-index texture image cap */
  --size-plate-lift: -14px;       /* the plate settle's translateY start, brief §6 */

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

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, SIL OFL 1.1 (Chivo/Barlow named directly
   in design-rules §5's bold-industrial pool — not watch-listed). Static
   instances, subset to the house declared safe range, byte-identical
   unicode-range on every face — the copy's plain Latin + middot introduces
   no codepoint outside it.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Chivo';
  src: url('../assets/fonts/chivo-latin-wght700.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: 'Chivo';
  src: url('../assets/fonts/chivo-latin-wght900.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-latin-wght400.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-latin-wght700.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 — MEASURED via scripts/font-metrics.mjs (the
   fontaine algorithm) against the shipped, subset woff2 files. Arial Narrow
   is absent from this build host, so Liberation Sans Bold (the metric-
   compatible open clone of Arial/Arial Bold; no open narrow-width face is
   present) stands in for measurement — the shipped local() stack still
   names 'Arial Narrow' first, matching what a reader's OS actually offers.
   Same donor-substitution precedent as greenwize-lawn-care-myrtle-beach-sc.
   Barlow's donors (Liberation Sans / Bold) are measured directly. */

@font-face {
  font-family: 'Chivo Fallback';
  src: local('Arial Narrow Bold'), local('Arial Narrow'), local('Arial Bold'), local('Arial');
  font-weight: 700;
  font-style: normal;
  size-adjust: 101.02%;
  ascent-override: 93.05%;
  descent-override: 24.75%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Chivo Fallback';
  src: local('Arial Narrow Bold'), local('Arial Narrow'), local('Arial Bold'), local('Arial');
  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('Helvetica Neue');
  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('Helvetica Neue Bold'), local('Arial'), local('Helvetica Neue');
  font-weight: 700;
  font-style: normal;
  size-adjust: 92.39%;
  ascent-override: 108.23%;
  descent-override: 21.65%;
  line-gap-override: 0%;
}