/* ==========================================================================
   tokens.css — the design brief, compiled (house-tech-spec §3).
   Source: runs/cds-pool-service-and-repair-mesa-az/brief.md §2–§8.
   Family: editorial-modern. Archetype: ledger-stack — single content column
   at every width, no split-hero switch (brief §2).
   ========================================================================== */

:root {

  /* --- Colour — brief §4. Derivation order (design-rules §6): step 1
     (real-world colour) is EMPTY — no truck, uniform, signage or logo found
     at any tier, correctly skipped rather than faked. Step 2 (local
     character) supplies the East Valley's citrus-grove heritage, rendered as
     paper/ledger warmth. Step 3 (family norms) supplies the calm ink-on-paper
     register. One deliberate mode, light. --- */

  --scheme: light;

  --color-bg:          #F7EFE2;  /* paper-bone */
  --color-surface:     #ECE0CC;  /* deeper paper — ledger-row / trust bands */
  --color-ink:         #34281D;
  --color-ink-muted:   #6E5B49;
  --color-accent:      #A6431B;  /* citrus-rust — the one colour that means "act" */
  --color-accent-ink:  #FFFFFF;

  /* The waterline/vessel hue — decorative/imagery only (brief §4's contrast
     table: 4.33:1 on bg, large/decorative-only, NEVER carries text) and its
     text-safe variant, used only if a labelled callout in this hue is ever
     needed. Both required roles for the §6.1 anchor's imagery/decorative use. */
  --color-vessel:      #2E7C74;  /* desert-turquoise */
  --color-vessel-ink:  #256560;  /* text-safe variant — the ONLY form of this hue that may carry text */

  /* Hero atmosphere — brief §4's gradient-extreme fix: two soft radial
     highlights over a three-stop linear gradient, unchanged from the tile.
     Named as tokens (not raw hex in site.css) so the hero background rule
     stays within house-tech-spec §3's "tokens only" hard rule. The gradient's
     FIRST linear stop is --color-bg itself (reused, not restated). */
  --color-atmosphere-light: #FBE6C8;  /* top-center light radial */
  --color-atmosphere-warm:  #D98C58;  /* bottom-right warm radial */
  --color-atmosphere-mid:   #ECD9BD;  /* linear gradient's middle stop, 55% */
  --color-atmosphere-deep:  #DDB98A;  /* linear gradient's darkest stop, 100% — the "facts" row's ground (brief §4's own fix) */

  /* Decorative hairline — a quiet step between --color-surface and
     --color-ink-muted (25% toward ink-muted); non-control dividers only. */
  --color-border:        #CDBFAB;
  --color-border-strong: var(--color-ink-muted);  /* control boundary, WCAG 1.4.11: 5.65:1 (bg) / 4.94:1 (surface) */

  /* Focus ring. --color-accent clears 3:1 against bg (5.35:1) and surface
     (4.68:1). No dark band on this site, so --color-focus-on-band stays unset. */
  --color-focus:          var(--color-accent);

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

  /* --- Typography — brief §3. Two families, three woff2 files, both SIL OFL
     1.1 (Google Fonts). Literata (variable, wght 400/600, opsz axis fixed at
     display sizes) is both the display face and the donor for its own italic
     (emphasis-only, static instance). Source Sans 3 (variable, wght 400/600)
     is the body face. Weight is set with font-weight only; font-variation-
     settings below carries 'opsz' only, never 'wght' (house-tech-spec §8's
     named trap). --- */

  --font-display:  'Literata', 'Literata Fallback', 'Literata Fallback 2', Georgia, serif;
  --font-emphasis: 'Literata Italic', 'Literata Italic Fallback', 'Literata Italic Fallback 2', Georgia, serif;
  --font-body:     'Source Sans 3', 'Source Sans 3 Fallback', Arial, sans-serif;

  --font-weight-body:        400;
  --font-weight-body-strong: 600;
  --font-weight-display:     600;

  /* Optical size, fixed rather than left to auto-interpolation, at the one
     place-class the brief calls a "display size": the hero H1. Never named
     alongside font-weight on the same rule (house-tech-spec §8). */
  --opsz-display: 32;

  /* Fixed, non-fluid — the header wordmark's one on-page size the brief's §5
     fluid-scale table does not itself name (house convention, e.g.
     yellow-duck-pool-repair-fort-myers-fl's own --text-h3). */
  --text-h3: 0.875rem;

  /* Section-heading size — not named by brief §5 (which tables eyebrow, h1,
     lead, body only); derived here as the Builder's own scale step between
     --text-h1 and --text-lead, so a section H2 reads as a clear third level
     under the hero H1 at every width. Also used for the Weekly Ledger's own
     numerals (brief §4's hard constraint: that role must stay >=1rem/16px;
     this floor clears it with wide margin at every width). */
  --text-h2: clamp(1.35rem, 1.15rem + 1.6vw, 2.1rem);

  /* House default, unmodified — brief §5 does not name a small-text step. */
  --text-small: 0.9375rem;

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

  --text-eyebrow: clamp(0.7rem, 0.66rem + 0.2vw, 0.78rem);
  --text-h1:      clamp(1.9rem, 1.5rem + 3vw, 3.2rem);   /* brief §5's CORRECTED token — see brief for the argued fix over the tile's frozen 36.8px value */
  --text-lead:    clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --text-body:    clamp(1rem, 0.97rem + 0.14vw, 1.05rem);

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.6;

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

  /* --- Space — house scale, unmodified (brief §4/§5 name no override). --- */

  --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 figure: fixed at --space-xl
     (4rem/64px), "a fixed value states the same number at each width and
     says that it does" (§7.1). Only call sites: .section's padding-block and
     the hero's padding-block-end. */
  --section-gap: var(--space-xl);

  /* Living-hero field height — brief §6.1's own figure, fixed at every width
     per §7.2 rule 4 ("the field keeps its specified size"; unlike an
     aspect-ratio device, this design's field is a fixed-height strip at
     every breakpoint, per the brief's own 375px arithmetic table). */
  --hero-field-height: 14.375rem;  /* 230px */

  /* Sticky-stack header height — RE-MEASURED against the live DOM (brief
     §6.1 requires this, not the ~52px planning estimate): --space-2xs
     padding top+bottom (16px) + the 44px tap-target row (brand link, JS-
     revealed nav-toggle) = 60px, confirmed with Playwright at 375 and 1440.
     Used for the sticky header's own scroll-margin offset. */
  --header-height: 3.75rem;  /* 60px, measured */

  /* Component-specific sizes, named here so site.css stays token-only
     (house-tech-spec §3). */
  --text-facts: 0.72rem;         /* brief §4's own cited figure for the hero facts row (≈11.5px) */
  --ledger-num-col: 3rem;        /* Weekly Ledger numeral column width, >=48em */
  --icon-caret-size: 0.5em;      /* FAQ disclosure caret, brief §6.2 row 9's own third ornament */
  --figure-max-width: 30rem;     /* imagery figures, >=48em */
  --hero-marker-float: 4px;      /* signature-move vertical float distance, transcribed from tiles/tile-c.html */
  --hero-tick-float: 3px;        /* signature-move vertical float distance, transcribed from tiles/tile-c.html */

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

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

  /* --- Radius / shadow / border — tile-c.html's own flat editorial register:
     a uniform 2px radius on interactive elements (the house --radius-sm
     step; no override needed) and no shadow anywhere (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 geometry: "rise 12px" is the brief's own
     stated figure — 0.75rem, which is also the house --space-xs step, so it
     is reused rather than restated as a fresh literal. --duration-slow/
     --ease-out are the house-required token NAMES the reveal system in
     base.css already consumes; their VALUES stay the house default (the
     brief names no override figure for the reveal transition itself, only
     its distance). --- */

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  --ease-out:    ease-out;     /* brief §8's own draw-line/reveal easing keyword, transcribed from tile-c.html's keyframes */
  --ease-in-out: ease-in-out;  /* brief §8's own ambient-loop easing keyword */

  --reveal-shift: var(--space-xs);  /* 12px, brief §8 */
  --reveal-stagger: 90ms;

  /* Signature move — "the ledger reads itself" (brief §8, §9's registry row).
     Independent, non-synchronised timings: 7.8s and 6.1s share no simple
     common multiple, so the marker float and the tick float never visibly
     synchronise. */
  --duration-ambient-a: 7.8s;  /* floating diagnostic marker */
  --duration-ambient-b: 6.1s;  /* its tick mark */
  --duration-draw:      1.4s;  /* report-annotation line, draws once on load */
  --delay-draw:         0.3s;

  /* --- 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 (marker/tick stopped,
   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, three files (brief §3). Both SIL OFL 1.1;
   assets/fonts/OFL.txt carries the notice. 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.
   -------------------------------------------------------------------------- */

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

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

/* Fallback faces — measured per scripts/font-metrics.mjs (Fontaine's method)
   against the real shipped woff2 vs. each donor's real installed instance,
   never guessed. Georgia (majority of real traffic) is named first; it is
   not installed here (`fc-match Georgia` -> DejaVu Serif), so the two
   Literata fallbacks are measured against Gelasio, Georgia's metric twin,
   same substitution as the auto-evolution/yellow-duck registry precedent.
   Source Sans 3 Fallback is measured against Liberation Sans (Arial's real
   metric twin, genuinely installed here — `fc-match Arial` confirms it).

   Coverage gap, recorded rather than silently shipped: U+2010, U+2011,
   U+2012 and U+2015 are in the declared range and absent from all three
   source faces (checked with fontTools). Not narrowed for it — every face
   lacks the same four, so the fallback is consistent across faces, never
   mid-sentence in two different ones. */

@font-face {
  font-family: 'Literata Fallback';
  src: local('Georgia'), local('Gelasio');
  size-adjust: 107.91%;
  ascent-override: 109.07%;
  descent-override: 28.54%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Literata Italic Fallback';
  src: local('Georgia'), local('Gelasio');
  font-style: italic;
  size-adjust: 99.59%;
  ascent-override: 118.18%;
  descent-override: 30.93%;
  line-gap-override: 0%;
}

/* SECOND TIER (auto-evolution/yellow-duck precedent): neither Georgia nor
   Gelasio is installed in THIS build/QA environment, so the CLS check that
   runs here would fall through tier one to an unmatched generic serif.
   DejaVu Serif IS installed, so a second fallback is measured against it —
   measured, not guessed. No local italic style exists for it, so the italic
   tier reuses the regular file's metrics with `font-style: italic` set. */
@font-face {
  font-family: 'Literata Fallback 2';
  src: local('DejaVu Serif');
  size-adjust: 92.47%;
  ascent-override: 127.28%;
  descent-override: 33.31%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Literata Italic Fallback 2';
  src: local('DejaVu Serif');
  font-style: italic;
  size-adjust: 87.12%;
  ascent-override: 135.1%;
  descent-override: 35.35%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Sans 3 Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 94.14%;
  ascent-override: 108.77%;
  descent-override: 42.49%;
  line-gap-override: 0%;
}