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

   all-quality-pool-service-company-scottsdale-az — brief.md (C3 approved
   2026-09-30). family `warm-craft`, palette adobe-umber/parchment-cream
   (light only), archetype `route-stack`, signature: a route ticket sways
   beside a skimmer pole and a travelling sun-glint over an outdoor
   coping/waterline/deck vignette. Values cite brief.md by section.
   ========================================================================== */

:root {

  /* --- Colour (brief §2.1). No real-world brand colour to echo (dossier
     §4.5) — adobe-umber derived from local Sonoran/adobe character, pushed
     toward warm-craft's ink/cream/rust family register (design-rules §6). */

  --scheme: light;

  --color-bg: #FBF3E7;                /* warm parchment cream, page ground */
  --color-surface: #F3E6D2;           /* card/alternating-section cream */
  --color-ink: #2E241C;               /* espresso ink, primary text */
  --color-ink-muted: #6B5A47;         /* secondary text, captions, lead copy */
  --color-accent: #B5551F;            /* adobe-umber — LARGE-TEXT (>=28px) /
                                          graphic role only (fails body AA):
                                          H1 accent word, price numerals
                                          >=28px, the rule mark, the glint */
  --color-accent-ink: #8A3F14;        /* deepened umber — body-safe text AND
                                          button fill (6.81:1 bg / 6.09:1
                                          surface, brief §2.1) */

  /* House-required structural colours, recomputed against this warm
     palette rather than left at the skeleton's cool defaults. */
  --color-border: #E4D3B8;            /* DECORATIVE hairlines only — no
                                          contrast floor */
  --color-border-strong: var(--color-accent-ink);  /* CONTROL boundary,
                                          WCAG 1.4.11: >=3:1 vs bg and
                                          surface, reusing the brief's own
                                          validated pair */

  --color-focus: var(--color-accent-ink);
  /* No dark band exists in this design, so --color-focus-on-band is
     omitted rather than left as dead commented code. */

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

  /* Imagery-adjacent utility tones for the hero's CSS overlay (the
     skimmer pole and sun-glint — never baked into the raster, brief §4.1,
     §5). Warm gold, never blue, matching the whole palette. */
  --color-glint: rgb(224 168 92 / 55%);
  --color-glint-core: rgb(250 230 190 / 85%);

  /* Soft radial atmosphere behind the hero field (ref-001, borrowed as
     physics only — brief §1). */
  --color-hero-atmosphere: rgb(181 85 31 / 14%);


  /* --- Typography (brief §2.2). Fraunces (OFL 1.1): 500 roman (default) +
     700 italic (H1's single accent word only, never body). Karla (OFL
     1.1): 400 running text + 600 emphasis. Karla 500 dropped — unused. */

  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --font-body: 'Karla', 'Karla Fallback', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 600;
  --font-weight-display: 500;         /* the italic accent word sets 700
                                          italic directly via .hero__accent */

  /* Fluid type scale (brief §2.2's table, floor/ceiling at 375/1440).
     --text-h3 / --text-lead stay at the house default, unused here. */

  --text-hero: clamp(2rem, 1.5rem + 2.4vw, 3.6rem);     /* the H1 */
  --text-h2: clamp(1.4rem, 1.2rem + 1vw, 2.1rem);
  --text-h3: clamp(1.3rem, 3vw, 1.75rem);               /* house default */
  --text-lead: clamp(1.125rem, 2.2vw, 1.375rem);        /* house default */
  --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --text-small: clamp(0.82rem, 0.78rem + 0.15vw, 0.92rem);
  --text-eyebrow: clamp(0.72rem, 0.66rem + 0.25vw, 0.85rem);

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

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;            /* house default, unused */

  /* Brief-specific tracking values (brief §2.2) — not em-metric-checked:
     tracking, never a position offset. */
  --tracking-eyebrow: 0.13em;
  --tracking-cta: 0.02em;

  /* --- Space (house default, unchanged) ----------------------------------- */

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

  --section-gap: var(--space-xl);     /* brief §3.1: adopts the house default */

  /* --- Layout (house default, unchanged) ---------------------------------- */

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

  /* Site header's measured height. Brief §3.3 rule 3 assumed the house
     default 56px; RENDERED (Playwright, 375 and 1440) it is 77-81.5px,
     because the header always carries one --layout-tap-min (44px) control
     — the hamburger toggle at mobile, the header's own tel: CTA at desktop
     — plus its 32px block padding. Corrected here per the Builder's own
     measurement obligation; used by css/preview.css's sticky-stack
     scroll-margin. */
  --header-height: 5.125rem;          /* 82px, measured */

  /* Hero field's fixed mobile height (brief §3.3: 190px, no shrinking).
     Desktop stretches via grid row-span instead (brief §3.1). */
  --hero-field-height: 11.875rem;     /* 190px */

  /* Ticket's comfortable width floor (brief §2.2: 260px) and the two
     instance widths (hero compact, weekly-plan-offer standalone). */
  --ticket-min-width: 16.25rem;       /* 260px */
  --ticket-width: 19rem;              /* 304px — hero instance */
  --ticket-width-full: 26rem;         /* 416px — weekly-plan-offer instance */

  /* Rule mark's fixed dimensions (brief §3.1: "34x3px"). */
  --rule-width: 2.125rem;             /* 34px */

  /* Sun-glint travel distance and reduced-motion resting point (brief §5). */
  --glint-travel: 11.875rem;          /* 190px */
  --glint-mid: 4.0625rem;             /* 65px */
  --glint-reduced-opacity: 0.7;

  /* --- Radius / shadow / border -------------------------------------------
     Two roles (brief §3.1): --radius-none on the ticket (honest square-
     cornered paper), --radius-sm on the primary CTA. */

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

  /* Shadow recomputed against this site's ink (#2E241C = rgb(46 36 28)). */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(46 36 28 / 0.06);
  --shadow-md: 0 6px 24px rgb(46 36 28 / 0.09);
  --shadow-lg: 0 24px 60px rgb(46 36 28 / 0.14);

  --border-hairline: 1px;
  --border-thick: 3px;                /* the recurring rule mark */
  --border-style: solid;

  /* --- Motion (brief §5) — house reveal system unchanged. */

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

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

  /* The signature move: three independently-timed, non-synchronised loops
     (brief §5), carried forward from the winning tile unchanged. */
  --duration-ticket-sway: 8.6s;
  --rotate-ticket: 1.1deg;
  --duration-pole-sway: 7.1s;
  --rotate-pole: 2deg;
  --duration-sun-glint: 9.4s;

  /* --- Z layers (house default, unchanged) -------------------------------- */
  --z-base: 0;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset. Fraunces: SIL OFL 1.1,
   Undercase Type. Karla: SIL OFL 1.1, Google Fonts. Licences in
   assets/fonts/OFL.txt. Subset to the house declared range, identical on
   all four faces (house-tech-spec §8; brief §2.2).

   COVERAGE GAP (fontTools cmap read, house-tech-spec §8 disclosure):
   U+2010-2012/2015 absent from all four faces; U+2032-2033 additionally
   absent from both Karla instances (present in both Fraunces instances).
   Checked against copy.md, this site's only rendered text: neither gap is
   live — no hyphen-range codepoint beyond ASCII '-' and no prime mark is
   ever rendered (copy.md's own em dashes are internal doc/table syntax,
   verified line by line, never a rendered string). Latent, not a
   mid-sentence split; not narrowed, per house-tech-spec §8. */

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-500.woff2') format('woff2');
  font-weight: 500;
  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: 'Fraunces';
  src: url('../assets/fonts/fraunces-700italic.woff2') format('woff2');
  font-weight: 700;
  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-400.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-600.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;
}

