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

   Values below are taken verbatim from the approved brief
   (runs/advantage-pools-service-fresno-ca/brief.md §§3-8). Nothing here is
   improvised; every token traces to a brief line, and every value the
   brief's own palette table did not itemise (structural, non text/bg roles)
   is derived mechanically from the same family rather than a new hue —
   called out inline below.
   ========================================================================== */

:root {

  /* --- Colour (brief §4) --------------------------------------------------
     Derivation order per design-rules §6: (1) the business's own logo
     colours, V-tier — navy #384392, light-blue #A9CCEC, gray #868686;
     (2) local character — none beyond the logo's own set; (3) family
     norms — bold-industrial's dark "shop-dark" band, #1E2340, argued as a
     tier-3 darkened extension of the same navy already in tier 1. */

  --scheme: light;

  --color-bg:            #EDE8DC;  /* worklight-ivory */
  --color-surface:       #FFFFFF;
  --color-ink:           #384392;  /* V-tier logo navy */
  --color-ink-muted:     #5C5C5C;  /* darkened from logo gray #868686 for AA body use */
  --color-dark-panel:    #1E2340;  /* tier-3 family-norm addition, brief §4 */
  --color-on-dark:       #EDE8DC;
  --color-on-dark-muted: #9C9C9C;
  --color-accent:        #A9CCEC; /* V-tier logo light-blue — reserved for the one place it clears AA as text (the gauge/plate numeral on the dark panel, 9.35:1) and for decorative/graphic use elsewhere; NEVER a button fill (1.37:1 on --color-bg) */
  --color-accent-ink:    #FFFFFF;

  /* House-required structural roles the brief's text/bg contrast table does
     not itemise (they are not text pairings). Derived mechanically from the
     same palette rather than a new hue — design-rules §6 tier-3 norm. */
  --color-border:        #DAD3C2; /* DECORATIVE hairlines only — a quiet ivory-family tint between --color-bg and --color-ink-muted; no contrast floor, a divider is not a control */
  --color-border-strong: var(--color-ink); /* a control's own boundary, WCAG 1.4.11 >=3:1 — reused, not invented: brief §4's own validated navy pair (7.20:1 vs bg, 8.80:1 vs surface) */

  --color-focus:         var(--color-ink); /* :focus-visible on light grounds — 7.20:1 vs bg, 8.80:1 vs surface, brief §4 */
  /* Dark-band-safe focus ring (house-tech-spec, base.css comment) — REQUIRED:
     this brief specifies a dark full-bleed band (--color-dark-panel). Set to
     the light logo-blue, brief §4's own measured 9.35:1 vs the band's flat
     #1E2340 fill. Scoped to the band only, in site.css: `.plate :focus-visible`. */
  --color-focus-on-band: var(--color-accent);
  --color-selection-bg:  var(--color-ink);
  --color-selection-ink: var(--color-accent-ink);

  /* --- Typography (brief §3) -----------------------------------------------
     Barlow Condensed 700 (display, 1 file) + Barlow 400/700 (body + UI/CTA/
     emphasis-by-weight, 2 files) = 3 files, 2 families, both SIL OFL 1.1,
     Google Fonts, self-hosted, static instances (no variable-axis trap).
     Metrics-matched fallbacks measured against Liberation Sans — Arial's
     verified metric-compatible clone (`scripts/font-metrics.mjs`; neither
     Arial nor Arial Narrow is installable under those names on this build
     machine, so both fallback blocks are measured against it, matching this
     repo's own `professional-lawn-care-waterloo-ia` precedent). */

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

  --font-weight-body:        400;
  --font-weight-body-strong: 700; /* UI / labels / CTA / emphasis-by-weight — Barlow 700, brief §3 */
  --font-weight-display:     700; /* Barlow Condensed ships one static weight */

  /* --- Fluid type scale (brief §5, computed at every stated breakpoint) --- */

  --text-eyebrow: clamp(0.75rem, 0.7rem + 0.16vw, 0.85rem);
  --text-display: clamp(2rem, 1.4rem + 5vw, 3.75rem);        /* h1 */
  --text-h2:      clamp(1.5rem, 1.2rem + 2.2vw, 2.25rem);
  --text-body:    clamp(1rem, 0.95rem + 0.15vw, 1.0625rem);
  --text-small:   clamp(0.85rem, 0.8rem + 0.12vw, 0.95rem);

  /* House alias: base.css's `.site-header__brand` reads --text-h3; the
     brief's own scale (§5) declares no distinct value for it. Aliased to
     --text-h2 — the wordmark reads at the section-heading weight, matching
     this bold-industrial brief's generous, no-nonsense register. */
  --text-h3: var(--text-h2);

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.55;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;   /* eyebrows */

  /* --- Space — the house scale. §7.1's ONE inter-section token resolves to
     the scale's fluid 2xl step, which THIS brief makes fluid (brief §5's
     --section-gap row, 48px floor / 80px ceiling) rather than leaving it at
     the house's fixed 6rem 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: clamp(3rem, 2.4rem + 2vw, 5rem);  /* brief §5 --section-gap row */
  --space-3xl: 9rem;

  --section-gap: var(--space-2xl); /* design-rules §7.1 — call sites: .section padding-block, .hero padding-block-end, ONLY */

  /* --- Layout --------------------------------------------------------------
     Hero split at >=64rem (brief §2): text column ~45%, field ~55%. */

  --layout-container: 72rem;
  --layout-measure:   62ch;
  --layout-gutter:    clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min:   44px;

  --hero-columns-lg: 9fr 11fr; /* 45% / 55%, brief §2 */

  /* The living-hero field's height below the 64rem split (brief §6.1: 200px
     at 375, full-bleed width). A FIXED 200px would stay correct only at the
     one width it was measured at: object-fit: cover on a box that keeps
     height constant while width grows toward 1024px zooms progressively
     into the image (crops more of it per horizontal pixel), which measured
     visibly wrong at 768px in the rendered build. The clamp keeps the
     brief's own 200px as its FLOOR (its minimum in effect below ~444px,
     which covers every phone width the brief's own 375px figure answers
     for) and lets the field grow toward the split, so the mid-range never
     over-zooms. */
  --field-height: clamp(12.5rem, 45vw, 26rem);

  /* Sticky-stack scroll clearance (brief §6.1: header sticky below the
     preview's sticky expiry bar). MEASURED against the rendered DOM, per
     design-rules §7.2 rule 3 — never a sum of tokens. Header height reads
     77px @375 and 88.8px @1440; the larger figure is kept so an anchored
     section clears the stack at every width (a few px of extra clearance
     costs nothing; falling short hides the section head under the bar). */
  --header-height: 5.55rem; /* 88.8px, measured */
  --gauge-mark:      24px;    /* the settled corner-mark ornament reused at every section head, brief §5 */

  /* --- Radius / shadow / border ---------------------------------------------
     bold-industrial, no-nonsense: sharp corners throughout — --radius-none
     is the whole-site answer (design-rules §4, house-tech-spec §3). Circular
     ornaments (rivets, the gauge dial, the settled corner mark) use
     --radius-pill, which is a house-scale token, not a new literal. */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(30 35 64 / 0.08);
  --shadow-md: 0 6px 24px rgb(30 35 64 / 0.12);
  --shadow-lg: 0 24px 60px rgb(30 35 64 / 0.18);

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

  --blur-glint: 0.375rem; /* the waterline sun-glint's soft edge, brief §8 */

  /* Round-2 fix additions (Critic r1 lensA/imagery — wiring brief §7's
     unused slots 2-4 into markup). */
  --divider-height: clamp(3rem, 10vw, 6rem); /* slot 4's section-divider strip: a texture band, not a second living-hero */
  --visit-media-basis: 9rem; /* slots 2/3's object-study panes, flex-basis so they wrap gracefully on narrow phones */

  /* --- Motion — reveals (brief §8: "--duration-reveal: 420ms, --ease-reveal:
     ease-out"). base.css's reveal transition is hardwired to the house's
     fixed token names --duration-slow / --ease-out, so the brief's semantic
     names are compiled into those two rather than added as new tokens. */

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 420ms;   /* brief §8 --duration-reveal */

  --ease-out: ease-out;                       /* brief §8 --ease-reveal */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --reveal-shift: 12px;
  --reveal-stagger: 90ms;

  /* --- Motion — the signature move (brief §8): "the meter reads the rate."
     Three coping-edge rivets on independent, non-synchronised ambient loops;
     a sun-glint travelling the waterline on its own loop; a gauge needle that
     sweeps once from rest and settles on the weekly price, never repeating. */

  --duration-ambient-a: 6.5s;  /* rivet 1, delay 0s */
  --duration-ambient-b: 8.1s;  /* rivet 2, delay 1.6s */
  /* rivet 3 reuses --duration-ambient-a at delay 3.1s, per brief §8's own
     stagger ("0s/1.6s/3.1s so no two ever glint in phase") — brief names two
     durations for three rivets; the third's own phase offset from rivet 1
     (3.1s against a 6.5s period) is what keeps it desynchronised. */
  --duration-ambient-c: 9s;    /* waterline sun-glint */
  --duration-settle: 1.6s;     /* gauge-needle sweep, one-shot */
  --delay-settle: 0.2s;

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

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset, font-display: swap.
   Barlow (SIL OFL 1.1) and Barlow Condensed (SIL OFL 1.1), both Google
   Fonts. Sourced from fonts.gstatic.com 2026-09-19, subset locally with
   pyftsubset to the house declared safe range (house-tech-spec §8),
   identical unicode-range on all three files. Licence notices:
   assets/fonts/OFL-barlow.txt, assets/fonts/OFL-barlow-condensed.txt.

   Payload: 18,532 + 19,060 + 18,896 = 56,488 B total, largest face 19,060 B —
   both well under the house's 100 KB total / 60 KB single-face ceiling
   (brief §3: "three static single-weight Latin subsets should land far
   below the two-variable-face precedent that ceiling was derived from").

   Metrics-matched fallbacks first, computed with `scripts/font-metrics.mjs`
   against Liberation Sans (see comment above) — measured, never guessed. */

@font-face {
  font-family: 'Barlow Condensed Fallback';
  src: local('Arial Narrow'), local('Liberation Sans');
  size-adjust: 82.56%;
  ascent-override: 121.13%;
  descent-override: 24.23%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  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'), local('Arial'), local('Liberation Sans');
  font-weight: 700;
  size-adjust: 92.39%;
  ascent-override: 108.23%;
  descent-override: 21.65%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../assets/fonts/barlow-condensed-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: '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;
}