/* ==========================================================================
   tokens.css — the design brief, compiled (house-tech-spec §3).
   Source: runs/yellow-duck-pool-repair-fort-myers-fl/brief.md §2–§8.
   Every value below is the brief's (or transcribed from the winning tile,
   tiles/tile-b.html, per brief §6.1's own instruction to measure from it);
   nothing here was chosen at build time.
   ========================================================================== */

:root {

  /* --- Colour — brief §4. Derivation order (design-rules §6): step 1
     (real-world colour) is EMPTY — dossier §4.5/C1 record no truck wrap,
     signage or logo file to sample from, so it is correctly skipped rather
     than faked. Step 2 (local character) supplies Fort Myers' commercial/
     office-park corridor register. Step 3 (family norms, editorial-modern)
     supplies the ink-on-paper register. The accent is the diagnostic
     "report" register itself — the leak-located marker colour — not a
     business asset. One deliberate mode, light (brief §4). --- */

  --scheme: light;

  --color-bg:          #FAF6EF;  /* paper-cream */
  --color-surface:     #F0E9DC;  /* deeper paper */
  --color-ink:         #201C19;  /* near-black ink */
  --color-ink-muted:   #6B6154;
  --color-accent:      #C1442A;  /* signal-coral — the "leak located" marker */
  --color-accent-ink:  #FFF8F3;

  /* Decorative hairline — brief §4 names no second neutral, so this is the
     Builder's one derivation, a quiet step between surface and ink-muted,
     used only for non-control dividers (header rule, footer rule, field
     borders, index-row rules) per base.css's own "no contrast floor, a
     divider is not a control" convention. */
  --color-border-muted: #CFC7BA;
  --color-border:        var(--color-border-muted);

  /* Control boundary, WCAG 1.4.11 (>=3:1 vs bg AND surface) — reuses
     --color-ink-muted rather than inventing a new hex: brief §4's own
     contrast table already clears it at 5.63:1 (bg) and 5.02:1 (surface),
     comfortably past the 3:1 floor a hairline-only control needs. */
  --color-border-strong: var(--color-ink-muted);

  /* Focus ring. --color-accent clears 3:1 against both bg (4.72:1) and
     surface (4.21:1) per brief §4's contrast table, so it stands for both
     grounds with no second token. No dark band anywhere on this site (brief
     §4: "one deliberate mode, light... no dual-mode"; no full-bleed dark
     section in the §6.2 plan), so --color-focus-on-band stays unset. */
  --color-focus:          var(--color-accent);
  /* --color-focus-on-band: …; -- no dark band on this site */

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

  /* --- Typography — brief §3. Two families, both self-hosted, both
     SIL OFL 1.1 (assets/fonts/OFL.txt carries the notices). Display and
     body collapse onto ONE family, Work Sans, carrying every weight this
     design needs as one variable woff2 (400 body / 600 display / 700
     UI-labels); Source Serif 4 Italic is the single second family,
     emphasis-only. Weight is set with font-weight only; no
     font-variation-settings anywhere names `wght` (house-tech-spec §8's
     named trap). --- */

  --font-display:  'Work Sans', 'Work Sans Fallback', Arial, sans-serif;
  --font-body:     'Work Sans', 'Work Sans Fallback', Arial, sans-serif;
  --font-emphasis: 'Source Serif 4 Italic', 'Source Serif 4 Italic Fallback', 'Source Serif 4 Italic Fallback 2', Georgia, serif;

  --font-weight-body:        400;
  --font-weight-body-strong: 700;   /* UI/labels — button, chips, eyebrow (brief §3) */
  --font-weight-display:     600;   /* display/headers (brief §3) */

  /* Fixed, non-fluid — transcribed from tile-b.html's own wordmark rule
     ("font:600 14px/1 var(--font-display)"), the one on-page size the
     brief's §5 fluid-scale table does not itself name. Used only by the
     house-required site-header__brand component. */
  --text-h3: 0.875rem;

  /* --- Fluid type scale — brief §5, every value at its stated clamp. --- */

  --text-eyebrow: clamp(0.7rem, 0.66rem + 0.14vw, 0.8rem);
  --text-display: clamp(2.1rem, 1.55rem + 2.7vw, 3.7rem);
  --text-h2:      clamp(1.4rem, 1.25rem + 0.8vw, 1.9rem);
  --text-body:    clamp(1rem, 0.96rem + 0.16vw, 1.08rem);
  --text-small:   clamp(0.85rem, 0.82rem + 0.1vw, 0.95rem);

  --leading-tight: 1.05;   /* h1 — tile-b.html "h1.hero-h1{...line 1.05}" */
  --leading-snug:  1.25;
  --leading-body:  1.6;    /* tile-b.html lead line, "/1.6" */

  --tracking-tight:  -0.01em;  /* h1 — tile-b.html "letter-spacing:-0.01em" */
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;   /* eyebrow — tile-b.html "letter-spacing:.08em" */

  /* --- Space — house scale, unmodified. Section rhythm is the brief's own
     call via --section-gap below; the ladder itself is house (spec §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 — brief §5's own clamp, the ONE token setting space
     BETWEEN sections (design-rules §7.1). */
  --section-gap: clamp(3rem, 2.4rem + 2.2vw, 5.5rem);

  /* Living-hero field height — brief §6.1's own figure (220px at 375px),
     expressed as an aspect-ratio (375:220) rather than a fixed length so the
     same proportion — and the same "100% within the fold" guarantee — holds
     at every width, not just the one the brief measured. */
  --hero-field-ratio: 375 / 220;

  /* Sticky-stack header height — brief §6.1's own measured planning figure
     (12px+12px padding + 26px tallest inline child + 1px border ≈ 51px,
     rounds to 52px), used for the sticky header's scroll-margin offset. The
     Builder re-measures the live DOM (§6.1) and this value is what that
     measurement is checked against. */
  --header-height: 3.25rem;

  /* --- Layout — house defaults, unmodified. Single content column at every
     width (archetype: editorial-stack, brief §2) — no split-hero switch, so
     no second container width is needed. --- */

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

  /* Living-hero field height ceiling, desktop only (>=48em). The field's
     aspect-ratio (above) is locked to the shipped hero image and reads
     correctly at mobile widths, matching brief §6.1's 220px-at-375px figure;
     left unconstrained, the same ratio applied to a full-bleed band at wide
     viewports grows past 800px tall (measured: 844.8px at 1440px wide),
     pushing the field well past brief §6.1's "fully within the first ~700px"
     figure and reading as an oversized band. This ceiling is the Builder's
     own re-derivation from that measurement (§6.1 explicitly asks for one),
     not a brief-specified number: it keeps the field's bottom edge close to
     the brief's own planning figure (318px top + 544px = 862px, against a
     900px viewport) while `object-fit: cover` on the image (site.css) keeps
     the plan illustration centred and uncropped top/bottom. */
  --hero-field-max-height: 34rem;

  /* --- Radius / shadow / border — brief's tile uses a uniform 2px radius on
     every interactive/chip element, which is already the house --radius-sm
     step; no override needed. No shadow anywhere on this site (flat
     editorial register — design-rules §4 bans a drop shadow on every card,
     and none is used here at all). --- */

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

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(27 26 23 / 0.06);
  --shadow-md: 0 6px 24px rgb(27 26 23 / 0.09);
  --shadow-lg: 0 24px 60px rgb(27 26 23 / 0.14);

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

  /* --- Motion — brief §8. Reveal system rides the house --duration-slow /
     --ease-out tokens (base.css already consumes those two names); their
     VALUES are the brief's. --ease-in-out is a house-required token name
     too, unused by base.css, repointed here at the brief's literal keyword
     for the signature move's ambient loops. --- */

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 420ms;      /* brief's --duration-reveal */

  --ease-out:    ease-out;     /* brief's --ease-reveal / draw-line ease */
  --ease-in-out: ease-in-out;  /* brief's ambient-loop ease */

  --reveal-shift: 1.25rem;     /* 12px rise, brief §8 */
  --reveal-stagger: 90ms;

  /* Signature move — "the leak gets written down" (brief §8). Independent,
     non-synchronised timings: 6.4s and 3.8s share no simple common multiple,
     so the pin float and the marker pulse never visibly synchronise. */
  --duration-ambient-a: 6.4s;  /* pin float */
  --duration-ambient-b: 3.8s;  /* marker pulse */
  --duration-draw:      2.2s;  /* report-annotation line, draws once on load */
  --delay-draw:         0.4s;

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

/* Brief §8: "prefers-reduced-motion disables the transform/opacity animation
   (content simply present)... Atmosphere and the full palette survive
   untouched when the loops stop." base.css already collapses its own three
   duration tokens and --reveal-shift; this site's OWN signature-move tokens
   need their own collapse (tokens.css convention, not a base.css edit —
   house-tech-spec §2). The paired settled visual state (pin/pulse stopped,
   marker at rest, line pre-drawn) is set in site.css at matching specificity,
   no !important (spec §12). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-ambient-a: 0.01ms;
    --duration-ambient-b: 0.01ms;
    --duration-draw:      0.01ms;
    --delay-draw:         0s;
  }
}

/* --------------------------------------------------------------------------
   @font-face — two families, two files (brief §3). Both SIL OFL 1.1;
   assets/fonts/OFL.txt carries the notices. Subset to the HOUSE declared
   safe range (house-tech-spec §8). No CDN, self-hosted.

   Metrics-matched fallbacks first, so font-display: swap costs no CLS (spec
   §8). size-adjust / overrides computed with scripts/font-metrics.mjs
   (Fontaine's method) against the real shipped woff2 (post-subset) vs. each
   donor's real installed instance — never guessed.

   TWO TIERS for the emphasis face, same shape as auto-evolution-north-
   logan-ut's registry precedent. Georgia is the correct donor for the
   majority of real traffic (Windows, macOS and iOS all ship it), tried
   first via 'Source Serif 4 Italic Fallback'. It is not installed in this
   build/QA environment (verified: `fc-match Georgia` -> DejaVu Serif, and
   Gelasio — Georgia's open metric twin, used here only because Georgia
   itself cannot be inspected on this box — is not pre-installed either), so
   a second named fallback, calibrated against DejaVu Serif (genuinely
   installed, verified with `fc-list`), is tried before falling through to
   an unmatched generic serif. Work Sans needs only one tier: `fc-match
   Arial` resolves to Liberation Sans on this box too, and Liberation Sans
   is Arial's own metric twin on real traffic, so 'Work Sans Fallback'
   measures against it directly.
   -------------------------------------------------------------------------- */

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

@font-face {
  font-family: 'Source Serif 4 Italic';
  src: url('../assets/fonts/source-serif-4-italic-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;
}

/* Work Sans Fallback — measured per weight against the SAME donor
   (Liberation Sans Regular; local() resolves by name, not by the weight
   number on this rule, so all three blocks share one src). Work Sans'
   variable-font glyph widths barely move across 400/600/700, so the three
   override sets are close but each is its own measurement. */

@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'), 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%;
}

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

@font-face {
  font-family: 'Source Serif 4 Italic Fallback';
  src: local('Georgia'), local('Gelasio');
  font-weight: 400;
  font-style: italic;
  size-adjust: 97.03%;
  ascent-override: 106.77%;
  descent-override: 34.53%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Serif 4 Italic Fallback 2';
  src: local('DejaVu Serif');
  font-weight: 400;
  font-style: italic;
  size-adjust: 84.88%;
  ascent-override: 122.06%;
  descent-override: 39.47%;
  line-gap-override: 0%;
}