/* ==========================================================================
   tokens.css — South Point Pool Service (Naples, FL). Compiled from the
   approved brief (runs/south-point-pool-service-naples-fl/brief.md §2).
   Family: bold-industrial. Archetype: band-rhythm ("The Dispatch Plate").
   Palette: flare-orange / worklight-ivory, light. Display: Archivo.
   Body: Barlow. THIS IS THE ONLY PLACE RAW VALUES LIVE (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour (brief §2.1). Owner's sampled navy #000080 (dossier §4.5, 2
     V-tier sightings) echoed as ink/structure, never ground — 3 named
     competitors already occupy blue/white as ground (dossier §4.6). Owner's
     unclaimed sunburst orange-red #FF4500 promoted to dominant accent. */

  --scheme: light;

  --color-bg: #FAF5EC;                /* page ground — worklight-ivory */
  --color-surface: #F1E9DA;           /* raised panels — service-index rows, About/service-area/FAQ cards */
  --color-ink: #000080;               /* primary text on light grounds — exact sampled brand hex */
  --color-ink-muted: #35406B;         /* secondary text on light grounds — eyebrow, lead, facts, footer */

  /* The dispatch plate's own recessed fill — a deepened derivative of
     --color-ink, not a fourth independent hue (brief §2.1 tile-stage
     correction 1, replacing the tile's off-token gradient literals). */
  --color-ink-deep: #06003D;

  /* TWO-DEPTH ORANGE (brief §2.1 hard rule — read the GROUND before use).
     --color-accent: large/UI-only on light grounds (3.17:1 bg, FAILS on
     surface 2.85:1), body-safe on the navy band (4.65-5.68:1).
     --color-accent-text: the mirror — body-safe on light grounds, FAILS on
     navy (2.67:1) — never used there. */
  --color-accent: #FF4500;            /* flare-orange — large numerals, rule-work, icon fills; body-safe on the navy band only */
  --color-accent-text: #B23A00;       /* ember-maroon — eyebrow, kicker, bullet markers, inline accent on LIGHT grounds only */
  --color-accent-ink: #000080;        /* text ON --color-accent fills (= --color-ink) — the one filled-button role */

  /* The navy band's own text roles (trust band, request-form band). */
  --color-band-ink: #FFFFFF;          /* primary text on the navy band */
  --color-band-ink-muted: #DFE3EE;    /* secondary text on the navy band — proof-strip labels, review attribution */
  --color-band-ink-soft: #C9CEDE;     /* tertiary text on the navy band — index-row descriptions */

  --color-border: #DCD3BE;            /* DECORATIVE hairlines only — section dividers */

  /* Control boundary, WCAG 1.4.11 (>=3:1 vs bg AND surface): ink-muted
     clears both (9.22:1 on bg) — reused, not invented. */
  --color-border-strong: #35406B;

  --color-focus: #B23A00;             /* :focus-visible ring on light grounds — 5.53:1 on bg */
  --color-focus-on-band: #FF4500;     /* :focus-visible ring on the navy band — 4.65:1 */

  --color-selection-bg: #B23A00;
  --color-selection-ink: #FAF5EC;

  /* QA r1 fixes — azure, sampled (brief §2.1); plate panel, derived not literal. */
  --color-aqua: #0080FF;
  --color-plate-panel: color-mix(in srgb, var(--color-ink-deep) 45%, transparent);

  /* --- Typography (brief §2.2). 2 families, 4 static woff2 files (§5
     ceiling) — not variable, so §8's font-variation-settings/wght trap
     does not arise. Self-hosted Google Fonts latin, house-subset. */

  --font-display: 'Archivo', 'Archivo Fallback', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', 'Barlow Fallback', 'Helvetica Neue', Arial, sans-serif;

  --font-weight-display: 800;         /* H2/section titles, CTA labels, index-row names, plate label */
  --font-weight-display-heavy: 900;   /* H1, kicker/eyebrow-on-plate, index numerals, spec-display */
  --font-weight-body: 400;            /* body copy, lead, index-row descriptions, FAQ answers */
  --font-weight-body-strong: 600;     /* facts line, proof-strip labels, plate sub-label, review attribution */

  /* Fluid scale — brief §2.2 table, clamp()s copied byte-identical. Floor
     375px, ceiling 1440px (most cross over well before). */

  --text-hero:    clamp(2.25rem, 1.5rem + 3.2vw, 4.2rem);     /* H1: 36.0px -> 67.2px ceiling @1350 */
  --text-h2:      clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);     /* section titles: 24.5px -> 36.0px ceiling @1200 */
  --text-h3:      clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);  /* FAQ question labels, proof-strip category labels: 18.7px -> 22.0px ceiling @1040 */
  --text-lead:    clamp(1.05rem, 1rem + 0.3vw, 1.25rem);      /* hero lead line: 17.1px -> 20.0px ceiling @1333 */
  --text-body:    1rem;                                        /* body copy, index-row descriptions, FAQ answers — fixed */
  --text-small:   0.85rem;                                     /* facts line, footer, proof-strip labels, plate sub-label — fixed */
  --text-eyebrow: 0.8rem;                                      /* eyebrow, kicker — fixed */
  --text-numeral: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);       /* index-row numerals, proof-strip figures: 22.5px -> 32.0px ceiling @1236 */

  --leading-tight: 1.03;    /* display — matches the tile */
  --leading-snug: 1.2;      /* eyebrow, small labels */
  --leading-body: 1.55;     /* body */

  --tracking-tight: -0.01em;  /* h1/h2/h3 letter-spacing — a real measurement carried from the tile's own hero h1 */
  --tracking-normal: 0em;
  --tracking-wide: 0.06em;    /* eyebrow/uppercase labels — matches the tile's 0.04em, rounded to a token and slightly widened */

  /* --- Space (brief §2.3 — house scale). ----------------------------------- */

  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs: 0.75rem;    /* 12px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.5rem;     /* 24px */
  --space-lg: 2.5rem;     /* 40px */
  --space-xl: 4rem;       /* 64px */
  --space-2xl: 6rem;      /* 96px */
  --space-3xl: 9rem;      /* 144px */

  /* Inter-section rhythm (design-rules §7.1). Snappier than the house 96px
     option, argued from family norms: bold-industrial reads "no-nonsense"
     and a page built as one running instrument ledger earns the tighter
     rhythm (brief §2.3). */
  --section-gap: var(--space-xl);   /* 64px */

  /* --- Layout: brief §4, single centred column below the hero.
     --layout-measure is the narrower prose figure (720px — About, FAQ);
     --layout-ledger is the brief's named ruled/bordered figure (960px —
     service index, trust band, proof strip). --layout-container stays
     house default for the nav row and the two-column hero. */

  --layout-container: 72rem;          /* 1152px */
  --layout-measure: 45rem;            /* 720px */
  --layout-ledger: 60rem;             /* 960px */
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;             /* WCAG touch floor; expiry bar height */

  /* Sticky-chrome term (spec §7.2 rule 3): MEASURED stack height — 44
     (expiry) + 56 (header) + 1 (border) = 101px, the house figure. */
  --size-header-height: 3.5rem;       /* 56px */
  --size-sticky-chrome: 6.3125rem;    /* 101px = 44 + 56 + 1 */

  /* Radius/shadow/border (brief §2.3): --radius-sm on buttons/inputs/the
     plate (tile-matched 4px); --radius-none on index rows/hairlines/FAQ —
     square objects. --shadow-none only — hairlines, never a drop shadow. */

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

  --shadow-none: none;

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

  /* Motion (brief §2.3/§6). base.css collapses fast/base/slow under
     reduced motion (spec §8); the hero's signature motion uses its own
     named tokens below, separately gated in site.css. */

  --duration-fast: 140ms;     /* hover / focus */
  --duration-base: 320ms;     /* house default, collapsed identically under reduced motion */
  --duration-slow: 500ms;     /* section-entry reveal — brief's --duration-reveal */

  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* scroll reveals */
  --ease-overshoot: cubic-bezier(.2, .8, .2, 1);  /* the needle's overshoot curve — tile's own */
  --ease-ambient: ease-in-out;                     /* any ambient element, never linear */

  --reveal-shift: 1.25rem;
  --reveal-stagger: 90ms;

  /* Hero signature timings — "the gauge reads the route" (brief §6),
     tile-specified values, unchanged. */
  --duration-glint: 8.8s;       /* four-rivet glint ENVELOPE (doc figure) — each rivet's own duration is below */
  --duration-rivet-tl: 6.2s;    /* top-left rivet — no delay */
  --duration-rivet-tr: 7.4s;    /* top-right rivet */
  --delay-rivet-tr: 0.6s;
  --duration-rivet-bl: 8.1s;    /* bottom-left rivet */
  --delay-rivet-bl: 1.4s;
  --duration-rivet-br: 5.6s;    /* bottom-right rivet */
  --delay-rivet-br: 2.1s;
  --duration-needle: 9s;        /* the gauge-needle settle-and-rest cycle */
  --duration-sweep: 6.8s;       /* the waterline sun-glint sweep */

  /* --- Component sizing — brief-specific one-offs off the space scale. --- */
  --size-headmark-dot: var(--space-2xs);   /* corner-rivet head-mark dot — 8px, never scales down (brief §4) */
  --size-headmark-rule: var(--space-md);   /* head-mark hairline — 24px, yields first if a label runs long */
  --size-index-num-width: 2.5ch;           /* service-index numeral column */
  --size-proof-num-width: 9ch;             /* proof-strip figure column, so the four items align */
  --size-rivet: 9px;                       /* the plate's corner rivets — tile-matched, a fixed decorative dot */
  --size-needle-width: 2px;                /* the gauge needle's stroke width — tile-matched */
  --size-divider-square-max: 12rem;        /* image slot 2 (service-index divider) cap */
  --size-faq-marker-width: 1em;            /* FAQ +/- marker column */

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

