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

   J's Pool Solutions (Orlando, FL) — brief.md, "the kept easy" concept,
   fresh-organic family, sunbeam-gold palette, split-hero archetype.
   Every value below is transcribed from the approved brief §2; nothing here
   is improvised. THIS FILE IS THE ONLY PLACE RAW VALUES LIVE.
   ========================================================================== */

:root {

  /* --- Colour --------------------------------------------------------------
     Brief §2.1. Derivation: no real-world brand colour exists (dossier front
     matter, §4.5) and no local motif argues a hue, so derivation lands on
     family norms, pushed for distinctiveness against three named Orlando
     competitors who all sit on blue/white/navy (dossier §4.6). Sunbeam-gold
     is the deliberate, argued departure — never blue. One deliberate mode
     (light), no dark variant. Contrast table: brief §2.2. */

  --scheme: light;

  --color-bg: #FBF6EC;                /* coconut-cream — page ground */
  --color-surface: #F3EBDA;           /* raised/alternating band ground */
  --color-ink: #332B22;               /* warm-charcoal — body + heading text */
  --color-ink-muted: #6B6154;         /* secondary text */
  --color-accent: #D99A2B;            /* sunbeam-bright — DECORATIVE ONLY, never text at any size (brief §2.2: 2.26:1 on bg, fails even large-text AA) */
  --color-accent-ink: #FFFFFF;        /* text/icons that sit ON --color-accent-deep */

  /* House-required structural colours (consumed by base.css) */
  --color-border: #E3D5B4;            /* DECORATIVE hairlines only — visit-list row dividers, section rules. No contrast floor (matches house convention). */

  /* A CONTROL'S OWN BOUNDARY, WCAG 1.4.11: >= 3:1 against bg AND surface. */
  --color-border-strong: #8A6B3E;

  --color-focus: #96650E;             /* :focus-visible ring — same as accent-deep, already >=3:1 on both grounds (4.68:1 / 4.28:1, brief §2.2) */

  /* No dark band on this site (one deliberate light mode only, brief §2.1) —
     --color-focus-on-band left unset, per the house comment's own instruction. */

  --color-selection-bg: #96650E;
  --color-selection-ink: #FFFFFF;

  /* Brief-specific colours (§2.1) ------------------------------------------
     accent-deep is the ONE text-safe accent role: eyebrow, section kickers,
     visit-list ring marks, CTA fill. May carry text only on --color-bg, NEVER
     on --color-surface (4.28:1 there — fails body AA; brief's build
     constraint, §2.2). */
  --color-accent-deep: #96650E;       /* sunbeam-deep — the one text-safe accent role */

  /* Hero-atmosphere tokens (brief §2.1) — feed the CSS gradient wash sitting
     BEHIND the generated hero photograph, so the photo and its CSS surround
     read as one continuous scene at every crop. Not a second palette. */
  --color-hero-sky-from: #FBEBC6;
  --color-hero-sky-to: #FBF6EC;       /* stop position: 62% (brief §2.1) — call site states it explicitly */
  --color-hero-deck-from: #EEDFB8;
  --color-hero-deck-to: #E3D19E;
  --color-hero-water-from: #F6EBCB;
  --color-hero-water-to: #ECDCAF;

  /* --- Typography ------------------------------------------------------
     Brief §2.3. Both OFL 1.1, self-hostable. Gantari 800 (display, single
     weight throughout) + Nunito Sans 400/700 (body). No emphasis face — a
     deliberate two-voice system (brief §2.3). Metrics-matched fallbacks
     below, measured against Liberation Sans (Arial-metric-compatible). */

  --font-display: 'Gantari', 'Gantari Fallback', ui-sans-serif, sans-serif;
  --font-body: 'Nunito Sans', 'Nunito Sans Fallback', ui-sans-serif, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 700;
  --font-weight-display: 800;

  /* --- Type scale --------------------------------------------------------
     Brief §2.3 — computed at floor, ceiling, 375px and 1440px. */

  --text-hero: clamp(2.3rem, 5.8vw + 1rem, 4rem);
  --text-h2: clamp(1.4rem, 2.6vw + 0.9rem, 2rem);
  --text-h3: clamp(1.15rem, 1.6vw + 0.85rem, 1.5rem);
  --text-lead: clamp(1.05rem, 0.6vw + 0.95rem, 1.25rem);
  --text-body: clamp(1rem, 0.35vw + 0.92rem, 1.1rem);
  --text-small: 0.875rem;
  --text-eyebrow: 0.8125rem;

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

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

  /* --- Space ---------------------------------------------------------------
     House scale, unchanged — brief §2.4 makes no case for a custom step. */

  --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 §2.4: 4rem / 64px */

  /* --- Layout ----------------------------------------------------------- */

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

  /* Brief §3.1 hero-scene field height at 375px — fixed, per the arithmetic
     table (190px, chosen under the tile's 210px demo to preserve fold
     margin). At >=64em the split-hero column stretches to the text column's
     row height instead (site.css), so this token governs mobile only. */
  --hero-scene-height: 11.875rem;     /* 190px */

  /* Sticky-chrome header height, MEASURED on the real rendered build
     (brief §3.4: "wordmark, tel: link, sticky, per design-rules.md §6";
     design-rules.md §7.2 rule 3: the sticky-chrome term is the measured
     stack height, never the sum of tokens). Rendered .site-header height —
     dominated by the nav-toggle's 44px touch-target floor, not by the
     brand text — is 77px at 375px and 81px at 1440px; this token rounds up
     to one safe value for the scroll-margin convenience offset used when a
     same-page nav link lands under the sticky stack. The FOLD arithmetic
     itself (brief §3.1) uses the exact measured numbers, not this rounded
     token. */
  --header-height: 5rem;              /* 80px, rounds up from measured 77-81px */

  /* --- Radius / shadow / border ---------------------------------------------
     Brief §2.4: --radius-pill for the CTA only, --radius-md for the
     visit-list marks' circular context (they're circles, drawn with a
     literal 50%, not a token call). Everything else --radius-none —
     the concept's restraint, no uniform-rounding default (design-rules §4). */

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

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(51 43 34 / 0.06);
  --shadow-md: 0 6px 24px rgb(51 43 34 / 0.09);
  --shadow-lg: 0 24px 60px rgb(51 43 34 / 0.14);

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

  /* --- Motion ----------------------------------------------------------
     Brief §5. Standard reveal: --duration-base / --ease-out. The living-hero
     satellites (sun-breathe, ripple-out, petal-drift) carry brief-specific
     timings, declared as their own tokens so no raw duration literal sits
     in site.css. base.css's reduced-motion kill switch collapses the shared
     --duration-* tokens; these three are collapsed by the same media query
     in site.css (brief §5's explicit reduced-motion statement, pinned
     positions rather than raw base state). */

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

  --duration-sun: 7.2s;
  --duration-ripple: 5.6s;
  --duration-petal: 9.4s;

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

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

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, subset to the house declared safe range
   (house-tech-spec §8), font-display: swap. OFL 1.1 (design-rules §5).

   Gantari 800 (static instance, not variable — brief §2.3's woff2 file list)
   and Nunito Sans 400 + 700 (static instances). Fallback faces measured with
   scripts/font-metrics.mjs against Liberation Sans (Arial-metric-compatible),
   2026-09-29.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Gantari';
  src: url('../assets/fonts/gantari-800-latin.woff2') format('woff2');
  font-weight: 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: 'Nunito Sans';
  src: url('../assets/fonts/nunito-sans-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: 'Nunito Sans';
  src: url('../assets/fonts/nunito-sans-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). Measured 2026-09-29 with
   scripts/font-metrics.mjs against /usr/share/fonts/truetype/liberation/
   LiberationSans-{Regular,Bold}.ttf (Arial-metric-compatible), one override
   set per real face + weight actually used:

     Gantari 800        vs Liberation Sans Bold    → 96.71 / 98.23 / 25.85 / 0
     Nunito Sans 400     vs Liberation Sans Regular → 101.55 / 99.55 / 34.76 / 0
     Nunito Sans 700     vs Liberation Sans Bold    → 97.73 / 103.44 / 36.12 / 0

   Coverage note (house-tech-spec §8, "a declared codepoint no face carries"):
   U+2010, U+2011, U+2012, U+2015 are absent from all three shipped faces, and
   Gantari 800 additionally lacks U+2032/U+2033 — the same class of gap
   already recorded for the house's two pilot faces. None of these
   codepoints is rendered anywhere in this site's copy (no hyphen/dash
   variants beyond U+002D, no feet/inch marks), so the gap is inert here;
   recorded rather than silently shipped, range not narrowed (it is a
   house-wide constant, not a per-site choice). */

@font-face {
  font-family: 'Gantari Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 800;
  size-adjust: 96.71%;
  ascent-override: 98.23%;
  descent-override: 25.85%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Nunito Sans Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  size-adjust: 101.55%;
  ascent-override: 99.55%;
  descent-override: 34.76%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Nunito Sans Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 700;
  size-adjust: 97.73%;
  ascent-override: 103.44%;
  descent-override: 36.12%;
  line-gap-override: 0%;
}