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

   Values below are taken verbatim from the approved brief
   (runs/greenburst-lawns-salina-ks/brief.md §2, §3.3, §3.4, §4, §6). Nothing
   here is improvised; every token traces to a brief line or is a bespoke,
   argued token derived from the brief's own stated arithmetic/composition
   figures (design-rules §5's allowance for bespoke, cited tokens).
   ========================================================================== */

:root {
  --scheme: light;

  /* --- colour (brief §2.1) ------------------------------------------------- */
  --color-bg:        #F5EFE1;  /* warm cream / parchment */
  --color-surface:   #EDE3CC;  /* deeper parchment — cards, alternating rows */
  --color-ink:       #1F3D2B;  /* elm-green — Dutch-Elm-Disease service line read as ink;
                                   carries the vertical's green/growth anchor in the ink itself */
  --color-ink-muted: #3F5A46;  /* muted elm-green — secondary text */
  --color-accent:    #9C4A30;  /* barn-rust — Americana sign-paint accent */
  --color-accent-ink: #FBF4E8; /* near-white cream — text ON the accent fill */

  /* Decorative-only accent (brief §2.1): 2.9:1 on bg, below AA — never text. */
  --color-accent-decorative: #C97A3F;

  /* Hero atmosphere gradient stops (brief §2.2): "a radial gradient between
     #FBF6EA, #F5EFE1 and #EADFC4." No text sits over this field at any
     width (brief §2.2) — the image is a standalone block, per house DOM
     order — so the only pairing to check is ink against the darkest stop,
     measured in the brief at 9.0:1. */
  --color-bg-radial-light: #FBF6EA;
  --color-bg-radial-dark:  #EADFC4;

  /* House-required structural aliases (spec §3): border-strong reuses
     --color-ink-muted (already verified >=3:1 vs bg/surface, brief §2.2).
     border is a quiet surface-toward-ink blend, decorative only, no
     contrast floor. focus reuses --color-accent (also >=3:1 vs both). */
  --color-border: #CECAB4;
  --color-border-strong: #3F5A46;
  --color-focus: #9C4A30;
  /* No dark band in this brief — --color-focus-on-band left unset. */
  --color-selection-bg: #9C4A30;
  --color-selection-ink: #FBF4E8;

  /* --- typography (brief §2.3, corrected 2026-10-03) -----------------------
     Two families, three weights total (OFL, Google Fonts — brief §2.3).
     Bungee ships ONE weight (400); it is a single-weight face. Replaces
     Fredericka the Great (brief front-matter "Font correction"): same
     Americana sign-painter register (dossier §4.4, ref-010), built from
     solid closed polygons rather than connected brush strokes — the
     construction that makes it subset leaner (measured below). */
  --font-display: 'Bungee', 'Bungee Fallback', Arial, Helvetica, sans-serif;
  --font-body:     'Barlow', 'Barlow Fallback', Arial, Helvetica, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 600;
  /* Third weight role the brief's loaded-weights list requires (§2.3: "400,
     600, 700"), reserved for the sign-paint accents: eyebrow, CTA label,
     facts strip, Ring Count row labels (strong/b/nav/labels stay at 600). */
  --font-weight-body-bold: 700;
  --font-weight-display: 400; /* Bungee's only cut */

  /* --- fluid type scale (brief §2.3, clamp() computed at 375/768/1440) ----- */
  --text-eyebrow: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  --text-h1:      clamp(2.3rem, 1.3rem + 5.2vw, 4.6rem);
  --text-h2:      clamp(1.6rem, 1.2rem + 2.4vw, 2.5rem);
  --text-lead:    clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --text-body:    clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
  --text-small:   clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  /* No h3/h4 level is needed: this build uses only h1 (hero) and h2 (section
     headings); every sub-heading role (Ring Count row labels, Services Detail
     subheads, FAQ questions) is realised as styled body text, not a heading
     element, so no --text-h3 token is required (house precedent:
     3-elements-landscaping-asheville-nc ships the same way, and overrides
     .site-header__brand's font-size below rather than needing one). */

  /* leading-tight: the brief's own §3.3 arithmetic states its H1 estimate
     "at 1.02 line-height" — used here rather than the house default (1.05)
     so the brief's own stated assumption and the shipped value agree. */
  --leading-tight: 1.02;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  /* tracking-tight: 0, not the house default's negative value. Bungee is a
     wide, solid-block display face (brief §2.3) — negative tracking crowds
     its closed letterforms. This is a legibility correction, not a look
     choice: the house's own default is tuned for narrower display faces. */
  --tracking-tight: 0em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;

  /* --- space — house scale, --space-2xl overridden per brief §2.4:
     section-gap resolves to 48px@375 / 72px@>=768, not the house 6rem. */
  --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: 3rem;    /* 48px at 375 — see media override below */
  --space-3xl: 9rem;

  --section-gap: var(--space-2xl);

  /* --- bespoke hero rhythm tokens (brief §3.3's own stated arithmetic
     targets — derived, re-measured against the render at handoff) --------- */
  --hero-top-pad: 20px;  /* brief §3.3: "Hero top padding" */
  --hero-gap-sm:  10px;  /* brief §3.3: "Margin to eyebrow" / the eyebrow-to-h1 "Gap" */
  --hero-gap-md:  14px;  /* brief §3.3: the h1-to-CTA "Gap" */

  /* --- layout (brief §3.4's desktop composition containers) ---------------- */
  --layout-container:       72rem;   /* house default — unused directly; sections below opt into one of the three container widths explicitly */
  --layout-container-wide:  90rem;   /* 1440px — Hero, The Ring Count, Contact/Footer (brief §3.4) */
  --layout-container-md:    75rem;   /* 1200px — Services Detail, About (brief §3.4) */
  --layout-measure:         62ch;    /* house default reading measure */
  --measure-narrow:         60ch;    /* Service Area (brief §3.4) */
  --measure-wide:           70ch;    /* FAQ (brief §3.4) */
  --layout-gutter:          clamp(1.25rem, 5vw, 3rem);
  --layout-gutter-md:       64px;    /* wide-container sections, 768–1023px (brief §3.4) */
  --layout-gutter-lg:       96px;    /* wide-container sections, >=1024px (brief §3.4) */
  --layout-tap-min:         44px;

  /* Section-specific desktop grid gaps that do not land on the base space
     scale (brief §3.4's own stated figures, bespoke and argued per section). */
  --grid-gap-services: 48px; /* Services Detail column gap */
  --grid-gap-about:    56px; /* About / Our Story column gap */
  --grid-gap-contact:  48px; /* Contact/Footer column gap */
  /* The Ring Count's 72px column gap and the Hero's 64px column gap both
     land exactly on existing steps — --space-2xl (72px at >=768, see media
     override below) and --space-xl (64px) respectively — and are not
     duplicated as new tokens. */

  /* Two-stroke ring mark (brief §3.4, §6): fixed 34x34 beside every Ring
     Count row; shrunk at the head of each Services Detail column. */
  --ringmark-size: 34px;
  --ringmark-size-sm: 24px;

  /* Hero field box sizing. Mobile cap is tile-a.html's own approved
     composition (.ringfield, 420px, centred). Desktop is a linear
     interpolation between the brief's two data points: 400px@768, 560px@1440. */
  --hero-field-max-mobile: 420px;
  --hero-field-max: clamp(400px, 24vw + 217px, 560px);

  /* Services Detail imagery slots 2/3/4 (brief §3.4/§5.2): fixed drawn box. */
  --services-image-w: 280px;
  --services-image-h: 200px;
  /* About imagery slot 5 (brief §3.4/§5.2): fixed drawn box. */
  --about-image-w: 560px;
  --about-image-h: 360px;
  /* Ring Count row body copy measure (brief §3.4: "capped at 56ch"). */
  --measure-row: 56ch;

  /* Desktop grid text-column measures, brief §3.4's own stated ch figures. */
  --col-hero-text: 46ch;
  --col-ringcount-intro: 34ch;
  --col-about-text: 55ch;
  --col-contact: 40ch;

  /* Sawdust-mote drift distances (brief §4's satellite-float physics,
     ref-001 — small, independent, non-synchronised drift). Bespoke,
     em-relative so the motes scale with their own size. */
  --mote-drift-1-x: 0.25em; --mote-drift-1-y: -0.6em;
  --mote-drift-2-x: -0.35em; --mote-drift-2-y: 0.5em;
  --mote-drift-3-x: -0.5em; --mote-drift-3-y: -0.35em;

  /* --- radius / shadow / border — house defaults, brief does not override - */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(31 61 43 / 0.06);
  --shadow-md: 0 6px 24px rgb(31 61 43 / 0.09);
  --shadow-lg: 0 24px 60px rgb(31 61 43 / 0.14);

  --border-hairline: 1px;
  --border-thick: 3px;   /* also the brief §6 accent rule's own 3px figure */
  --border-style: solid;

  /* --- motion (brief §4) ---------------------------------------------------
     Generic reveal timings stay at the house defaults (not overridden by the
     brief). The signature move's own named durations/eases are bespoke,
     exact figures from brief §4. */
  --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;

  /* The ring settles (brief §4) — one-shot on hero load, never looping. */
  --duration-ring-settle: 2.4s;
  /* Three sawdust motes, independent, non-synchronised loops (brief §4). */
  --duration-mote-1: 6.2s;
  --duration-mote-2: 7.8s;
  --duration-mote-3: 9.1s;

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

/* --------------------------------------------------------------------------
   Breakpoint-conditional token overrides. Media-query conditions cannot read
   custom properties, so the breakpoint VALUE is the one house-documented
   literal exemption (base.css); the property itself stays a token,
   redeclared at :root (house precedent: 3-elements-landscaping-asheville-nc's
   --field-height).
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  :root {
    --space-2xl: 4.5rem; /* 72px — brief §2.4's >=768px section-gap step */
  }
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset, font-display: swap.
   Bungee 400 and Barlow 400/600/700, SIL OFL 1.1. Every face subset to the
   house declared safe range (house-tech-spec §8), identical unicode-range
   on all four files.

   FONT PAYLOAD — CORRECTED 2026-10-03, MEASURED, CLOSED. Fredericka the
   Great could not be subset under this budget (175.9 KB vs the 60 KB/face
   cap); replaced with Bungee (brief front-matter, §2.3, §7) — solid closed
   polygons, not connected strokes, subset far leaner AS MEASURED: this
   file is **10.3 KB**. Barlow's three weights: 55.2 KB. Site total:
   **65.5 KB of 100 KB**, every face under the 60 KB cap.

   COVERAGE: U+2010-2012, U+2015 absent from BOTH Bungee and Barlow —
   symmetric (house pilot-site precedent). Bungee carries full
   accented-Latin coverage (64/64) and both prime marks (U+2032-2033).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bungee';
  src: url('../assets/fonts/bungee-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: 'Barlow';
  src: url('../assets/fonts/barlow-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: 'Barlow';
  src: url('../assets/fonts/barlow-600-latin.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-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 (house-tech-spec §7/§8), Fontaine reference
   formula: sizeAdjust from each REAL face's frequency-weighted avg char
   width (read via fontTools) against the fallback's own, using
   @capsizecss/metrics' published Arial figures (this environment has
   neither Arial nor Georgia installed — same method and reason as the
   house's prior build, 3-elements-landscaping-asheville-nc). Liberation
   Sans added as a risk-free extra local() source for both Bungee and
   Barlow: a verified metric-compatible Arial clone (Red Hat), so
   Linux/Android get correct overrides too.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bungee Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 137.42%;
  ascent-override: 74.22%;
  descent-override: 21.83%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 95.23%;
  ascent-override: 105.01%;
  descent-override: 21%;
  line-gap-override: 0%;
}