/* ==========================================================================
   tokens.css — the design brief, compiled.

   SunTan Pools (Arlington, TX). Every value below is from the approved brief
   (runs/suntan-pools-arlington-tx/brief.md §2-§5). Family: retro-local.
   Archetype: badge-board. Palette: brass-badge/parchment-cream, one light
   mode, no dark band. Signature: a fixed, two-nail-mounted plaque that never
   swings — its brass sun-badge's eight rays light up in a one-shot staggered
   sequence on load, settling once and never repeating, while the wave/coping
   line drifts on an independent 8s loop and a hook-hung chime sways on its
   own non-synced 7.4s loop (brief §5).
   ========================================================================== */

:root {

  /* --- Colour --------------------------------------------------------------
     Derivation (brief §2.1): the dossier's own recorded CSS blue (#3c48ce) is
     explicitly NOT the brand-echo default — provenance ground 4, no
     real-world sighting (dossier §4.5). Derived instead from (2) local
     character — ordinary DFW suburban residential, Tarrant County — and
     (3) family norms — retro-local's Americana/badge/sign-painter register.
     Ratios are brief §2.2's own table, independently re-verified there
     against the C2 coordinator's post-fix tile values. */

  --scheme: light;

  --color-bg: #FBF3E7;                /* warm cream/parchment — page ground */
  --color-surface: #F3E2C9;           /* deeper parchment — card/board ground */
  --color-ink: #2B1E14;               /* deep warm brown-black — headings, body on bg */
  --color-ink-muted: #6B4F35;         /* warm brown — body copy, incl. on surface (5.92:1) */

  /* Brass, licensed directly by the business's own name ("Sun" in SunTan is
     the badge's brass sun-medallion). Text role ONLY at >=24px regular /
     >=18.66px bold, or as non-text graphic/rule work (brief §2.2) — small
     text on surface uses --color-ink-muted instead, never accent. */
  --color-accent: #8F5C0E;
  --color-accent-ink: #FFF8EF;        /* CTA label ink on accent fills (5.38:1) */

  /* Imagery-only teal — the badge's wave/coping line, NEVER a UI role. Not
     consumed anywhere in site.css as a text/bg pairing (brief §2.1, §4.4). */
  --color-pool: #1F7A8C;

  /* House-required structural colours (consumed by base.css) */
  --color-border: #DCC79E;            /* decorative hairlines only */

  /* CONTROL'S OWN BOUNDARY, WCAG 1.4.11: >= 3:1 vs bg AND surface.
     = --color-ink-muted: 6.82:1 bg / 5.92:1 surface. */
  --color-border-strong: #6B4F35;

  /* :focus-visible ring — AA vs bg AND surface. = --color-accent, 5.15:1 bg;
     against surface (--color-accent on --color-surface) also clears 3:1
     non-text, the WCAG 1.4.11 floor a ring needs. */
  --color-focus: #8F5C0E;
  /* No dark band on this site (the services board uses --color-ink as a
     component ground, not a full-bleed section band) — see the board's own
     focus handling in site.css, which re-points at bg/ink for exactly that
     one component rather than declaring a site-wide band token. */
  /* --color-focus-on-band: …; */

  --color-selection-bg: #8F5C0E;
  --color-selection-ink: #FFF8EF;

  /* The hero's radial atmosphere AND the services-board component's own
     heading ink share one value (brief §2.2: "gradient's two extremes are
     #FFEBC7 and #FBF3E7" for the hero; "#FFEBC7 on ink" 13.83:1 AAA for the
     board's own heading role) — one token, two call sites, per the token
     contract (no raw hex outside this file). */
  --color-atmosphere: #FFEBC7;
  --color-focus-on-band: var(--color-atmosphere);  /* >= 3:1 vs --color-ink (the board's ground) */


  /* --- Typography ------------------------------------------------------------
     Display: Rye, 400 (its only weight, brief §2.3). Body: Karla, self-hosted
     as ONE variable file spanning 400-700 (brief's explicit call to stay
     inside the 4-file cap while using all four weights the tile specifies).
     Both SIL OFL 1.1, Google Fonts. Fallbacks at the bottom of this file. */

  --font-display: 'Rye', 'Rye Fallback', Georgia, 'Times New Roman', serif;
  --font-body:    'Karla', 'Karla Fallback', Arial, Helvetica, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 700;
  --font-weight-display: 400;   /* Rye's only weight */

  /* Label/sub weights the brief's type table names (500/600) between body
     and CTA/strong. Not a house-required token group on its own, but needed
     so site.css never writes a raw font-weight number outside this file. */
  --font-weight-label: 600;

  /* --- Type scale — clamp() values verbatim from brief §2.3's table
     (computed there across the full 375-1440 range, not just the two ends). */

  --text-hero:  clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  --text-h2:    clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
  --text-body:  clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
  --text-small: 0.8125rem;

  /* Not in brief §2.3's table — a step for the sign-board's own title, which
     sits between --text-body and --text-hero and is not the page h1. Held to
     the house h3 role name so site.css never invents an ad hoc token. */
  --text-h3: clamp(1.05rem, 0.95rem + 0.5vw, 1.5rem);

  /* Header wordmark only — not in brief §2.3's table. Tuned small enough that
     "SunTan Pools" sets on one line at 320px in the header's flex row
     alongside the nav toggle. */
  --text-brand: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);

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

  --tracking-tight: 0em;    /* Rye is not tightened — brief carries no value */
  --tracking-normal: 0em;
  --tracking-wide: 0.09em;  /* eyebrows / small caps — matches tile-b.html's hero-eyebrow */

  /* --- Space — house scale, unmodified (brief §3.1 does not override it). */

  --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 §3.1: --section-gap resolves to --space-xl,
     the house default, at every width — no crossover table needed. */
  --section-gap: var(--space-xl);

  /* --- Layout — house defaults hold (brief does not override). */

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

  /* The hero h1's own line-wrap measure — tighter than the house reading
     measure so the headline sets as a short, centred block rather than
     spanning the full container. Measured on the render: at 375px this
     wraps the copy's actual headline ("Get Your Saturday Back") to 2 lines,
     not the 3 the brief's §3.3 table assumed from the tile's longer
     placeholder text — a shorter real headline than the mock, which only
     gives the CTA more headroom above the fold, never less. */
  --hero-title-measure: 16ch;

  /* A secondary object-study image's own inline cap (repairs & equipment
     index) — narrower than the container so it reads as an illustration,
     not a full-width banner. */
  --image-inline-max: 28rem;

  /* Header's own height, so site.css never writes a raw px for it. Measured
     from the actual rendered header at 375px (space-sm padding top+bottom
     around the 44px "Call Now" tap target) — 77px, not assumed — per brief
     §3.3's instruction that the sticky-stack figure is re-measured on this
     site's own render, never summed from tokens. Combined with the expiry
     bar's own 44px + hairline border, the sticky-stack total the brief's
     101px was a precedent-site target for is 60 + 77 = 137px on this site,
     and the render confirms the primary CTA still lands at y=606px, inside
     the 667px fold, with the target's own margin to spare. */
  --header-height: 4.8125rem;   /* 77px */

  /* --- Hero plaque geometry (brief §3.3, §4.2 — the tile's own construction,
     carried forward at exact px, tokenised so site.css carries no literal). */
  --sign-post-height: 14.375rem;  /* 230px — the field's fixed height */
  --sign-width: 13.125rem;        /* 210px — the field's own width, brief §3.3 */
  --badge-size: 4.875rem;         /* 78px */
  --chime-width: 0.875rem;        /* 14px */

  /* --- Radius / shadow / border -----------------------------------------
     Flat hand-painted sign-shop register (brief §4.4) — small restrained
     radius on the board and controls, no radius-lg/pill anywhere (unused,
     dropped rather than shipped dead, precedent: victors-pool-service-mesa-az). */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;

  --shadow-none: none;
  --shadow-sm: 0 3px 0 rgb(43 30 20 / 0.25);   /* the sign-board's own drop-ledge, brief construction */

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

  /* --- Motion ------------------------------------------------------------
     Reveal timing: house defaults, unmodified (brief §5 names the house
     scroll-reveal system verbatim for sections 3-11). base.css collapses
     durations under prefers-reduced-motion: reduce — no exceptions, spec §8. */

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

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

  /* Signature-move tokens (brief §5, locked from the tile's C2-passed
     values). Three independent, non-common-multiple durations so the two
     ambient loops never re-synchronise. */
  --duration-ray: 0.35s;           /* each ray's own reveal-in */
  --duration-wave-drift: 8s;
  --duration-chime-sway: 7.4s;
  --wave-drift-travel: 0.125rem;   /* 2px — translateX(0)->translateX(2px) */

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

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, subset to house-tech-spec §8's declared
   safe range, identical unicode-range on every face. Both faces come down
   from Google Fonts already limited to the "latin" subset (U+0000-00FF,
   U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
   U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
   U+FEFF, U+FFFD) — a strict superset of the house declared range, so no
   further subsetting pass was needed. Rye — SIL OFL 1.1, Sorkin Type Co.
   Karla — SIL OFL 1.1, The Karla Project Authors. Licence text:
   assets/fonts/OFL-Rye.txt, assets/fonts/OFL-Karla.txt.

   Coverage gap (fontTools cmap read against these exact shipped files):
   both faces lack U+2010/2011/2012/2015/2032/2033; Rye additionally lacks
   U+2122 (™), which Karla carries. Not narrowed for — this site's copy uses
   none of the six missing codepoints and never sets ™ in a Rye context, so
   the one asymmetry never surfaces as a mid-sentence split. Every character
   this copy actually renders (per-mille none, only U+2013/U+2014/U+2026/
   U+00B7 among the non-ASCII set) is carried by both faces.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Rye';
  src: url('../assets/fonts/rye-v-latin-400-normal.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: 'Karla';
  src: url('../assets/fonts/karla-variable-latin-wght.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;
}

/* --- Metrics-matched fallbacks (house-tech-spec §8) -----------------------
   Direct fontTools OS/2+hhea measurements of these exact shipped woff2
   files, via scripts/font-metrics.mjs (English-letter-frequency-weighted
   average char width — fontaine/@capsizecss/next/font's method). Karla's
   numbers match leos-towing-louisville-ky's and victors-pool-service-mesa-az's
   shipped values to two decimal places (same font file, same method).
   Donors: Georgia (for Rye — matches the house §8 example face) and Arial
   (for Karla, matching the Karla precedent already in this registry) — no
   Georgia or Arial binary in this build environment, so the CSS still names
   the real local() faces first, matching what a real browser has; measured
   here against DejaVu Serif (Rye) and Liberation Sans (Karla), each font's
   metric-compatible open-source stand-in. */

@font-face {
  font-family: 'Rye Fallback';
  src: local('Georgia'), local('Georgia Bold');
  font-weight: 400;
  font-style: normal;
  size-adjust: 102.1%;
  ascent-override: 96.6%;
  descent-override: 25.82%;
  line-gap-override: 0%;
}

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

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

/* --- Reduced motion: signature-move tokens ---------------------------------
   base.css's kill switch collapses --duration-fast/-base/-slow at :root; it
   cannot know this brief's own signature tokens, so they are collapsed here
   too. site.css also states explicit end-states (rays opacity:1/scale(1),
   wave/chime no transform) — belt and braces to the arithmetic. */
@media (prefers-reduced-motion: reduce) {
  :root {
    /* @allow-literal: a duration token must resolve to a real time value */
    --duration-ray: 0.01ms;
    --duration-wave-drift: 0.01ms;
    --duration-chime-sway: 0.01ms;
  }
}