/* --- Metrics-matched fallbacks (house-tech-spec §7/§8). Measured via
   scripts/font-metrics.mjs (fontaine/@capsizecss method, English-letter-
   frequency weighted): webfont vs. the donor that actually resolves for
   each local() name on this build's rendering stack — DejaVu Serif for
   Georgia, Liberation Sans for Arial/Helvetica Neue (confirmed by
   `fc-match`; no Georgia-metric clone is installed to alias against, so
   DejaVu Serif, fontconfig's own generic-serif substitute, is the donor a
   visitor without Georgia actually receives). Verified against Lighthouse
   CLS on this build (see README.md). */

@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  font-weight: 500;
  font-style: normal;
  size-adjust: 91.96%;
  ascent-override: 106.35%;
  descent-override: 27.73%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia Italic'), local('Georgia');
  font-weight: 700;
  font-style: italic;
  size-adjust: 94.16%;
  ascent-override: 103.86%;
  descent-override: 27.08%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial'), local('Helvetica Neue');
  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('Helvetica Neue Bold'), local('Arial'), local('Helvetica Neue');
  font-weight: 600;
  font-style: normal;
  size-adjust: 98.88%;
  ascent-override: 92.74%;
  descent-override: 25.49%;
  line-gap-override: 0%;
}