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

   Victor's Pool Service (Mesa, AZ). Every value below is from the approved
   brief (runs/victors-pool-service-mesa-az/brief.md §2-§8). Family:
   retro-local. Archetype: poster-hero. Palette: carnival-marigold /
   parchment-cream, one light mode, no dark band. Signature: the hung enamel
   sign swings on its own slow arc, a saguaro sways beside it on an
   independent slower rhythm, and a sun-glint travels the field between them
   (brief §6).
   ========================================================================== */

:root {

  /* --- Colour --------------------------------------------------------------
     Derivation (brief §2): no real-world colour exists (dossier §4.5 Gap
     #7), so the departure from "echo the brand colour" is provenance, not
     preference. East Valley desert character, read through retro-local
     norms: sign-painter register, warm parchment ground, two-depth accent
     (precedent: patriot-plumbing, leos-towing). Ratios are brief §3's own
     table, independently re-verified. */

  --scheme: light;

  --color-bg: #F7EFDC;                /* parchment-cream — page ground */
  --color-surface: #EFE2C4;           /* deeper cream — cards, chips */
  --color-ink: #241B12;               /* near-black warm brown — body text */
  --color-ink-muted: #6B5A3E;         /* muted brown — eyebrows, secondary copy */

  /* Two-depth carnival-marigold (brief §3, hard rule): --color-accent is
     DECORATIVE/RULE-WORK only — never text (2.92:1 on bg, fails 3:1).
     --color-accent-deep is the TEXT-BEARING role. */
  --color-accent: #C97A1E;            /* bright — decorative/rule-work ONLY */
  --color-accent-deep: #8C5314;       /* deepened — every text role */
  --color-accent-ink: #FFF8EA;        /* text ON --color-accent-deep fills */

  /* Waterline-pinstripe accent — illustration only, never CSS text/fill. */
  --color-teal-echo: #1F5C55;

  /* House-required structural colours. Decorative hairline, no contrast
     floor (a divider is not a control). */
  --color-border: #CEC0A3;

  /* CONTROL'S OWN BOUNDARY, WCAG 1.4.11: >= 3:1 vs bg AND surface. =
     --color-ink-muted, 5.81:1 bg / 5.18:1 surface (brief §3). */
  --color-border-strong: #6B5A3E;

  /* :focus-visible ring — = --color-accent-deep, 5.45:1 bg / 4.86:1 surface. */
  --color-focus: #8C5314;
  /* No dark band on this site — --color-focus-on-band not declared. */
  /* --color-focus-on-band: …; */

  --color-selection-bg: #8C5314;
  --color-selection-ink: #FFF8EA;

  /* Composited layers — here because site.css may carry no literal. The
     living-hero atmosphere gradient, brief §6, verbatim:
       radial-gradient(120% 90% at 50% 0%, rgba(201,122,30,.35), transparent 62%),
       radial-gradient(90% 70% at 15% 100%, rgba(31,92,85,.28), transparent 55%),
       linear-gradient(180deg, #fbeecb 0%, #f1dcae 55%, #e3c78a 100%);
     First two stops are --color-accent / --color-teal-echo at reduced
     opacity. Ground stops are distinct lighter parchment tones the brief
     gives directly. */
  --color-atmosphere-accent: rgb(201 122 30 / 0.35);
  --color-atmosphere-teal: rgb(31 92 85 / 0.28);
  --color-atmosphere-ground-top: #FBEECB;
  --color-atmosphere-ground-mid: #F1DCAE;
  --color-atmosphere-ground-bottom: #E3C78A;

  /* --- Typography ------------------------------------------------------------
     Display: Bungee, Regular 400 (its only weight, brief §2). Body: Karla,
     static 400/700 only — not 500/600, to hold 3 woff2 files total. Both
     SIL OFL 1.1, Google Fonts. Fallbacks at the bottom of this file. */

  --font-display: 'Bungee', 'Bungee Fallback', Arial, Helvetica, sans-serif;
  --font-body:    'Karla', 'Karla Fallback', Arial, Helvetica, sans-serif;

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

  /* --- Type scale — clamp() values verbatim from brief §4's table
     (computed there at 375/640/900/1440). */

  --text-eyebrow: clamp(0.72rem, 0.68rem + 0.15vw, 0.82rem);
  --text-display: clamp(2.1rem, 1.5rem + 2.7vw, 3.7rem);   /* H1 */
  --text-h2:      clamp(1.4rem, 1.25rem + 0.9vw, 1.9rem);
  --text-body:    clamp(1rem, 0.96rem + 0.18vw, 1.1rem);
  --text-small:   clamp(0.85rem, 0.82rem + 0.1vw, 0.95rem);

  /* Header wordmark only — not in brief §4's table. Brief §5.1's
     one-line-at-360px check assumes ~13px there; tuned to 13.3px/360px,
     16.8px/1440px. Named apart from --text-h3 (board headings, larger) so
     the two roles cannot collide — site.css points .site-header__brand at
     this token instead of the skeleton's generic --text-h3. */
  --text-brand: clamp(0.8125rem, 0.72rem + 0.5vw, 1.05rem);

  /* Sign-board headings ("Weekly Care" etc., brief §6.2) and any card/
     sub-section title. Not in brief §4's table — a step between
     --text-body and --text-h2. */
  --text-h3: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);

  --leading-tight: 1.0;    /* H1 — brief §5.1: "two lines, line-height:1.0" */
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-tight: 0em;    /* Bungee not tightened — brief carries no value */
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;  /* eyebrow — house default */

  /* --- Space — house scale, unmodified. */

  --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 §4/§7.1: the tile's free clamp() value is
     fixed to this house step — already the default, no override 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;

  /* Header's fixed height (design-rules §7.2 rule 3's house shape: 56px +
     1px border-bottom = 101px sticky-stack total with the 44px expiry bar).
     min-height so the row resolves to this regardless of the 44px CTA
     button — brief §5.1's first-screen arithmetic depends on it. */
  --header-height: 3.5rem;   /* 56px */

  /* Brief §6 living-hero field geometry. */
  --hero-field-height: 15.125rem;  /* 242px — field height at <= 767px */
  --hero-band-min: 20rem;          /* 320px — min field-band height at >= 900px */
  --hero-text-max: 32rem;          /* text column max-width at >= 900px */

  /* Sign-board ornament dot (brief §6.2: "34x34px"). */
  --board-dot-size: 2.125rem;      /* 34px */

  /* --- Radius / shadow / border -----------------------------------------
     Not stated in the brief — a genuine gap, flagged in the Builder's
     handback. Resolved from retro-local precedent (patriot-plumbing,
     leos-towing: small restrained radius on controls, sharp elsewhere) and
     the brief's flat, hand-painted sign-shop register (§7.1). --radius-lg
     and --radius-pill are unused, dropped rather than shipped dead. */

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

  --shadow-none: none;      /* the only shadow token this site consumes —
                                design-rules §4 bans a shadow on every card */

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

  /* --- Motion — reveal timing: house defaults, unmodified (brief §8 names
     these exact values). 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 §6, locked from the tile's C2-passed
     values). Three independent, non-common-multiple durations so the loops
     never re-synchronise. --ease-ambient is DELIBERATELY DISTINCT from the
     house --ease-in-out cubic-bezier above — the brief's keyframes want the
     plain CSS "ease-in-out" keyword, not the house bezier (leos-towing
     precedent, same collision). */
  --duration-sign-swing: 5.6s;
  --duration-saguaro-sway: 8.2s;
  --duration-sun-glint: 7s;
  --ease-ambient: ease-in-out;
  --ease-linear: linear;

  /* Sun-glint horizontal travel (brief §6: translateX(±20px)) — tokenised
     because a raw px literal is banned outside this file. 20px = 1.25rem. */
  --motion-glint-travel: 1.25rem;

  /* --- 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. Bungee — SIL OFL 1.1,
   The Bungee Project Authors. Karla — SIL OFL 1.1, The Karla Project
   Authors. Licence text: assets/fonts/OFL.txt.

   Coverage gap: U+2010/2011/2012/2015 absent from Bungee; Karla additionally
   missing U+2032/2033 (fontTools cmap read against these exact shipped
   files). Not narrowed for — both faces lack the same set, so any page
   falls to the fallback consistently across every face, never mid-sentence.
   None of the six render in this site's copy (only U+2013, U+2014, U+2026,
   U+00B7, U+00AE are used, and every face carries those four).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bungee';
  src: url('../assets/fonts/bungee-400-latin.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-400-latin.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-700-latin.woff2') format('woff2');
  font-weight: 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
   two numbers were independently re-derived this pass and match
   leos-towing-louisville-ky's shipped values to two decimal places (same
   font file, same method). Donor: Arial — no Arial binary in this build
   environment, so the CSS still names local('Arial') first, matching a real
   browser's own system font; measured here against Liberation Sans,
   Arial's metric-compatible clone, which this environment has. */

@font-face {
  font-family: 'Bungee Fallback';
  src: local('Arial'), local('Arial Black');
  font-weight: 400;
  font-style: normal;
  size-adjust: 139.91%;
  ascent-override: 72.9%;
  descent-override: 21.44%;
  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: 100.06%;
  ascent-override: 91.64%;
  descent-override: 25.18%;
  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 (sign rotate(0),
   glint hidden) — 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-sign-swing: 0.01ms;
    --duration-saguaro-sway: 0.01ms;
    --duration-sun-glint: 0.01ms;
  }
}