/* ==========================================================================
   tokens.css — the design brief, compiled. Grass Tenders LLC, Pauline SC —
   brief.md v1 (C3 approved 2026-09-15). Family: editorial-modern. Archetype
   (new): survey-stack ("the plan draws true"). Dominant hue: loblolly-green
   #2F5B3E — derived from family norms + the landscaping §6.1 semantic anchor
   (green/growth), pushed toward a near-black editorial pine ink; the
   dossier's own `#116dff` does not carry the brand-echo default (no
   real-world asset behind it, brief §2.1). Display: Familjen Grotesk. Body:
   Source Serif 4 (roman + italic). THIS FILE IS THE ONLY PLACE RAW VALUES
   LIVE (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour (brief §2.1). Derivation: design-rules §6 order — real-world
     colour (none usable; dossier §4.5 — the one hex on file is site-CSS-only
     with no real-world asset, argued from provenance, brief §2.1) → local
     character (rural/exurban Upstate SC, folded into family norms) → family
     norms + the vertical's §6.1 anchor (green/growth). One deliberate mode:
     light. */

  --scheme: light;

  --color-bg:         #FAF7F0;   /* page ground — parchment */
  --color-surface:    #F0EBDD;   /* palette-chip / muted-panel ground */
  --color-card:       #FFFFFF;   /* content-card ground — services index, trust-strip, reviews (brief §2.1) */
  --color-ink:        #1B2A22;   /* primary text */
  --color-ink-muted:  #4B5A50;   /* secondary text, facts lines, meta */
  --color-accent:     #2F5B3E;   /* loblolly-green — CTA fill, eyebrow, index numerals, accent rules */
  --color-accent-ink: #FFFFFF;   /* text on --color-accent (button label) */

  /* House-required structural colours (consumed by base.css). */
  --color-border:        #DDD5C0;   /* hairlines, card borders */
  --color-border-strong: #8C8570;   /* dashed judgment-note rule, stronger dividers, control boundaries (WCAG 1.4.11) */

  /* :focus-visible ring — brief's own accent, already AA vs bg (7.30:1),
     surface (6.56:1) and card (7.81:1) per the brief §2.1 contrast table, so
     one token clears every ground the ring can sit on. */
  --color-focus: var(--color-accent);

  /* No --color-focus-on-band: the hero's living-hero field carries the only
     dark ground on the page (the turf/atmosphere gradient), and it holds no
     focusable control — the CTA sits above it in the house order (brief §4),
     never inside it. Left undeclared rather than unused. */
  /* --color-focus-on-band: …; */

  --color-selection-bg: var(--color-accent);
  --color-selection-ink: var(--color-accent-ink);

  /* Living-hero field placeholder ground — the raster hero image carries its
     own atmosphere and turf band now (brief §5: "delivered as a generated
     hero-grade asset rather than a flat SVG fill"), so the field wrapper
     only needs a same-toned placeholder to paint before the image decodes,
     not a reconstructed gradient. */
  --color-field-placeholder: var(--color-ink);

  /* The animated plan-line/sprig/tick overlay (brief §6, Tile A's device)
     sits transparently over the photo, tinted to read as part of the same
     drafting linework rather than competing with it — the single largest
     area of saturated colour in the hero stays the photo's own living-turf
     band (brief §5), never the overlay. */
  --color-plan-ink: #E7DDC0;      /* plan-line stroke + tick mark, Tile A's own hairline tone */
  --color-turf-blade: #8FB584;    /* sprig fill, Tile A's own tone */
  --color-turf-stem: #3E6A46;     /* sprig stem, Tile A's own tone */

  /* --- Typography (brief §2.2). Two families, three woff2 files — under the
     §5 ≤4 ceiling. Variable instances, partial-instanced to hit the font
     budget: Source Serif 4 Roman is instanced at a fixed optical size
     (opsz=14, the body/lead text range this face serves, brief §2.2's body
     and lead rows) with wght left variable 400–600; Source Serif 4 Italic is
     instanced at a fixed weight (wght=500, the brief's only italic use) with
     opsz left variable 8–60, so the one italic face auto-optically-sizes
     correctly whether it is rendered as the hero H1's accent word or a
     14px review attribution. Both are delivery-mechanical subsetting
     decisions (house-tech-spec §8), not a change to either face's identity.
     Measured post-subset: 13.0 KB + 26.5 KB + 45.7 KB = 85.2 KB total,
     largest face 45.7 KB — both under the §7 100 KB / 60 KB caps. */

  --font-display:        'Familjen Grotesk', 'Familjen Grotesk Fallback', Arial, 'Helvetica Neue', sans-serif;
  --font-body:            'Source Serif 4', 'Source Serif 4 Fallback', Georgia, 'Times New Roman', serif;
  --font-body-italic:     'Source Serif 4 Italic', 'Source Serif 4 Italic Fallback', Georgia, serif;

  --font-weight-display:     600;   /* h1, h2, h3 (brief §2.2) */
  --font-weight-brand:       700;   /* wordmark, eyebrow, CTA label, block-title/cluster-label uppercase labels (brief §2.2) */
  --font-weight-body:        400;   /* body copy, lead paragraph */
  --font-weight-body-strong: 600;   /* strong/bold inline emphasis */
  --font-weight-emphasis:    500;   /* Source Serif 4 Italic — H1 accent word, index numerals, testimonial attributions */

  /* Fluid scale — brief §2.2 table, every clamp() copied byte-identical.
     Floor at 375px, ceiling at 1440px, both computed in the brief. */

  --text-hero:    clamp(2.6rem, 8vw, 4.75rem);      /* 41.6px @375 → 76px @1440 */
  --text-h2:      clamp(1.75rem, 4.8vw, 2.75rem);   /* 28px @375 → 44px @1440 */
  --text-h3:      clamp(1.2rem, 2.8vw, 1.5rem);     /* 19.2px @375 → 24px @1440 */
  --text-lead:    clamp(1.0625rem, 2.1vw, 1.25rem); /* 17px @375 → 20px @1440 */
  --text-body:    clamp(1rem, 1.3vw, 1.0625rem);    /* 16px @375 → 17px @1440 */
  --text-small:   0.875rem;                          /* 14px, fixed */
  --text-eyebrow: 0.75rem;                           /* 12px, fixed */

  --leading-tight: 1.04;   /* display */
  --leading-snug:  1.3;    /* lead */
  --leading-body:  1.6;    /* body copy */

  /* Hero H1 letter-spacing — Tile A's own rendered value (tiles/tile-a.html
     `.hero-h1`), carried forward unaltered; the brief's §2.2 token table does
     not re-specify it, so this is Tile A's value, not an invented one. */
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:  0.08em;   /* eyebrow / uppercase labels */

  /* --- Space — house scale, unmodified (brief §2.3 restates the same
     values). --------------------------------------------------------- */

  --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;   /* house default, unchanged — the form textarea's min-height (site.css shell) */

  /* Inter-section rhythm — brief §2.3's one token, fixed at every
     breakpoint (not fluid — --space-* tokens are fixed per the house scale). */
  --section-gap: var(--space-2xl);   /* 96px */

  /* --- Layout ---------------------------------------------------------
     Brief §4: two content widths — ~760px for text-bearing content, ~1040px
     for the card-bordered sections (services index, trust-strip, reviews,
     quote-form). --layout-container carries the wider figure since it is
     the general section wrapper; --layout-measure carries the narrower one
     for prose. */

  --layout-container: 65rem;          /* 1040px */
  --layout-measure: 47.5rem;          /* 760px */
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;             /* WCAG touch-target floor; also the expiry bar's height */

  /* Header is NOT sticky in this brief (brief §4) — only the preview expiry
     bar is sticky-eligible by house default, and this brief does not make it
     sticky either (house default: static flow). No sticky-offset token
     needed. */

  /* --- Radius / shadow / border -----------------------------------------
     editorial-modern's restrained, flat register: one small structural
     radius (cards, buttons), one slightly larger one for the review/
     attribution chips. No drop-shadow token — flat, ruled surfaces only
     (brief §2.3; design-rules §4 bans a shadow on every card). */

  --radius-sm: 4px;       /* brief §2.3 "--radius: 4px" — cards, buttons, structural use only */
  --radius-chip: 6px;     /* brief §2.3 "--radius-chip" — testimonial cards */

  --border-hairline: 1px;
  --border-plan: 2px;     /* the signature "plan draws true" head-rule, reused atop every section below the hero (brief §6) — the hero overlay's own plan-line stroke weight, scaled */
  --border-thick: 3px;
  --border-style: solid;

  /* --- Motion (brief §2.4 + §6). base.css collapses --duration-fast/base/
     slow under prefers-reduced-motion: reduce (spec §8) — no exceptions.
     The hero's own signature motion (plan-line draw, sprig sway, tick float)
     is NOT built from these three: brief §6 keeps Tile A's own literal
     timings for that device (1.3s draw, 7.4s / 9.8s ambient loops, on two
     deliberately non-synchronised periods), so it gets its own named tokens
     below, and is separately gated under `prefers-reduced-motion: no-
     preference` in site.css exactly as Tile A specifies — not reset via the
     three tokens below, which govern hover/focus and the house's generic
     below-fold scroll-reveal system (base.css) instead. */

  --duration-fast: 200ms;    /* hover / focus */
  --duration-base: 500ms;    /* scroll reveals (brief §2.4) */
  --duration-slow: 900ms;    /* one-shot hero draws (brief §2.4); also the value base.css's built-in
                                 section-entry reveal transition resolves to, since base.css is fixed
                                 house scaffolding that reads --duration-slow for that purpose — recorded
                                 here rather than silently left for the Critic to notice. */

  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* one-shot draws and reveals */
  --ease-ambient: ease-in-out;                /* satellite sway/float loops — never linear (brief §2.4) */

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

  /* The hero's own signature timings (brief §6, byte-identical to Tile A). */
  --duration-plan-draw: 1.3s;
  --delay-plan-draw: 0.15s;
  --loop-sprig-sway: 7.4s;
  --loop-tick-float: 9.8s;

  /* The overlay's own transform origins and float amplitude — Tile A's own
     coordinates (viewBox 0 0 320 190), tokenised per house-tech-spec §3's
     "no raw size literal outside tokens.css" rule; not a free layout value. */
  --sprig-origin: 40px 168px;
  --tick-origin: 260px 40px;
  --tick-float-rest: -3px;
  --tick-float-peak: 4px;

  /* --- Component sizing --------------------------------------------------
     Brief-specific one-off image/column sizes that don't belong on the
     house space scale (house-tech-spec §3 — tokens only, no raw literal in
     site.css). */
  --index-num-width: 2.5em;    /* services-index numeral column */
  --size-motif-sm: 10rem;      /* process-strip motif image, small/secondary per brief §5 */
  --size-motif-md: 22rem;      /* service-area motif image, low visual weight per brief §5 */

  /* --- 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 (brief §2.2). Variable
   instances, partial-instanced per the note above. Subset to the house
   declared safe range (house-tech-spec §8), byte-identical unicode-range on
   every face.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('../assets/fonts/familjen-grotesk-latin-wght600-700.woff2') format('woff2');
  font-weight: 600 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;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('../assets/fonts/source-serif-4-latin-wght400-600.woff2') format('woff2');
  font-weight: 400 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;
}

@font-face {
  font-family: 'Source Serif 4 Italic';
  src: url('../assets/fonts/source-serif-4-italic-latin-wght500.woff2') format('woff2');
  font-weight: 500;
  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 §7/§8) — MEASURED, not
   eyeballed, via scripts/font-metrics.mjs (the fontaine algorithm) against
   the shipped, subset woff2 files. Donor faces: Georgia is not
   redistributable in this build container, so its free metric-compatible
   clone Gelasio (Google Fonts, OFL) stands in for measurement; Arial /
   Helvetica Neue is Liberation Sans (already on this system) — same
   donor-substitution precedent as tyler-roofing-tyler-tx. */

@font-face {
  font-family: 'Familjen Grotesk Fallback';
  src: local('Arial'), local('Helvetica Neue');
  size-adjust: 98.45%;
  ascent-override: 104.11%;
  descent-override: 22.85%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  size-adjust: 108.29%;
  ascent-override: 95.67%;
  descent-override: 30.93%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Serif 4 Italic Fallback';
  src: local('Georgia Italic'), local('Georgia');
  font-style: italic;
  size-adjust: 93.61%;
  ascent-override: 110.68%;
  descent-override: 35.79%;
  line-gap-override: 0%;
}