/* @font-face — self-hosted woff2, SIL OFL 1.1 (Archivo/Barlow, design-rules
   §5's bold-industrial pool, not watch-listed). Static instances, subset to
   the house declared safe range with pyftsubset, byte-identical
   unicode-range on every face. Licences: assets/fonts/OFL-Archivo.txt,
   assets/fonts/OFL-Barlow.txt. */

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-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: 'Archivo';
  src: url('../assets/fonts/archivo-900-latin.woff2') format('woff2');
  font-weight: 900;
  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: 'Barlow';
  src: url('../assets/fonts/barlow-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: 'Barlow';
  src: url('../assets/fonts/barlow-600-latin.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 (spec §7/§8) — MEASURED via
   scripts/font-metrics.mjs (fontaine algorithm) against the shipped,
   subset webfonts. Donor: Liberation Sans / Bold (Arial's metric clone —
   the only proxy on this build host); the shipped local() stack still
   names the brief's first-choice face first. See README.md's Fonts
   section. */

@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial Narrow Bold'), local('Arial Narrow'), local('Arial Bold'), local('Arial');
  font-weight: 800;
  font-style: normal;
  size-adjust: 102.38%;
  ascent-override: 85.76%;
  descent-override: 20.51%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial Narrow Bold'), local('Arial Narrow'), local('Arial Bold'), local('Arial');
  font-weight: 900;
  font-style: normal;
  size-adjust: 109.29%;
  ascent-override: 80.33%;
  descent-override: 19.21%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Helvetica Neue'), local('Arial');
  font-weight: 400;
  font-style: normal;
  size-adjust: 96.96%;
  ascent-override: 103.14%;
  descent-override: 20.63%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Helvetica Neue Bold'), local('Arial Bold');
  font-weight: 600;
  font-style: normal;
  size-adjust: 91.42%;
  ascent-override: 109.38%;
  descent-override: 21.88%;
  line-gap-override: 0%;
}