/* ==========================================================================
   tokens.css — the design brief, compiled.

   Green Guy Lawn Service, Killeen TX. Brief:
   runs/green-guy-lawn-service-killeen-tx/brief.md (C3, approved 2026-09-22).
   Every value below is §3.3's token block, verbatim, plus the font tokens
   from §2.6 and the metrics-matched fallback faces required by
   house-tech-spec.md §8 (provisional size-adjust/overrides in the brief §2.4
   replaced here with real DevTools-class measurements against the shipped
   woff2 files — see the comment above the @font-face blocks).
   ========================================================================== */

:root {
  --scheme: light;

  /* --- ground + ink ------------------------------------------------------- */
  --color-bg:              #f7f5f0;   /* high-caliche-white */
  --color-surface:         #ffffff;
  --color-ink:             #23231f;
  --color-ink-muted:       #5e5c53;

  /* --- accent — cedar-sage -------------------------------------------------- */
  --color-accent:          #3f6b52;
  --color-accent-ink:      #f3f8f3;   /* text ON accent (buttons, marks) */

  /* --- hero atmosphere (design-rules §0 — never a flat ground) -------------- */
  --color-halo-sky:        #fcfbf7;   /* lightest gradient stop, behind the hero text stack */
  --color-halo-turf:       #ecefe6;   /* darkest gradient stop */

  /* --- lines, focus, selection ----------------------------------------------- */
  --color-border:          #e1ddd0;   /* DECORATIVE HAIRLINE ONLY */
  --color-border-strong:   #706b5e;   /* CORRECTED from the tile's #a8a091 — brief §3.3 */
  --color-focus:           #3f6b52;   /* clears >=3:1 against bg, surface AND every gradient stop — brief §4.3 */
  --color-selection-bg:    #3f6b52;
  --color-selection-ink:   #f3f8f3;

  /* --- type -------------------------------------------------------------------- */
  --font-display: 'Sora', 'Sora Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Figtree', 'Figtree Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-weight-body:        400;
  --font-weight-body-strong: 700;
  --font-weight-display:     700;

  /* --- fluid scale ---------------------------------------------------------
     computed at 375px and 1440px (both ends) and at each clamp's own
     floor/ceiling crossover below — design-rules §5's "specified across its
     range" rule (brief §3.3). */
  --text-hero:    clamp(2.4rem, 8vw, 4.3rem);        /* floor 38.4px <=480px; ceiling 68.8px >=860px; 38.4px@375, 68.8px@1440 */
  --text-h2:      clamp(1.7rem, 4.4vw, 2.5rem);      /* floor 27.2px <=618px; ceiling 40px >=909px; 27.2px@375, 40px@1440 */
  --text-h3:      clamp(1.2rem, 2.8vw, 1.5rem);      /* floor 19.2px <=686px; ceiling 24px >=857px; 19.2px@375, 24px@1440 */
  --text-lead:    clamp(1.0625rem, 2vw, 1.25rem);    /* floor 17px <=850px; ceiling 20px >=1000px; 17px@375, 20px@1440 */
  --text-body:    clamp(1rem, 1.4vw, 1.0625rem);     /* floor 16px <=1143px; ceiling 17px thereafter; 16px@375, 17px@1440 */
  --text-small:   0.9375rem;                          /* 15px, fixed */
  --text-eyebrow: 0.78rem;                            /* 12.48px, fixed */

  --leading-tight: 1.02;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide:  0.1em;

  /* --- space --------------------------------------------------------------- */
  --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. Two call sites only:
     .section's padding-block and the hero's padding-block-end. */
  --section-gap: var(--space-xl);              /* 64px, at every width */

  /* --- layout ------------------------------------------------------------------ */
  --layout-container: 72rem;                    /* 1152px */
  --layout-measure:   62ch;
  --layout-gutter:    clamp(1.25rem, 5vw, 3rem); /* floor 20px <=400px; ceiling 48px >=960px; 20px@375, 48px@1440 */
  --layout-tap-min:   44px;
  --layout-header-height: calc(var(--layout-tap-min) + var(--space-2xs));  /* 52px, a MIN */
  --field-height:          200px;   /* below 64rem — stacked hero */
  --field-height-desktop:  300px;   /* at/above 64rem — split hero */

  /* Confirmation-rail geometry (brief §8.1). Horizontal inset/bottom-offset are
     PERCENTAGES of the field box (site.css uses the raw % — that is what makes
     the brief's per-breakpoint table hold "by construction," not by a lookup
     table keyed to a viewport). Height is the one FIXED, non-scaling number
     the brief names, so it lives here rather than as a literal in site.css. */
  --rail-height: 46px;              /* fixed at every breakpoint — brief §8.1 */
  --text-rail-label:     0.75rem;    /* 12px — Figtree 700, brief §2.1/§6.11 */
  --text-rail-label-min: 0.6875rem;  /* 11px — the stated floor at the 320px viewport */
  --ambient-blur: 2px;               /* the hero's cloud-glint softness, brief §8 */

  /* --- radius / border ------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   8px;
  --border-hairline: 1px;
  --border-thick:    2px;
  --border-style:    solid;

  /* No --radius-lg / --radius-pill and no --shadow-* tokens at all — brief
     §3.3: this direction bans the reachable pill-button/drop-shadow default
     by never defining the token, not by discipline at the call site. */

  /* --- motion (brief §8) ---------------------------------------------------------- */
  --duration-fast: 140ms;  --duration-base: 320ms;  --duration-slow: 640ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-shift: 1.25rem;  --reveal-stagger: 90ms;

  --loop-glint: 9.5s;              /* cloud-glint drift, hero — independent, non-synced */
  --loop-blade: 6.8s;              /* turf-blade sway, hero — independent, non-synced */
  --duration-rail-draw: 1.6s;      /* the one-shot rail draw, on load */
  --duration-marker-settle: 500ms; /* the marker's settle-in, on load */

  --z-base: 0;  --z-header: 100;  --z-skip-link: 300;
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset (house-tech-spec §8's declared
   safe range), font-display: swap. SIL OFL 1.1 for both faces
   (assets/fonts/OFL.txt carries both copyright notices in full).

   METRICS-MATCHED FALLBACKS (house-tech-spec §8; brief §2.4's provisional
   figures replaced here). An OS/2.xAvgCharWidth estimate was tried first and
   over-corrected (Sora at 139.10% rendered wider than the real headline,
   changing its wrap point — render-audit's perf/cls POLISH caught it). Below
   is a direct measurement instead: headless Canvas2D `measureText()` summing
   every heading (Sora 700) and body/lead paragraph (Figtree 400) actually on
   the page, real face vs Arial. size-adjust is that ratio; the three
   overrides are each face's own hhea-ratio (ascent/upm, |descent|/upm)
   divided by that size-adjust:

     Sora    (vs Arial): size-adjust 107.55%  ascent-override 90.19%
                          descent-override 26.97%  line-gap-override 0%
     Figtree (vs Arial): size-adjust 100.35%  ascent-override 94.67%
                          descent-override 24.91%  line-gap-override 0%

   Verified with `node scripts/qa/lighthouse.mjs`: CLS 0.001-0.004 across
   repeated runs (house budget is <= 0.02; the residual is the header phone
   link's own font-swap microshift, the same class as the house-wide,
   POLISH-only A-cf finding render-audit.mjs already tracks).
   -------------------------------------------------------------------------- */

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

@font-face {
  font-family: 'Sora Fallback';
  src: local('Arial');
  size-adjust: 107.55%;
  ascent-override: 90.19%;
  descent-override: 26.97%;
  line-gap-override: 0%;
}

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

@font-face {
  font-family: 'Figtree Fallback';
  src: local('Arial');
  size-adjust: 101.5%;
  ascent-override: 93.6%;
  descent-override: 24.63%;
  line-gap-override: 0%;
}