/* ==========================================================================
   tokens.css — the design brief, compiled. Greenwize Lawn Care, Myrtle Beach
   SC — brief.md v1 (C3 approved 2026-09-15). Family: bold-industrial.
   Archetype (new): spec-plate ("the rate holds"). Dominant hue: signal-green
   #2F6B4E — derived from the dossier's real-world van-livery colour
   (#3a5c4f) via PROVENANCE (the dossier's own caveat that the sampled pixel
   average undersells the true printed saturation, brief §2.1), not a silent
   substitution. Display: Teko. Body: Barlow. 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 (dossier §4.5 van-livery green, #3a5c4f, departed on PROVENANCE
     to #2F6B4E — same hue family, same lightness, +72% relative saturation,
     exactly what the dossier's own caveat predicts) → local character
     (carried entirely by imagery, not the palette — brief §2.1 step 2) →
     family norms (bold-industrial: graphite ink on warm ivory, one
     saturated accent, one genuine dark band). One deliberate mode: light. */

  --scheme: light;

  --color-bg: #F3EFE6;                /* page ground — canvas ivory */
  --color-surface: #E8E1D2;           /* secondary panel ground (trust-strip cards, badges) */
  --color-ink: #201F1D;               /* primary text — graphite */
  --color-ink-muted: #55524A;         /* secondary text (lead, facts, footer) */
  --color-accent: #2F6B4E;            /* signal-green — CTA fill, eyebrow, index rules; the §6.1 anchor's second, smaller appearance (rivet-glint, corner mark) */
  --color-accent-ink: #F3EFE6;        /* text on --color-accent (button label) */

  /* House-required structural colours (consumed by base.css). */
  --color-border: #C9C0AA;            /* DECORATIVE hairlines only — section dividers, card strokes */

  /* A CONTROL'S OWN BOUNDARY, WCAG 1.4.11: >= 3:1 against bg AND surface.
     The brief's own --color-ink clears both grounds by a wide margin
     (14.34:1 on bg, 12.65:1 on surface, brief §2.1 contrast table rows 1/5)
     so it is reused here rather than inventing a new hue for one role. */
  --color-border-strong: #201F1D;

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

  /* Dark-band-safe focus ring, REQUIRED: this brief carries one genuine dark
     band (.spec, the program-spec section). --color-focus (the page accent)
     measures only 2.61:1 on that ground (brief §2.1's own hard rule) — so
     any focusable control inside .spec re-points at this token instead,
     scoped with `.spec :focus-visible`, never globally. Reuses
     --color-accent-on-dark, already measured 8.56:1 on --color-band (brief
     §2.1 contrast table row 9). */
  --color-focus-on-band: var(--color-accent-on-dark);

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

  /* --- Brief-specific colours (brief §2.1) ------------------------------- */
  --color-band: #201F1D;               /* the ONE dark ground — the program-spec section only */
  --color-band-ink: #F3EFE6;           /* text on --color-band */
  --color-band-ink-muted: #D8D3C6;     /* secondary text on --color-band (spec-row labels) */
  --color-accent-on-dark: #7FCB9C;     /* accent role ONLY inside --color-band (spec-row numerals, focus ring) — never on light grounds */
  --color-plate: #EDE7D8;              /* the stamped rate-plate's own flat, opaque fill — ink 13.35:1 / ink-muted 6.33:1 on this ground (brief §2.1) */

  /* --- Typography (brief §2.2). Two families, three woff2 files — under the
     §5 <=4 ceiling. Static instances (not variable), self-hosted from
     Google Fonts' own latin files, subset to the house declared safe range. */

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

  --font-weight-display: 600;   /* h1/h2/h3, eyebrow, CTA labels, spec-row numerals, section head-marks — the ONLY Teko weight loaded (brief §2.2) */
  --font-weight-body: 400;      /* body copy, lead, facts line, spec-row labels, FAQ answers */
  --font-weight-body-strong: 700; /* inline strong emphasis, footer NAP label, nav phone number */

  /* 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(1.9rem, 1.5rem + 2.4vw, 3.25rem);      /* H1: 33.0px @375 -> 52.0px @1440 (ceiling, crossover 1167px) */
  --text-xl:   clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem);  /* section titles: 22.4px @375 -> 28.0px @1440 (crossover 1338px) */
  --text-lg:   clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem); /* eyebrow, CTA labels, FAQ questions: 18.2px @375 -> 21.0px @1440 (crossover 1263px) */
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);     /* body copy: 16.1px @375 -> 17.0px @1440 (ceiling, crossover 820px) */
  --text-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); /* lead, badges, spec-row labels: 14.7px @375 -> 15.0px (ceiling ~ 820px) */
  --text-2xl:  clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);     /* spec-row numerals: 28.7px @375 -> 40.0px @1440 (crossover 1280px) */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* corner head-mark labels: 12.4px @375 -> 13.0px (ceiling ~980px) */

  --leading-tight: 1.02;    /* display, matching Teko's own condensed proportions (brief §2.2) */
  --leading-body: 1.5;      /* body */
  --tracking-tight: 0.01em; /* h1/h2/h3 — carried forward from the approved tile (tiles/tile-c.html), byte-identical */
  --tracking-normal: 0em;
  --tracking-wide: 0.06em;  /* eyebrow/uppercase labels — Teko's own tracked-caps register */

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

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.5rem;    /* brief §2.3 names this step 0.5rem (8px) */
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;     /* house default, unchanged — textarea min-height */

  /* Inter-section rhythm — brief §2.3's one token, fixed at every
     breakpoint. Its only two call sites are .section's padding-block and
     the hero's padding-block-end (design-rules §7.1). */
  --section-gap: var(--space-2xl);   /* 96px */

  /* --- Layout -------------------------------------------------------------
     Brief §4: single centered column at all widths below the hero, max-width
     720px for text-bearing content and 960px for the ruled/bordered sections
     (program spec, trust-strip, FAQ). --layout-container carries the wider
     figure; --layout-measure carries the narrower one for prose. */

  --layout-container: 60rem;          /* 960px */
  --layout-measure: 45rem;            /* 720px */
  --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: nav-strip scrolls with the
     page) — 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 -------------------------------------------
     brief §2.3: --radius: 0 everywhere — a stamped steel plate and a spec
     ledger are square objects. No --shadow-* token exists: separation is
     hairlines and the plate's own 3px stroke, never a drop shadow. */

  --radius-sm: 0;

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

  /* --- Motion (brief §2.3/§6). base.css collapses --duration-fast/base/slow
     under prefers-reduced-motion: reduce (spec §8) — no exceptions. The
     hero's signature motion (plate settle, rivet glint, blade sway) is NOT
     built from these three: brief §6 gives it its own named tokens below,
     separately gated under prefers-reduced-motion in site.css. */

  --duration-fast: 140ms;    /* hover / focus */
  --duration-base: 500ms;    /* scroll reveals */
  --duration-slow: 500ms;    /* base.css's built-in section-entry reveal transition (--duration-reveal, brief §2.3) */

  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* scroll reveals */
  --ease-overshoot: cubic-bezier(.2, .9, .3, 1.2); /* the plate settle (brief §2.3/§6) */
  --ease-ambient: ease-in-out;                   /* blade sway — never linear, which reads mechanical rather than living (brief §2.3) */

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

  /* The hero's own signature timings — brief §2.3/§6, byte-identical to the
     approved tile (tiles/tile-c.html), carried forward exactly, no shared
     factor between the four sway periods. */
  --duration-settle: 1.1s;    /* the plate's one-shot rivet-in */
  --duration-glint: 8.8s;     /* the rivet-glint loop */
  --duration-sway-1: 6.2s;
  --duration-sway-2: 7.4s;
  --duration-sway-3: 5.3s;
  --duration-sway-4: 6.9s;

  /* --- Component sizing ----------------------------------------------------
     Brief-specific one-off sizes that don't belong on the house space scale
     (house-tech-spec §3 — tokens only, no raw literal in site.css). */
  --size-headmark-dot: 8px;      /* the recurring corner-rivet head-mark's fixed dot diameter — never scales down (brief §4) */
  --size-headmark-rule: 32px;    /* the head-mark's hairline — the element that yields first if a label string runs long (brief §4) */
  --size-spec-num-width: 3ch;    /* spec-row numeral column, tile-identical */
  --size-spec-label-offset: 0.2em; /* spec-row label's baseline nudge against the numeral, tile-identical */
  --size-motif-max: 26rem;       /* service-area motif image, low visual weight per brief §5 */
  --size-marker-width: 1em;      /* FAQ +/- marker column */

  /* The living-hero field's own decorative tones — carried forward exactly
     from the approved tile (tiles/tile-c.html), the cited visual reference
     (brief §1): the plate's flat fill is --color-plate (above); these two
     are the blade-sway overlay's own light/dark variants, tile-identical. */
  --color-turf-blade-light: #3d7f5c;
  --color-turf-blade-dark: #255741;

  /* --- 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). Static
   instances, subset to the house declared safe range (house-tech-spec §8),
   byte-identical unicode-range on every face.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Teko';
  src: url('../assets/fonts/teko-latin-wght600.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;
}

@font-face {
  font-family: 'Barlow';
  src: url('../assets/fonts/barlow-latin-wght400.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-latin-wght700.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 §7/§8) — MEASURED, not
   eyeballed, via scripts/font-metrics.mjs (the fontaine algorithm) against
   the shipped, subset woff2 files. Donor faces: Arial Narrow is not
   redistributable and is absent from this build container, so its free
   metric-compatible clone Liberation Sans Narrow stands in for measurement
   (the shipped local() stack still names 'Arial Narrow' first, matching
   what a reader's own OS actually offers); Arial / Helvetica Neue is
   Liberation Sans (already on this system) — same donor-substitution
   precedent as grass-tenders-llc-pauline-sc / tyler-roofing-tyler-tx. */

@font-face {
  font-family: 'Teko Fallback';
  src: local('Arial Narrow'), local('Liberation Sans Narrow');
  size-adjust: 97.42%;
  ascent-override: 98.34%;
  descent-override: 48.76%;
  line-gap-override: 0%;
}

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

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Arial'), local('Helvetica Neue');
  font-weight: 700;
  size-adjust: 92.39%;
  ascent-override: 108.23%;
  descent-override: 21.65%;
  line-gap-override: 0%;
}