/* ==========================================================================
   tokens.css — the design brief, compiled (house-tech-spec §3).
   Source: runs/alex-landscaping-and-tree-trimming-service-duluth-mn/brief.md §4.
   Every value below is the brief's; nothing here was chosen at build time.
   ========================================================================== */

:root {

  /* --- Colour — brief §2.1/§2.2. Derivation order (design-rules §6): step 1
     (real-world colours) is EMPTY — dossier §4.5 records no truck/uniform/
     signage colour anywhere reachable, so no echo is owed. Step 2 (local
     character) supplies harbor-teal — Duluth's own Lake Superior geography.
     One deliberate mode, light (brief §2). --- */

  --scheme: light;

  --color-bg:          #F8F5F0;   /* birch-white */
  --color-surface:     #EFE9DF;   /* one step warmer — card/quote grounds */
  --color-ink:         #23262B;   /* near-black, warmed */
  --color-ink-muted:   #5A5F66;   /* secondary text, captions */
  --color-accent:      #1F6B66;   /* harbor-teal — Lake Superior water */
  --color-accent-ink:  #FFFFFF;   /* text/icon on accent-filled grounds */
  --color-accent-2:    #4C7A5A;   /* fern — growth thread. ICON-FILL ONLY (brief §2.3) */

  /* Field border / index-list row dividers — the one hairline neutral the
     brief tokenises rather than shipping as a raw literal (brief §6.2 note).
     Reused as the site's one general hairline colour (header rule, footer
     rule, form field borders) — the brief names no second hairline colour. */
  --color-border-muted: #D8D0C0;
  --color-border:        var(--color-border-muted);

  /* Focus ring. --color-focus is validated against bg/surface only (brief §2.2
     row 6: accent/bg 5.76:1, row 7: accent/surface 5.19:1 non-text — both
     clear 3:1). The footer is a dark band (--color-ink ground) and accent-on-
     ink measures ~2.42:1 — below the 3:1 floor — so the footer's interactive
     links re-point at --color-focus-on-band, the site's own bg/ink pair
     (13.96:1, brief §2.2 row 8), never a new hex (base.css convention). */
  --color-focus:          var(--color-accent);
  --color-focus-on-band:  var(--color-bg);

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

  /* --- Typography — brief §3. Two families, four static woff2 files (the
     design-rules §5 ceiling). No variable instance anywhere (brief §3: "no
     font-variation-settings appears anywhere on this site"). --- */

  --font-display: 'Instrument Serif', 'Instrument Serif Fallback', 'Instrument Serif Fallback 2', Georgia, serif;
  --font-body:    'Public Sans', 'Public Sans Fallback', Arial, sans-serif;

  --font-weight-body:        400;
  --font-weight-body-strong: 600;
  /* Instrument Serif ships ONLY Regular 400 and Italic 400 (brief §3) — there
     is no bolder file, so headings render at 400 everywhere. Requesting a
     heavier weight anywhere would ask the browser to synthesise bold on a
     face with no bold instance, which house-tech-spec §8 treats as the same
     class of defect as an unmatched fallback. */
  --font-weight-display:     400;

  --text-eyebrow: clamp(0.72rem, 0.6rem + 0.4vw, 0.85rem);
  --text-h1:      clamp(2rem, 1.4rem + 3vw, 3.6rem);
  --text-h2:      clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
  --text-h3:      1rem;    /* fixed — index item names, process step labels (brief §3.1) */
  --text-body:    clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --text-small:   clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  --text-quote:   clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);

  --leading-tight: 1.05;   /* h1 */
  --leading-snug:  1.2;    /* eyebrow, small */
  --leading-body:  1.55;   /* body copy */
  --tracking-eyebrow: 0.12em;
  --tracking-label:   0.14em;
  /* House base.css also asks for --tracking-tight on h1–h4; this family
     carries no negative tracking on display type (brief names none), so the
     tight step resolves to the family's own neutral. */
  --tracking-tight: 0em;

  /* --- Space (house scale, brief §4 verbatim) ----------------------------- */

  --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;

  --hero-gap:    0.9rem;              /* the ONLY gap between stacked hero elements (brief §4) */
  --section-gap: var(--space-2xl);    /* the ONLY value setting space BETWEEN sections (brief §4) */

  /* --- Layout — brief §5: single-column at every width, 42rem measure on
     text blocks, 64rem on the index/process/form containers. The site-wide
     .container therefore carries the wider figure; .measure carries the
     narrower one, nested where the brief calls for a text-only column. --- */

  --layout-container: 64rem;
  --layout-measure:   42rem;
  --layout-gutter:    clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min:   44px;   /* WCAG touch-target floor, house-tech-spec §8 */

  /* --- Radius / border — brief §4.1: NOTHING above 0. Ruled, flat, square. */

  --radius-none: 0;
  --radius-sm:   0;   /* base.css consumes this for the skip link + focus ring */
  --border-hairline: 1px;
  --border-thick:    3px;   /* pull-quote left rule only */
  --border-style:    solid;

  /* --- Motion — brief §4 verbatim. --- */

  --duration-drawin:  1.4s;   /* rule-line draw-in, one-time */
  --duration-settle:  3.2s;   /* spirit-level bubble settle, one-time */
  --duration-tick-a:  5.4s;   /* independent tick fade loops */
  --duration-tick-b:  6.7s;
  --duration-tick-c:  7.9s;
  --delay-tick-b:     1.4s;
  --delay-tick-c:     2.6s;
  --duration-base:    300ms;  /* scroll-reveal system */
  --duration-slow:    600ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-shift:   1rem;
  --reveal-stagger: 60ms;

  /* --- Brief values expressed in prose, tokenised so site.css carries no
     raw literal (house-tech-spec §3). None of these was chosen at build
     time — each transcribes one brief sentence. --- */

  /* Hero top padding — brief §7's first-screen arithmetic table states this
     as a fixed 25.6px at both 375 and 1440 (not restated in §4's block; read
     from the table's own committed number, not chosen at build time). */
  --hero-pad-top:        1.6rem;
  --hero-field-height:   190px;   /* brief §6.2 — fixed, every width */

  /* Grade-level glyph — rendered in real CSS px (not SVG viewBox units) so
     the bubble stays a true circle at every field width. The field's SVG
     uses preserveAspectRatio="none" to hold a fixed height at a fluid
     width, which non-uniformly scales anything drawn inside it — harmless
     for lines, but it turns a circle into an ellipse. The level glyph is
     therefore an HTML/CSS overlay, positioned to sit exactly on the field's
     first grade-datum line (see the SVG's own y="46" — this field's height
     is fixed, so 1 viewBox unit = 1px vertically, and 46 − 18/2 = 37). */
  --grade-level-width:  120px;
  --grade-level-height: 18px;
  --grade-level-bubble: 12px;
  --grade-level-top:    37px;
  --grade-level-drift:  28px;   /* the bubble's off-centre start, brief §6.2 */
  --index-numeral-width: 2.4rem;  /* brief §6.3 — fixed at every width down to 320px */
  --index-numeral-size:  1.3rem;  /* brief §6.3 */
  --process-badge-size:  32px;    /* brief §6.4 — fixed, never fluid */
  --btn-pad-block:  0.85rem;      /* brief §6.2 primary CTA padding */
  --btn-pad-inline: 1.4rem;
  --hero-lead-measure: 34ch;      /* brief §6.2 lead: "max-width: 34ch" */

  /* --- Z layers (house) ---------------------------------------------------- */
  --z-base: 0;
  --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. Four static instances, two
   families (brief §3). unicode-range is byte-identical on all four faces.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Instrument Serif';
  src: url('../assets/fonts/instrument-serif-regular.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: 'Instrument Serif';
  src: url('../assets/fonts/instrument-serif-italic.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: 'Public Sans';
  src: url('../assets/fonts/public-sans-400.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: 'Public Sans';
  src: url('../assets/fonts/public-sans-600.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;
}

/* --------------------------------------------------------------------------
   Metrics-matched fallbacks (house-tech-spec §7/§8) — MEASURED, not guessed.
   Method: Fontaine's size-adjust/ascent-override/descent-override formula,
   computed with fontTools against the real shipped woff2 (post-subset) vs.
   each donor's static instance.

   TWO TIERS for Instrument Serif, not one. Georgia is the correct donor for
   the majority of real traffic (Windows, macOS, iOS all ship it), so it is
   tried first via 'Instrument Serif Fallback'. But it is not installed in
   this build/QA environment (verified: `fc-match Georgia` → DejaVu Serif,
   and Gelasio — Georgia's open metric twin, used here only because Georgia
   itself cannot be inspected — is not a font anything pre-installs either),
   so on Linux/Android/CI a SECOND named fallback, calibrated against DejaVu
   Serif (genuinely installed, verified with `fc-list`), is tried before
   falling through to an unmatched generic serif. Measured effect: this
   closes a Lighthouse-measured 0.030 CLS (house target ≈0, `lighthouse.mjs`)
   to 0.000, caused by exactly this environment lacking Georgia — full
   before/after in README.md. Public Sans needs only one tier: Liberation
   Sans, its donor, IS installed here and matches `local('Arial')`'s actual
   resolution path, verified the same way.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('Georgia'), local('Gelasio');
  font-weight: 400;
  font-style: normal;
  size-adjust: 71.78%;
  ascent-override: 137.92%;
  descent-override: 43.19%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('Georgia'), local('Gelasio');
  font-weight: 400;
  font-style: italic;
  size-adjust: 73.32%;
  ascent-override: 135.02%;
  descent-override: 42.28%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Instrument Serif Fallback 2';
  src: local('DejaVu Serif');
  font-weight: 400;
  font-style: normal;
  size-adjust: 82.31%;
  ascent-override: 120.28%;
  descent-override: 37.66%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Instrument Serif Fallback 2';
  src: local('DejaVu Serif');
  font-weight: 400;
  font-style: italic;
  size-adjust: 84.85%;
  ascent-override: 116.68%;
  descent-override: 36.54%;
  line-gap-override: 0%;
}

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

@font-face {
  font-family: 'Public Sans Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 600;
  font-style: normal;
  size-adjust: 100.42%;
  ascent-override: 94.61%;
  descent-override: 22.41%;
  line-gap-override: 0%;
}