/* ==========================================================================
   tokens.css — the design brief, compiled (house-tech-spec §3).
   Source: runs/m-and-d-sprinklers-spring-tx/brief.md §3.
   Every value below is the brief's; nothing here was chosen at build time.
   ========================================================================== */

:root {

  /* --- Colour — brief §3.1. Derivation order (design-rules §6): the dossier's
     logo-sampled brand blue #1d8dc7 is departed from on the `anchor` ground
     (brief §2: the seasonal/freeze half of the vertical's §6.1 anchor reads as
     frost-slate + amber-worklight, not the brand blue), carried forward from
     C2 item 5. One deliberate mode, light. --- */

  --scheme: light;

  --color-bg:          #F7F3EC;   /* warm-ivory page ground */
  --color-surface:     #FFFFFF;   /* cards, form fields, plaques */
  --color-ink:         #1E2630;   /* body + heading text on bg/surface */
  --color-ink-muted:   #5B6A77;   /* secondary text */
  --color-accent:      #3E5568;   /* "the one colour that means act" — frost-slate */
  --color-accent-ink:  #FFFFFF;   /* text sitting on --color-accent */

  /* Brand-strength amber-worklight — large glyphs / icon fills / display
     numerals only, 3.54:1 vs bg (large-text floor), NEVER body text. */
  --color-accent-warm:      #B6711E;
  /* Re-pitched amber for small/body-text use (labels, inline emphasis). */
  --color-accent-warm-text: #8F5415;

  --color-border:        #E6E0D2;   /* decorative hairlines only — no contrast floor */
  --color-border-strong: #9AA6AF;   /* a control's own boundary, WCAG 1.4.11, >=3:1 vs bg AND surface */

  --color-focus: #1F3A4D;           /* :focus-visible ring, >=3:1 vs bg and surface */

  /* No dark band exists on this site (one deliberate light mode, brief §3.1) —
     --color-focus-on-band stays commented out, per the skeleton's own
     instruction to leave it unused rather than undeclared. */
  /* --color-focus-on-band: …; */

  --color-selection-bg:   #3E5568;
  --color-selection-ink:  #FFFFFF;

  /* The hero's own atmosphere gradient (brief §3.1 contrast rows: white hero
     text measured against these two extremes at 375px, per design-rules §6 —
     a gradient is not a pairing). Tokenised rather than a raw literal in
     site.css. */
  --color-hero-grad-dark:  #1E2630;
  --color-hero-grad-mid:   #263340;
  --color-hero-grad-light: #2C3B49;

  /* The hero's radial amber atmosphere glow — accent-warm #B6711E at reduced
     alpha, the invariant imagery block's own "single small glow" role
     extended to the hero's background atmosphere (design-rules §0's
     required radial-gradient depth). Tokenised rather than a raw rgba()
     literal in site.css. */
  --color-hero-atmosphere: rgba(182, 113, 30, 0.22);

  /* The hero card/device's one literal shadow (tiles/tile-b.html's own C2-
     locked value, "0 2px 10px rgba(0,0,0,.08)" — re-pitched to --color-ink at
     8% alpha rather than pure black, tokenised rather than left raw). */
  --shadow-device: 0 2px 10px rgba(30, 38, 48, 0.08);

  /* --- Typography — brief §3.2. Two families, four static woff2 files (the
     design-rules §5 ceiling). Display carries both cuts (regular + italic
     emphasis); no third/emphasis face. --- */

  --font-display: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  --font-body:    'Work Sans', 'Work Sans Fallback', Arial, sans-serif;

  --font-weight-body:        400;
  --font-weight-body-strong: 600;
  /* Instrument Serif ships ONLY Regular 400 and Italic 400 (brief §3.2) —
     there is no bolder static instance, so headings render at 400 everywhere
     and italic carries the one-word emphasis accent inside headlines. */
  --font-weight-display:     400;

  /* Fluid scale, computed at 375 and 1440 per brief §3.2's table. */
  --text-hero:    clamp(2.75rem, 11vw, 5.5rem);     /* 44px @375 (floor) -> 88px @1440 (ceiling) */
  --text-h2:      clamp(1.75rem, 5.5vw, 2.75rem);   /* 28px -> 44px */
  --text-h3:      clamp(1.25rem, 3.4vw, 1.75rem);   /* 20px -> 28px */
  --text-lead:    clamp(1.0625rem, 2.4vw, 1.25rem); /* 17px -> 20px */
  --text-body:    clamp(1rem, 1.5vw, 1.125rem);     /* 16px -> 18px */
  --text-small:   0.9375rem;                        /* fixed, 15px */
  --text-eyebrow: 0.75rem;                          /* fixed, 12px, --tracking-wide, SemiBold */

  --leading-tight: 1.05;   /* hero/h2/h3 */
  --leading-snug:  1.25;   /* eyebrow, small, buttons */
  --leading-body:  1.6;    /* prose */

  --tracking-tight:  -0.02em;  /* headings, house default */
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;   /* eyebrows / small caps */

  /* --- Space — house scale, unchanged (brief §3.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;

  /* Inter-section rhythm (design-rules §7.1). --section-gap resolves to
     --space-2xl = 96px, FIXED and identical at 375 and 1440 (brief §3.3).
     Two call sites only: .section's padding-block and the hero's
     padding-block-end. Every intra-section gap on this site (grid row-gaps at
     --space-lg 40px, hero head-to-lead gaps <=32px, card padding at
     --space-md 24px) stays strictly below 2 x 96px = 192px. */
  --section-gap: var(--space-2xl);

  /* --- Layout — brief §3.3. --- */

  --layout-container: 72rem;    /* 1152px */
  --layout-measure:   62ch;
  --layout-gutter:    clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min:   44px;     /* WCAG touch-target floor, house-tech-spec §8 */

  /* --- Radius/shadow/border: brief is silent; the C2-winning tile
     (tiles/tile-b.html, brief §1) is the next-most-authoritative source —
     its own rendered CTA radius (3px), flat hairline-bordered boxes. --- */

  --radius-none: 0;
  --radius-sm:   3px;   /* buttons, the hero facts chip */
  --radius-md:   3px;   /* no larger step used on this site */
  --radius-lg:   3px;
  --radius-pill: 999px; /* unused on this site; house-required name kept */

  --shadow-none: none;

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

  /* --- Per-section text measures — brief §5's desktop composition table
     states each section's running-text cap (e.g. "Each card's copy <=40ch");
     tokenised here so site.css carries no raw ch/rem literal (house-tech-spec
     §3). --- */

  --measure-seasonal-card: 40ch;   /* brief §5 seasonal-pair row */
  --measure-explainer-row: 38ch;   /* brief §5 explainer row */
  --measure-services-card: 32ch;   /* brief §5 services row */
  --measure-trust-card:    36ch;   /* brief §5 trust-line row */
  --measure-service-area:  60ch;   /* brief §5 service-area row, "as declared" */
  --measure-reviews-quote: 48ch;   /* brief §5 reviews row, right column */
  --measure-faq-answer:    34ch;   /* brief §5 FAQ row */

  --explainer-n-width:        2ch;      /* index numeral column, brief §5 */
  --explainer-inset-mobile:   14rem;    /* ~224px drawn at <64em */
  --explainer-inset-desktop:  21.25rem; /* 340px, brief §5's stated desktop cap */
  --seasonal-icons-width:     8.75rem;  /* ~140px drawn, brief §7 */
  --services-icon-size:       6rem;     /* 96px fixed, brief §5 */

  /* Decorative inline rating-star mark (Critic round 1 FIX): a drawn glyph
     standing in for the Unicode ★ character copy.md uses, so the same
     information (a star beside the number) ships with no pictograph for
     any checker to classify. Sized relative to the surrounding text. */
  --star-icon-size: 0.8em;
  --star-icon-shift: -0.1em;

  /* Sticky-chrome stack height (design-rules §7.2 rule 3: the MEASURED
     stack, not summed tokens). Brief §6 assumed a 56px/72px header; the
     rendered header is taller (44px call-control floor + --space-sm
     padding), so this is the re-measured value (Playwright, fonts.ready
     awaited): 123px @375, 130px @>=64em. Fold arithmetic unaffected. */
  --sticky-stack: 123px;
  --sticky-stack-desktop: 130px;

  /* --- Motion — brief §3.3/§8. House defaults for reveals; brief-specific
     tokens for the hero's one-shot signature and its three ambient loops. --- */

  --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:   1.25rem;
  --reveal-stagger: 90ms;

  /* The one-shot leader-line draw (brief §8): 1.8s, --ease-out, runs once on
     load, never repeats. */
  --duration-leader-draw: 1.8s;

  /* Two independent frost-wisp drift loops, offset so they never sync
     (brief §8: "9s / 11.4s, offset"). */
  --duration-wisp-a: 9s;
  --duration-wisp-b: 11.4s;
  --delay-wisp-b:    1.1s;

  /* One amber work-light pulse, its own independent period (brief §8). */
  --duration-worklight: 4.6s;

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

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2 only, subset to house-tech-spec §8's
   declared safe range, font-display: swap. Four static instances, two
   families (brief §3.2), at design-rules §5's ceiling. unicode-range is
   byte-identical on all four faces.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Instrument Serif';
  src: url('../assets/fonts/instrument-serif-regular.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: 'Instrument Serif';
  src: url('../assets/fonts/instrument-serif-italic.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;
}

@font-face {
  font-family: 'Work Sans';
  src: url('../assets/fonts/work-sans-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: 'Work Sans';
  src: url('../assets/fonts/work-sans-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;
}

/* --------------------------------------------------------------------------
   Metrics-matched fallbacks (house-tech-spec §7/§8) — MEASURED, not guessed,
   via scripts/font-metrics.mjs against the real shipped woff2.

   ONE TIER for Instrument Serif: Georgia is the right donor, but no Georgia
   binary or published metrics table is reachable here to measure against
   (F3 bars guessing) — `fc-match Georgia` resolves to DejaVu Serif here
   (confirmed, fc-list), which IS what gets measured and what Linux/Android/
   CI render. Real Windows/macOS traffic falls through to the stack's
   unmatched 'Georgia, serif' until a Georgia-capable measurement exists — a
   recorded gap, not a fabricated fix. Work Sans: same treatment, Arial ->
   Liberation Sans. */

@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('DejaVu Serif');
  font-weight: 400;
  font-style: normal;
  size-adjust: 65.69%;
  ascent-override: 150.7%;
  descent-override: 47.19%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('DejaVu Serif');
  font-weight: 400;
  font-style: italic;
  size-adjust: 69.42%;
  ascent-override: 142.62%;
  descent-override: 44.66%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Work Sans Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  font-style: normal;
  size-adjust: 113.41%;
  ascent-override: 82%;
  descent-override: 21.43%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Work Sans Fallback';
  src: local('Arial Bold'), local('Arial'), local('Liberation Sans');
  font-weight: 600;
  font-style: normal;
  size-adjust: 113.25%;
  ascent-override: 82.12%;
  descent-override: 21.46%;
  line-gap-override: 0%;
}