/* ==========================================================================
   tokens.css — the design brief, compiled (house-tech-spec §3).
   Source: runs/elite-professional-lawn-and-landscape-san-antonio-tx/brief.md
   — §2 (type), §3 (palette), §4.2/§4.3 (layout + plate geometry), §7 (motion).
   Every value below traces to a brief section cited inline; where base.css/
   site.css need a token the brief's own role table does not name, the value
   is either the unmodified house default (infrastructure, not an aesthetic
   choice) or a value tokenised from an exact figure already in the brief's
   own arithmetic (§5), called out inline.
   ========================================================================== */

:root {

  /* --- Colour (brief §3.2) ------------------------------------------------- */
  --scheme: light;

  --color-bg:              #F0EDE6;  /* warm parchment — the page ground */
  --color-surface:         #FFFFFF;  /* the two material plates, the CTA card, form fields */
  --color-surface-sunken:  #E7E2D6;  /* Trust-strip / Reviews band ground — one step deeper than bg */
  --color-ink:             #262B27;  /* cedar-ink — near-black with a whisper of the accent's green */
  --color-ink-muted:       #5E655F;  /* secondary text */
  --color-accent:          #4B5D52;  /* CEDAR-SHADOW — dominant hue, hsl(143.5°, 10.7%, 32.9%) */
  --color-accent-ink:      #FFFFFF;  /* text ON the accent fill */
  --color-accent-hover:    #374A40;  /* :hover/:active state — one step darker than accent */
  --color-border:          #DED7C8;  /* DECORATIVE hairlines only — no contrast floor */
  --color-border-strong:   #5E655F;  /* = ink-muted, reused: nav-toggle boundary, >=3:1 (brief §3.2) */
  --color-focus:           #4B5D52;  /* = accent — clears 3:1 against bg and surface (brief §3.3) */
  --color-selection-bg:    #4B5D52;
  --color-selection-ink:   #FFFFFF;

  /* Hero atmosphere stops — NAMED so contrast is computed against the
     ground's actual extremes and never against a flat token (brief §3.2/§3.4,
     design-rules §6). --color-atmos-lo is the darkest of the three stops and
     is what every hero text pairing in §3.4 below is computed against. */
  --color-atmos-hi:  #F8F5EE;
  --color-atmos-mid: #F0EDE6;  /* == --color-bg */
  --color-atmos-lo:  #E4E0D4;

  /* --- Typography (brief §2.1/§2.6) ----------------------------------------
     Fallback bases per brief §2.5: Times New Roman (Bodoni Moda), Arial
     (Mulish). A second local() donor follows each — Liberation Serif/Sans,
     Red Hat's metric-compatible substitutes, and the donor this build/QA
     Chromium actually resolves by name (README.md: same fix
     all-seasons-lawn-maintenance-houston-tx recorded the same day —
     Chromium's local() does not follow fontconfig's alias substitution).
     Overrides below are MEASURED against Liberation Serif/Sans. */
  --font-display: 'Bodoni Moda', 'Bodoni Moda Fallback', 'Times New Roman', serif;
  --font-body:    'Mulish', 'Mulish Fallback', Arial, 'Helvetica Neue', sans-serif;

  --font-weight-display: 400;   /* always italic — see site.css's h1-h4/wordmark rule */
  --font-weight-body:    400;
  --font-weight-body-strong: 700;

  --leading-tight: 1.1;    /* H1 */
  --leading-snug:  1.2;    /* h2/h3, section heads */
  --leading-body:  1.6;    /* prose, plate captions, quotes, form */
  --leading-caps:  1.4;    /* eyebrow, index numerals, footer meta */

  --tracking-caps:  0.08em;  /* eyebrow, index numerals, plate tags */
  --tracking-tight: 0em;     /* headings — Bodoni Moda reads correctly at default tracking */

  /* --- Fluid type scale, computed across its range (brief §2.6) ------------ */
  --text-h1:      clamp(2.1rem, 1.5rem + 3.0vw, 3.6rem);
  --text-h2:      clamp(1.5rem, 1.2rem + 1.2vw, 2.0rem);
  --text-body:    clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-eyebrow: clamp(0.72rem, 0.66rem + 0.3vw, 0.8rem);

  /* h3 role: the Materials, Named cards' own specimen labels (Stone / Timber
     / Growth) — brief §2.1's "the type specimen" (the display face's third
     named usage, alongside the H1 and every section head). Not named
     numerically in §2.6's role table, so scaled as its own small step
     between --text-body and --text-h2 rather than reusing either. */
  --text-h3: clamp(1.1rem, 1rem + 0.5vw, 1.375rem);
  --text-small: 0.9375rem;

  /* --- Space — the house scale (unchanged; brief §4.2's own px values are
     exact house-scale steps: 12/16/24/40/64/96px = xs/sm/md/lg/xl/2xl) ------ */
  --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;

  /* design-rules §7.1's ONE inter-section token. Resolves to --space-xl
     (64px) below 768, --space-2xl (96px) at >=768 (brief §4.2). */
  --section-gap: var(--space-xl);

  /* --- Layout (brief §4.2) --------------------------------------------------- */
  --layout-container: 72rem;   /* 1152px — house default, brief states no override */
  --layout-measure:   62ch;    /* house default; brief names no override */
  --layout-gutter:    clamp(1.25rem, 5vw, 3rem);  /* house default (brief §4.2) */
  --layout-tap-min:   44px;

  /* --- Hero geometry (brief §4.1/§4.2/§4.3/§5) — figures the house space
     scale does not already carry. Eyebrow-H1/H1-CTA gaps reuse
     --space-xs/sm and --space-md/lg directly since the brief's own numbers
     land exactly on those steps. */
  --hero-cta-pad-top:    1.05rem;  /* 16.8px, brief §5 */
  --hero-cta-pad-bottom: 1.2rem;   /* 19.2px, brief §5 */
  --hero-cta-row-gap:    0.65rem;  /* 10.4px, CTA row -> place-line, brief §5 */
  --hero-cta-height:     3rem;     /* 48px, brief §5: "CTA row | 48px tall" at every breakpoint */
  --hero-card-field-gap: 1.8rem;   /* 28.8px, CTA card -> field (single-col only), brief §5 */
  /* brief §5's field-height figures (190/220px) were the illustrative
     example's own arithmetic, not reproduced as fixed tokens — site.css's
     .hero__field sizes to real content height instead (see its own
     comment for why). The stagger is real: plate-2's margin-block-start. */
  --hero-plate-stagger:   52px;    /* brief §4.3: plate-2's vertical offset from plate-1 */
  /* Plate internal padding — carried from the C2-winning tile's own literal
     (tiles/tile-b.html: ".plate{ padding:.6rem .7rem }"), not restated
     numerically in the brief's own prose. */
  --plate-pad-block:  0.6rem;
  --plate-pad-inline: 0.7rem;

  /* --- Radius / shadow / border (brief §3.2 R3) ------------------------------
     radius-sm on the two plates and the CTA card ONLY; no drop shadow
     anywhere except the two plates (the plates are the only cards on the
     site — design-rules §4). */
  --radius-none: 0;
  --radius-sm: 2px;
  --shadow-none: none;
  /* Both carried from the C2-winning tile's own literal (tiles/tile-b.html
     ".plate{ box-shadow:0 6px 18px rgba(0,0,0,.10); border:1px solid
     rgba(38,43,39,.12) }") — the border is --color-ink at 12% alpha. */
  --shadow-plate: 0 6px 18px rgba(0, 0, 0, 0.10);
  --color-plate-border: rgba(38, 43, 39, 0.12);
  --border-hairline: 1px;
  --border-thick: 3px;
  --border-style: solid;

  /* --- Motion (brief §7) -----------------------------------------------------
     The signature move: the two plates sway independently, never
     synchronised (7.6s / 9.1s, chosen to share no common factor at one
     decimal place). Rest angles are the un-animated base transform under
     prefers-reduced-motion (house-tech-spec §8, brief §7). */
  --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);

  --duration-plate-1: 7.6s;  --plate-1-rest: -3deg;  --plate-1-sway: 1.8deg;
  --duration-plate-2: 9.1s;  --plate-2-rest: 2.5deg; --plate-2-sway: 1.5deg;

  --reveal-shift: 1.25rem;
  --reveal-stagger: 80ms;  /* brief §7: "staggered 80ms per item" */

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

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2 only, subset to house-tech-spec §8's
   declared safe range, font-display: swap. 2 families / 3 files (brief
   §2.1/§2.2). unicode-range byte-identical on every face (brief §2.4).

   Coverage gap (house-tech-spec §8, full detail in README.md): Bodoni Moda
   Italic carries no U+2032/U+2033 (prime marks); Mulish carries no U+2011
   (non-breaking hyphen) — each face missing a different codepoint, verified
   against the unsubset google/fonts source. Not the mid-sentence-split FIX
   case: copy.md never sets any of the three anywhere, in either face.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../assets/fonts/bodoni-moda-italic-400-latin.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-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: 'Mulish';
  src: url('../assets/fonts/mulish-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 (brief §2.5, house-tech-spec §8). MEASURED with
   scripts/font-metrics.mjs (the fontaine algorithm) against the real shipped
   subset woff2 files and the actual donor each font resolves to in this
   build/QA environment's Chromium (see the --font-display/--font-body
   comment above for why the second local() name is present and which one
   the numbers below are tuned to). Acceptance test: Lighthouse CLS 0.000. */

@font-face {
  font-family: 'Bodoni Moda Fallback';
  src: local('Times New Roman Italic'), local('Times New Roman'), local('Liberation Serif Italic');
  font-weight: 400;
  font-style: italic;
  size-adjust: 107.37%;
  ascent-override: 104.78%;
  descent-override: 37.25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Mulish Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  font-style: normal;
  size-adjust: 104.47%;
  ascent-override: 96.20%;
  descent-override: 23.93%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Mulish Fallback';
  src: local('Arial Bold'), local('Arial'), local('Liberation Sans Bold');
  font-weight: 700;
  font-style: normal;
  size-adjust: 100.26%;
  ascent-override: 100.24%;
  descent-override: 24.93%;
  line-gap-override: 0%;
}

/* Gutter/section-gap's stated 767->768 discontinuity (brief §4.2) — not a
   fluid clamp(). */
@media (min-width: 48em) {
  :root {
    --section-gap: var(--space-2xl);  /* 96px */
  }
}