/* tokens.css: the design brief, compiled. THE ONLY PLACE RAW VALUES LIVE (spec §3).
   Brief: runs/let-it-roll-painting-contractors-toms-river-nj/brief.md — family
   quiet-premium, archetype sidebar-anchor, palette oxidised-verdigris/dune-bone. */

:root {

  /* --- Colour — brief §2, §2.1. One light mode throughout, no dark band. --- */

  --scheme: light;

  --color-bg: #FAF7F0;                /* dune-bone ground */
  --color-surface: #F0EAE0;           /* "Where We Work" card, hairline dividers */
  --color-ink: #1E2A28;               /* headings, primary body text — 13.85:1 on bg */
  --color-ink-muted: #4A5856;         /* secondary text, facts line, rail notes — 6.96:1 on bg */
  --color-accent: #3F6A5E;            /* oxidised verdigris — eyebrow, CTA fill, focus, border-strong */
  --color-accent-ink: #FAF7F0;        /* text on accent fill — 5.71:1 */

  /* Decorative hairlines only, no contrast floor (brief §2.1). */
  --color-border: #F0EAE0;            /* = surface */

  /* Control boundary, WCAG 1.4.11 (>= 3:1 vs bg AND surface): = accent, 5.71:1 / ~5.11:1. */
  --color-border-strong: #3F6A5E;

  --color-focus: #3F6A5E;             /* = accent, validated vs bg and surface (brief §2.1) */

  /* No dark band anywhere on this page (brief §2.1: "single light mode throughout,
     no band ever reads dark enough to need a lighter ring") — left undeclared. */
  /* --color-focus-on-band: …; */

  --color-selection-bg: #3F6A5E;
  --color-selection-ink: #FAF7F0;


  /* --- Typography — brief §3. Libre Caslon Text (display, 400 normal + 400
     italic) + Mulish (body, variable 400–700). Both OFL 1.1, self-hosted.
     Metrics-matched fallbacks below carry the swap so CLS stays 0.000. --- */

  --font-display: 'Libre Caslon Text', 'Libre Caslon Text Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Mulish', 'Mulish Fallback', 'Helvetica Neue', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 600;     /* rail items, services list, nav links, field labels (brief §3) */
  --font-weight-cta: 700;             /* buttons/CTA labels — Tile A's own weight (tiles/tile-a.html .btn) */
  --font-weight-display: 400;         /* h1/h2 — no Libre Caslon Text bold is loaded (brief §3) */

  /* --- Type scale — brief §3.1, stated across its range (375/768/1024/1440). --- */

  --text-hero: clamp(2rem, 1.6vw + 1.7rem, 2.75rem);
  --text-h2: clamp(1.375rem, 1vw + 1.15rem, 1.75rem);
  --text-body: 1rem;                  /* 16px, fixed at every width (brief §3.1) */
  --text-small: 0.8125rem;            /* 13px, fixed at every width (brief §3.1) */

  /* Not itemised in the brief's own table (which stops at hero/h2/body/small):
     structural sizes this page's shell still needs. Derived by continuing the
     same clamp() shape one rung either side of the pinned values, never a free
     literal — h3 for service/process/FAQ item labels (ref-011's "plain,
     unadorned" list typography, brief §1/§5.2, so modest and close to body),
     eyebrow tied to --text-small rather than a seventh figure. */
  --text-h3: clamp(1.0625rem, 0.3vw + 1rem, 1.125rem);
  --text-eyebrow: var(--text-small);

  --leading-tight: 1.08;              /* h1/h2 */
  --leading-snug: 1.25;               /* h3, rail items, buttons */
  --leading-body: 1.6;

  /* Libre Caslon Text is a book-proportioned serif and needs no tightening
     (the same house precedent as aquatic-gardens-and-landscaping-mankato-mn,
     the registry's other Libre Caslon Text site: its own h1 letter-spacing is
     0 throughout). */
  --tracking-tight: 0em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;

  /* --- Space — house scale, unchanged by this brief. --- */

  --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.2): the one inter-section token, 64px fixed
     at every width. Every gap INSIDE a section stays under 128px (2×). */
  --section-gap: var(--space-xl);

  /* --- Layout — brief §4.1, house tokens matched exactly. --- */

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

  /* Per-section narrow columns, brief §5.5's own table: services caps at
     48rem, process/FAQ/gallery at 42rem, the contact form at 34rem — all
     narrower than --layout-container (72rem) and centred within it. */
  --layout-narrow-md: 48rem;
  --layout-narrow-sm: 42rem;
  --layout-narrow-contact: 34rem;

  /* Per-element reading measures, brief §5.5's own table (hero lead/facts,
     service-area card body, services cell, process step, FAQ answer). */
  --measure-hero: 40ch;
  --measure-card: 40ch;
  --measure-cell: 24ch;
  --measure-step: 55ch;
  --measure-answer: 60ch;

  /* Living-hero signature-move geometry (brief §10), Tile A's own pixel
     values (tiles/tile-a.html .sweep/.glint). Named tokens rather than
     scattered @allow-literal comments, since the same few numbers recur
     across the sweep and both glint keyframes. */
  --hero-sweep-width: 10px;
  --hero-sweep-travel-neg: -4px;
  --hero-sweep-travel-pos: 6px;
  --hero-glint-size: 12px;
  --hero-glint-blur: 1px;
  --hero-glint-1-x: 8px;
  --hero-glint-1-y: -6px;
  --hero-glint-2-x: -7px;
  --hero-glint-2-y: 8px;

  /* --- Radius / shadow / border — brief is silent; quiet-premium restraint
     (ref-007, ref-011) reads as no drop shadow anywhere and minimal rounding,
     so --radius-sm is the one step this site spends (service-area card) and
     --radius-pill carries the CTA, both matching Tile A's own rendered CSS
     (tiles/tile-a.html, brief-render.html — "byte-identical in the parts that
     matter", brief's "On the render file" note). --- */

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

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(30 42 40 / 0.06);
  --shadow-md: 0 6px 24px rgb(30 42 40 / 0.09);
  --shadow-lg: 0 24px 60px rgb(30 42 40 / 0.14);

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

  /* --- Motion — brief §10. Reveals use the house base/ease-out/reveal-shift/
     reveal-stagger exactly as specified. base.css collapses every duration
     under prefers-reduced-motion. --- */

  --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 timings (brief §10): the living-hero sweep and its two
     independently-drifting glints. Brief-specific, not part of the general
     reveal scale, named for what they animate rather than a speed step —
     collapsed to ~0 under prefers-reduced-motion by the same rule as above
     (site.css scopes that query). */
  --duration-hero-sweep: 5.4s;
  --duration-hero-glint-1: 6.2s;
  --duration-hero-glint-2: 7.8s;

  /* --- 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 (assets/fonts/OFL-*.txt).
   font-display: swap, a metrics-matched fallback declared BEFORE each real
   face, and the ONE house declared safe range (house-tech-spec §8), identical
   on every face so a mid-sentence split cannot occur. Fetched from Google
   Fonts and subset with fontTools, reused byte-for-byte from the registry's
   other Libre Caslon Text / Mulish-variable sites — same donor files, same
   measured metrics (aquatic-gardens-and-landscaping-mankato-mn for Libre
   Caslon Text; shedhorn-plumbing-helena-mt for Mulish variable). */

@font-face {
  font-family: 'Libre Caslon Text Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 120.79%;
  ascent-override: 80.3%;
  descent-override: 21.52%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Libre Caslon Text Fallback';
  src: local('Georgia'), local('Times New Roman');
  font-style: italic;
  size-adjust: 118.36%;
  ascent-override: 81.96%;
  descent-override: 21.97%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Mulish Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  ascent-override: 96.2%;
  descent-override: 23.93%;
  line-gap-override: 0%;
  size-adjust: 104.47%;
}

@font-face {
  font-family: 'Libre Caslon Text';
  src: url('../assets/fonts/librecaslontext-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: 'Libre Caslon Text';
  src: url('../assets/fonts/librecaslontext-400italic.woff2') format('woff2');
  font-weight: 400;
  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: 'Mulish';
  src: url('../assets/fonts/mulish-variable-latin.woff2') format('woff2');
  font-weight: 400 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;
}