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

   Wet Kat Pool Service Southwest (Phoenix, AZ). Values from the approved
   brief (runs/wet-kat-pool-service-southwest-phoenix-az/brief.md §2-§8).
   Family: retro-local. Archetype: split-hero. Palette: flamingo-pink /
   sun-bleached cream, one light mode, no dark band. Signature: the postmark
   presses once on hero load while an independent palm sway and sun-glint
   drift never re-synchronise (brief §6, §8, §11).
   ========================================================================== */

:root {

  /* --- Colour ---------------------------------------------------------------
     Derivation (brief §2): no real-world colour asset exists (dossier §4.5),
     so the departure from "echo the brand colour" is provenance. Phoenix's
     own mid-century "Valley of the Sun" postcard/motor-court signage history
     read through retro-local family norms: two-depth accent (precedent:
     patriot-plumbing, leos-towing, victors-pool-service-mesa-az,
     honest-as-pool-cleaning-las-vegas-nv). Ratios are brief §3's own table,
     independently re-verified. */

  --scheme: light;

  --color-bg: #FBEFE7;                /* sun-bleached cream — page ground */
  --color-surface: #FFFFFF;           /* postcard white — card/panel ground */
  --color-ink: #4A2338;               /* deep plum-maroon — all body text */
  --color-ink-muted: #7C4F63;         /* muted mauve-brown — eyebrows, captions, facts */

  /* Two-depth flamingo (brief §3, hard rule): --color-accent is
     DECORATIVE/RULE-WORK only (2.97:1 vs bg, fails even the 3:1 large-text
     floor there — 3.36:1 large-text-only on white cards). --color-accent-deep
     is the TEXT-BEARING role: CTA fill, links, buttons-as-text. */
  --color-accent: #E85D75;            /* flamingo-pink — decorative/rule-work ONLY */
  --color-accent-deep: #C23A56;       /* deepened flamingo — text-bearing role */
  --color-accent-ink: #FFFFFF;        /* text ON --color-accent-deep fills */

  /* Waterline/postmark motif accent — illustration only, never CSS text/fill
     at any size, any ground (brief §3). */
  --color-vessel: #2F9C97;

  /* House-required structural colours. Not in the brief's palette table as a
     separate role — brief §3 gives it directly: decorative hairline, no
     contrast floor (a divider is not a control). */
  --color-border: #E3D4C4;

  /* CONTROL'S OWN BOUNDARY, WCAG 1.4.11: >= 3:1 vs bg AND surface. Reuses
     --color-ink-muted per brief §3 (5.90:1 bg / 6.65:1 surface). */
  --color-border-strong: #7C4F63;

  /* :focus-visible ring = --color-accent-deep, 4.61:1 bg / 5.21:1 surface
     (brief §3). No dark band anywhere on this site — no on-band ring needed. */
  --color-focus: #C23A56;

  --color-selection-bg: #C23A56;
  --color-selection-ink: #FFFFFF;

  /* Living-hero atmosphere gradient (brief §6, verbatim):
       radial-gradient(110% 80% at 50% 0%, rgba(232,93,117,.22), transparent 55%),
       radial-gradient(90% 60% at 15% 100%, rgba(47,156,151,.14), transparent 55%),
       linear-gradient(180deg, #FBEFE7 0%, #F9D9C8 45%, #F3B9A6 75%, #E89A8C 100%); */
  --color-atmosphere-pink: rgb(232 93 117 / 0.22);
  --color-atmosphere-teal: rgb(47 156 151 / 0.14);
  --color-atmosphere-sky-1: #FBEFE7;
  --color-atmosphere-sky-2: #F9D9C8;
  --color-atmosphere-sky-3: #F3B9A6;
  --color-atmosphere-sky-4: #E89A8C;

  /* --- Typography -------------------------------------------------------------
     Display: Yeseva One, Regular 400 (its only weight, brief §2). Body:
     Karla, variable 200-800 roman + italic (the emphasis role, brief §2).
     Both SIL OFL 1.1, Google Fonts. */

  --font-display: 'Yeseva One', 'Yeseva One 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;   /* Yeseva One's only weight — never synthesized bold */

  /* Type scale — clamp() values verbatim from brief §4's table. */
  --text-eyebrow: clamp(0.7rem, 0.66rem + 0.2vw, 0.78rem);
  --text-hero:    clamp(2.0rem, 1.4rem + 3.2vw, 3.5rem);
  --text-h2:      clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  --text-h3:      clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  --text-lead:    clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --text-body:    clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  --text-small:   0.85rem;   /* fixed, all breakpoints */

  --leading-tight: 1.05;    /* H1 — brief §5.1 */
  --leading-snug: 1.25;
  --leading-body: 1.6;      /* brief §5.1: hero lead */

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

  /* --- Space — house scale, unmodified (brief §4: the dossier's material is
     plain and thin; the house step already fits). */
  --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: house default (64px) — unchanged. */
  --section-gap: var(--space-xl);

  /* --- Layout — house defaults hold. */
  --layout-container: 72rem;
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;

  /* Header's fixed content height (brief §5.1: 56px + 1px border-bottom). */
  --header-height: 3.5rem;

  /* Brief §6/§5.1 living-hero field geometry. */
  --hero-field-height: 14.5rem;   /* 232px — field height at <= 899px */
  --hero-field-min-band: 20rem;   /* 320px — field's own min height at >= 900px */

  --hero-pool-w: calc(var(--hero-field-height) * 1200 / 805);

  /* Split-hero column split at >= 900px (brief §2): 58% text / 42% visual. */
  --hero-text-basis: 58%;
  --hero-visual-basis: 42%;

  /* Static reuse of the postmark ring as a small corner mark opening each
     content section below the hero (brief §6: fixed 28px diameter, never
     scaling with viewport). */
  --postmark-mark-size: 1.75rem;

  /* The hero's own (animated) postmark medallion — not a brief px value;
     sized to read clearly at the field's own minimum height. */
  --postmark-hero-size: 5.5rem;

  /* Visit-list bullet vertical offset, aligned to the item text's own
     line-box rather than a fixed rem step. */
  --visit-dot-offset: 0.55em;

  /* --- Radius / shadow / border -----------------------------------------
     Not stated in the brief — resolved from retro-local precedent (small
     restrained radius on controls, sharp elsewhere). --shadow-none is the
     only shadow token this site consumes (design-rules §4). */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-pill: 999px;   /* the postmark medallion, the glint, the static section mark */
  --shadow-none: none;
  --border-hairline: 1px;
  --border-thick: 3px;
  --border-style: solid;

  /* --- Motion — reveal timing: house defaults (brief §8 names these). */
  --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;

  /* Signature-move tokens (brief §6/§8, locked exact values). 9.6s and 11.2s
     share no small common multiple (ratio 6:7) so the two ambient loops
     drift in and out of phase rather than re-synchronising. The postmark
     press is a one-shot settle, never a loop. */
  --duration-palm: 9600ms;
  --duration-glint: 11200ms;
  --duration-postmark: 1800ms;
  --delay-glint: 1400ms;
  --ease-signature: ease-in-out;
  --ease-linear: linear;

  /* Sun-glint travel (brief §6: translateX(-40px) -> translateX(320px)),
     tokenised — asymmetric, so two values rather than one signed one. */
  --motion-glint-start: -2.5rem;   /* -40px */
  --motion-glint-end: 20rem;       /* 320px */

  /* Palm sway rotation extremes (brief §6: rotate(-3deg) <-> rotate(3deg)). */
  --motion-palm-tilt: 3deg;

  /* Postmark press scale extremes (brief §6: scale(2.2) -> scale(0.92) -> scale(1)). */
  --motion-postmark-start: 2.2;
  --motion-postmark-settle: 0.92;
  --motion-postmark-end: 1;

  /* --- 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. Yeseva One / Karla —
   SIL OFL 1.1. Licence text: assets/fonts/OFL-YesevaOne.txt, OFL-Karla.txt.

   Coverage: both source files (Google Fonts "latin" split) carry the full
   declared range with no gap — no coverage-gap note owed here.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Yeseva One';
  src: url('../assets/fonts/yeseva-one-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-variable-latin.woff2') format('woff2');
  font-weight: 200 800;
  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-italic-variable-latin.woff2') format('woff2');
  font-weight: 200 800;
  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;
}

/* --- Metrics-matched fallbacks (house-tech-spec §8) -----------------------
   fontTools OS/2+hhea measurements of these shipped woff2 files
   (scripts/font-metrics.mjs, letter-frequency-weighted avg char width).
   Yeseva One Fallback vs Gelasio (Georgia's open clone, next/font's own
   substitution — no Georgia binary in this build env). Karla Fallback vs
   Liberation Sans/Italic (Arial's clone) — matches this family's other
   built sites' values to two decimals, same donor file. */

@font-face {
  font-family: 'Yeseva One Fallback';
  src: local('Georgia');
  font-weight: 400;
  font-style: normal;
  size-adjust: 116.56%;
  ascent-override: 78.5%;
  descent-override: 20.59%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial');
  font-weight: 200 800;
  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 Italic'), local('Arial');
  font-weight: 200 800;
  font-style: italic;
  size-adjust: 93.62%;
  ascent-override: 97.95%;
  descent-override: 26.92%;
  line-gap-override: 0%;
}

/* Reduced motion: signature-move tokens. base.css's kill switch collapses
   --duration-fast/-base/-slow at :root; these brief-specific tokens need
   their own collapse. site.css also states explicit end-states. */
@media (prefers-reduced-motion: reduce) {
  :root {
    /* @allow-literal: a duration token must resolve to a real time value */
    --duration-palm: 0.01ms;
    --duration-glint: 0.01ms;
    --duration-postmark: 0.01ms;
  }
}