/* ==========================================================================
   tokens.css — the design brief, compiled (house-tech-spec §3).
   Source: runs/team-one-tile-endwell-ny/brief.md §2–§8.
   Every value below is the brief's (or transcribed from the winning tile,
   tiles/tile-b.html, per the same convention brief §6.1 uses); 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 records no truck, uniform or
     signage asset located this session, so step 1 is correctly skipped
     rather than faked. Step 2 (local character, thin/I-tier) and step 3
     (family norms + playbook collision note 2: "this trade's material
     already carries its colour") supply the accent — the trade's own grout
     colour, burnt terracotta, never an invented brand hue. One deliberate
     mode, light (brief §4: "No dual-mode"). --- */

  --scheme: light;

  --color-bg:          #F2ECE2;  /* bone-ivory */
  --color-surface:     #FFFFFF;
  --color-ink:         #262524;  /* graphite-ink */
  --color-ink-muted:   #6E6862;
  --color-accent:      #B4552E;  /* grout-terracotta — decorative/large-display ONLY, 4.18:1 vs bg */
  --color-accent-ink:  #7A3A1E;  /* deep-terracotta — small-text-safe, 7.29:1 vs bg / 8.57:1 vs surface */

  /* House-required structural tokens (house-tech-spec §3) — brief §4's own
     values, verbatim. */
  --color-border:        #DAD2C4;  /* decorative hairlines only, no contrast floor */
  --color-border-strong: #8A8074;  /* control boundaries — WCAG 1.4.11, >=3:1 vs bg AND surface */
  --color-focus:          #7A3A1E;  /* reuses accent-ink — already >=7:1 vs both grounds */

  /* No dark band anywhere on this site (brief §4: "one deliberate mode,
     light... No dark band exists anywhere on this page"), so this stays
     unset per the token file's own convention. */
  /* --color-focus-on-band: …; */

  --color-selection-bg:   #7A3A1E;
  --color-selection-ink:  #F2ECE2;

  /* No brief-specific colours beyond the six required roles + four
     structural tokens (brief §4: "No new colour tokens are introduced
     beyond these ten"). */


  /* --- Typography — brief §3. Two families, both self-hosted variable
     woff2 (400–700 in one file each), both SIL OFL 1.1
     (assets/fonts/OFL-Petrona.txt, OFL-PublicSans.txt). No third family:
     emphasis is carried by the index numerals themselves, set in
     --color-accent-ink — emphasis_font is null (brief §3). Weight is set
     with font-weight only; no font-variation-settings anywhere names `wght`
     (house-tech-spec §8's named trap — this design never needs opsz
     either). --- */

  --font-display: 'Petrona', 'Petrona Fallback', 'Petrona Fallback 2', Georgia, serif;
  --font-body:    'Public Sans', 'Public Sans Fallback', Arial, sans-serif;

  --font-weight-body:        400;  /* body (brief §3) */
  --font-weight-body-strong: 700;  /* UI/labels/eyebrow (brief §3) */
  --font-weight-display:     600;  /* H1, section heads, index numerals — the ONLY display weight (brief §3) */

  /* Fixed, non-fluid — transcribed from tile-b.html's own wordmark rule
     (".site-header .wordmark{font-family:var(--font-display);font-weight:600;
     font-size:1.05rem}"), the one on-page size brief §5's own fluid-scale
     table does not itself name (same convention
     yellow-duck-pool-repair-fort-myers-fl/css/tokens.css used for its own
     wordmark). Used only by the house-required site-header__brand
     component. */
  --text-h3: 1.05rem;

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

  --text-eyebrow:    clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-display:    clamp(2.2rem, 1.6rem + 3vw, 3.9rem);
  --text-lead:       clamp(1.02rem, 0.95rem + 0.4vw, 1.25rem);
  --text-body:       clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --text-small:      clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);
  --text-index-num:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);

  --leading-tight: 1.03;   /* h1 — tile-b.html "h1{line-height:1.03}" */
  --leading-snug:  1.25;
  --leading-body:  1.6;

  --tracking-tight:  -0.01em;  /* display headings */
  --tracking-normal: 0em;
  --tracking-wide:   0.09em;   /* eyebrow — tile-b.html "letter-spacing:0.09em" */

  /* --- Space — house scale, unmodified (brief §5 picks only the
     inter-section step below; the ladder itself is house). --- */

  --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: "--section-gap: var(--space-2xl) — 6rem
     / 96px, a fixed (non-fluid) value... chosen over the skeleton default
     --space-xl (4rem) for the more generous, calm rhythm §0 asks of the body
     sections around the one living-hero moment." The ONE token setting space
     BETWEEN sections (design-rules §7.1). */
  --section-gap: var(--space-2xl);

  /* Living-hero field height — brief §5's own clamp, verbatim. Floor
     (230px) holds ≤389px; ceiling (380px) holds ≥1222px. */
  --hero-field-height: clamp(230px, 18vw + 160px, 380px);

  /* --- 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;

  /* --- Radius / shadow / border — brief names no override; tile-b.html's
     own 2px control radius is already the house --radius-sm step, and the
     flat editorial register carries no shadow anywhere (design-rules §4
     permits --radius-none/--shadow-none as legitimate whole-site answers,
     but this design's controls DO use the sm radius, matching the tile). --- */

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

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(38 37 36 / 0.06);
  --shadow-md: 0 6px 24px rgb(38 37 36 / 0.09);
  --shadow-lg: 0 24px 60px rgb(38 37 36 / 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 own --duration-reveal / --ease-reveal. --- */

  --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 hex-chip ambient-loop ease */
  --ease-linear: linear;       /* brief's raking-sweep ease, stated by name (brief §8) */

  /* Reveal geometry — brief §8: "fade + rise 12px on entry". 12px equals
     --space-xs exactly, so the brief's figure is expressed by reusing that
     token rather than a second literal. */
  --reveal-shift: var(--space-xs);
  --reveal-stagger: 90ms;

  /* Signature move — "the plane reads itself" (brief §8). Independent,
     non-synchronised timings: 9s and 8.2s share no simple common multiple,
     so the raking sweep and the hex-chip float never visibly synchronise. */
  --duration-ambient-a: 9s;    /* raking-light sweep */
  --duration-ambient-b: 8.2s;  /* stray hex-chip float */
  --duration-draw:      2s;    /* grout-line draw, 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 (sweep/float stopped,
   grout line pre-drawn to full length) 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-Petrona.txt and OFL-PublicSans.txt carry the notices.
   Subset to the HOUSE declared safe range (house-tech-spec §8). No CDN,
   self-hosted. Both variable, 400–700, one file each — 37,260 B / 21,164 B
   post-subset (58,424 B total), well inside the ≤100 KB total / ≤60 KB
   per-face budget (house-tech-spec §7).

   Metrics-matched fallbacks first, so font-display: swap costs no CLS
   (house-tech-spec §8). size-adjust / overrides computed with
   scripts/font-metrics.mjs (Fontaine's method) against each shipped woff2
   instantiated at the weight this brief actually uses (Petrona: 600 only;
   Public Sans: 400 and 700) vs. each donor's real installed instance —
   never guessed.

   TWO TIERS for the display face, same shape as
   3-dogs-and-a-girl-lincoln-ne's registry precedent for this exact family.
   Georgia is the correct donor for the majority of real traffic (Windows,
   macOS and iOS all ship it), tried first via 'Gelasio' — Georgia's open
   metric twin, used here only because Georgia itself cannot be inspected on
   this build/QA box (`fc-match Georgia` → DejaVu Serif; Gelasio is not
   pre-installed either). A second named fallback, calibrated against DejaVu
   Serif Bold (genuinely installed, verified with `fc-list`, and the closer
   weight match to Petrona 600), is tried before falling through to an
   unmatched generic serif. Public 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 'Public Sans Fallback'
   measures against it directly, per weight (400 body / 700 UI-labels).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Petrona';
  src: url('../assets/fonts/petrona-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: 'Public Sans';
  src: url('../assets/fonts/public-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;
}

/* Petrona Fallback — measured against Petrona instantiated at 600 (the
   design's only display weight) vs. Gelasio Regular. */
@font-face {
  font-family: 'Petrona Fallback';
  src: local('Georgia'), local('Gelasio');
  font-weight: 600;
  font-style: normal;
  size-adjust: 101.55%;
  ascent-override: 84.49%;
  descent-override: 26.59%;
  line-gap-override: 0%;
}

/* Petrona Fallback 2 — the box's own installed serif, measured directly
   (DejaVu Serif Bold is the closer weight match to Petrona 600). */
@font-face {
  font-family: 'Petrona Fallback 2';
  src: local('DejaVu Serif Bold'), local('DejaVu Serif');
  font-weight: 600;
  font-style: normal;
  size-adjust: 78.76%;
  ascent-override: 108.94%;
  descent-override: 34.28%;
  line-gap-override: 0%;
}

/* Public Sans Fallback — measured per weight against the same donor
   (Liberation Sans; local() resolves by name, so both blocks share one
   src). Public Sans' variable-font glyph widths move slightly between
   400 and 700, so each weight is its own measurement. */
@font-face {
  font-family: 'Public Sans Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  font-style: normal;
  size-adjust: 105.21%;
  ascent-override: 90.30%;
  descent-override: 21.39%;
  line-gap-override: 0%;
}

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