/* ==========================================================================
   tokens.css — the design brief, compiled. Absolute Plumbing Solutions,
   Texarkana AR & TX. brief.md v1, tile-a.html, warm-craft, band-rhythm.
   ========================================================================== */

:root {

  /* --- Colour — brief §2. Derivation order (design-rules §6): no real-world
     brand colour exists (dossier §4.5/§4.8); brass-fitting derives from the
     trade's own honest material (warm-craft family norms). */

  --scheme: light;

  --color-bg: #FAF3E8;                /* warm cream */
  --color-surface: #F2E8D8;           /* deeper cream — cards, bands */
  --color-ink: #2B2118;               /* warm near-black */
  --color-ink-muted: #5C4F42;         /* muted warm brown-grey — 7.18:1 / 6.52:1 */
  --color-accent: #8B5A2B;            /* brass-fitting — the one colour that means "act" */
  --color-accent-ink: #FFFBF4;        /* near-white, for text on --color-accent */

  /* Decorative hairline, carried from tile-a.html's own `.field` border. */
  --color-border: #E3D5BC;
  /* Control boundary, WCAG 1.4.11 >=3:1 vs bg/surface — reuses ink-muted. */
  --color-border-strong: var(--color-ink-muted);
  /* Reuses --color-accent (clears >=3:1 vs both grounds, brief §2 table). */
  --color-focus: var(--color-accent);
  /* --color-focus-on-band: —; no dark band anywhere in this design. */

  --color-selection-bg: var(--color-accent);
  --color-selection-ink: var(--color-accent-ink);

  /* Hero field atmosphere, carried forward verbatim from tile-a.html's own
     `.field` gradient stops. No text sits over it (brief §2). */
  --color-hero-atmos-near: #FFF3DE;
  --color-hero-atmos-far: #E6D8BE;

  /* --- Typography — brief §3. Spectral (display, 600 roman + 400 italic) +
     Karla (body, 400 + 700), both OFL, self-hosted. Karla ships as ONE
     variable file (wght 400–800; Google serves byte-identical bytes for the
     400/700 CSS2 requests) under one @font-face with a weight range — the
     house's own precedent (sites/shedhorn-plumbing-helena-mt). 3 files total,
     2 families — under the §5 ceiling. */

  --font-display: 'Spectral', 'Spectral Fallback', Georgia, serif;
  --font-emphasis: 'Spectral Italic', 'Spectral Italic Fallback', Georgia, serif;
  --font-body: 'Karla', 'Karla Fallback', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 700;      /* Karla 700 — buttons, facts, labels */
  --font-weight-display: 600;          /* Spectral 600 roman — h1/h2 */
  --font-weight-place: 500;            /* brief §6 header place-tag weight */

  /* Type scale, brief §3, clamp()s computed across 375→1024. */
  --text-eyebrow: clamp(0.75rem, 0.68rem + 0.35vw, 0.875rem); /* 12.19px→14px */
  --text-hero: clamp(2.25rem, 1.5rem + 4vw, 4rem);            /* 39.0px→64px */
  --text-h2: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);         /* 29.6px→36px */
  --text-lead: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);        /* 17.1px→18px */
  --text-body: 1rem;      /* fixed, 16px */
  --text-small: 0.875rem; /* fixed, 14px */
  --text-place: 0.72rem;  /* brief §6 header place-tag size, both widths */
  /* No <h3> renders anywhere (FAQ = <details>, steps = styled <span>);
     base.css still needs a value, so this points at the nearest licensed
     step rather than inventing a new magnitude. */
  --text-h3: var(--text-lead);

  --leading-tight: 1.04;  /* brief §6 hero h1 line-height (39px × 1.04 × 2) */
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;

  /* Hero h1 vertical rhythm, brief §6's own em-multipliers. */
  --text-hero-margin-top: 0.3em;
  --text-hero-margin-bottom: 0.4em;

  /* --- Space — brief §5, identical to the house default scale. */
  --space-3xs: 0.25rem;  /* 4px */
  --space-2xs: 0.5rem;   /* 8px */
  --space-xs: 0.75rem;   /* 12px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2.5rem;    /* 40px */
  --space-xl: 4rem;      /* 64px */
  --space-2xl: 6rem;     /* 96px */
  --space-3xl: 9rem;     /* 144px */

  /* Section rhythm (design-rules §7.1): brief §5 fixes this at --space-2xl,
     not the house default --space-xl. */
  --section-gap: var(--space-2xl);

  /* Two brief-specific gaps off the general scale (brief §7): services grid
     32px, reviews grid 48px — both under 2×96=192px. */
  --space-services-gap: 2rem;   /* 32px */
  --space-reviews-gap: 3rem;    /* 48px */

  /* Container, brief §7: min(1180px, 100% - 96px), centred, ≥64em only —
     96px IS --space-2xl. Below 64em the house gutter clamp is unchanged. */
  --layout-container: 73.75rem;        /* 1180px desktop cap */
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;

  /* Fixed desktop column widths, brief §6/§7 — the other column is always
     `1fr`, so 404px/656px etc. self-compute from the container width. */
  --layout-hero-text: 28.75rem;        /* 460px */
  --layout-process-image: 20rem;       /* 320px */

  /* Centred single-column sections, brief §7 rows 6–7. */
  --layout-narrow: 40rem;              /* 640px — service area */
  --layout-faq: 47.5rem;               /* 760px — FAQ */

  /* Per-component reading measures, brief §7's "Text measure" column. */
  --measure-hero: 36ch;                /* hero lead + footer NAP column */
  --measure-card: 32ch;                /* services card */
  --measure-trust-cell: 24ch;
  --measure-review-featured: 42ch;
  --measure-review-support: 34ch;
  --measure-step: 22ch;
  --measure-narrow: 60ch;              /* service area */
  --measure-faq: 65ch;

  /* Sticky stack, brief §6 — expiry bar + header, as-measured on the
     rendered page (design-rules §5). The call button's 44px touch-target
     floor (WCAG) runs taller than the brief's pre-render 58px/41px. */
  --size-sticky-chrome-mobile: 7.9375rem;  /* 127px, <480px */
  --size-sticky-chrome-desktop: 7.375rem;  /* 118px, ≥480px */

  /* Header's own block padding, brief §6 — fixed 10px/side at every width
     (not the fluid gutter), since it feeds the sticky-stack constants above. */
  --space-header-padding: 0.625rem; /* 10px */

  /* --- Radius / shadow / border. Brief §§2–5 are silent on these; the house
     scale already provides the vocabulary, so one modest step is picked,
     matching the winning tile's own small radius. */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(43 33 24 / 0.08);
  --shadow-md: 0 6px 24px rgb(43 33 24 / 0.10);
  --shadow-lg: 0 24px 60px rgb(43 33 24 / 0.16);

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

  /* Dashed-seam motif, flattened to a static rule (brief §10, the section
     head-rule). A native dashed border needs no dash-length tokens. */
  --border-rule: 2px;

  /* Hero's two satellites (brief §9) — size/travel at each breakpoint the
     tile used, carried forward unchanged (tiles/tile-a.html's `.sat`). */
  --size-satellite-drip: 0.5rem;        /* 8px, <64em */
  --size-satellite-glint: 0.3125rem;    /* 5px, <64em */
  --size-satellite-drip-lg: 0.875rem;   /* 14px, ≥64em */
  --size-satellite-glint-lg: 0.5625rem; /* 9px, ≥64em */
  --satellite-drip-travel: 0.4375rem;   /* 7px */
  --satellite-glint-travel: 0.625rem;   /* 10px */

  /* --- Motion — brief §4. base.css's reveal system reads --duration-slow;
     repointed directly to the brief's own 400ms rather than a parallel
     token base.css never reads. */
  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 0.4s;               /* brief §4 --duration-reveal: 400ms */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* brief §4, = house default */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

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

  /* Hero's two independent, non-synchronised satellite loops, brief §4/§9,
     the tile's own signature device, carried forward unchanged. */
  --duration-satellite-a: 6.4s;        /* the brass drip */
  --duration-satellite-b: 8.7s;        /* the white glint */

  --z-base: 0;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, SIL OFL 1.1 (assets/fonts/OFL-*.txt).
   font-display: swap, metrics-matched fallbacks, the house declared safe
   unicode-range (house-tech-spec §8), identical on all three faces.

   Coverage gap (fontTools-checked): U+2010/2011/2012/2015 sit in the range,
   absent from both faces alike — not narrowed (§8).

   Fallback metrics measured with scripts/font-metrics.mjs against the real
   files; neither Georgia nor Arial is installed here (fc-match substitutes
   Liberation Serif/Sans — the sites/shedhorn-plumbing-helena-mt caveat). */

@font-face {
  font-family: 'Spectral Fallback';
  src: local('Georgia'), local('Liberation Serif');
  size-adjust: 112.74%;
  ascent-override: 93.94%;
  descent-override: 41.07%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Spectral Italic Fallback';
  src: local('Georgia Italic'), local('Liberation Serif Italic');
  font-style: italic;
  size-adjust: 100.32%;
  ascent-override: 105.56%;
  descent-override: 46.15%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 103.53%;
  ascent-override: 88.57%;
  descent-override: 24.34%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Spectral';
  src: url('../assets/fonts/spectral-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: 'Spectral Italic';
  src: url('../assets/fonts/spectral-400italic-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;
}

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