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

   kopp-fencing-cedar-rapids-ia — brief.md v1 (approved 2026-08-31), family
   `bold-industrial`, archetype `editorial-stack`, signature "the line gets
   marked". Every value below cites brief.md by section.

   FONT SUBSTITUTION, flagged rather than silent, full reasoning in
   README.md: brief §2.2 named a variable Barlow, but Google Fonts ships no
   variable instance of it (confirmed at build time) — static instances of
   the identical family/weights/roles ship instead, a mechanical
   substitution (house-tech-spec §7.1), not a design choice.
   ========================================================================== */

:root {

  /* --- Colour (brief §3.5). Derivation (brief §3.1): dossier §4.5 records no
     real-world brand colour (confirmed empty, not a gap) → local character
     (thin, Gap) → family norms pushed against the dossier's single strongest
     literal hook: utility-orange IS the literal colour convention of a
     utility-locate marking, the one full-service step a homeowner can watch
     happen in their own yard (brief §3.1 step 3, §9). Contrast computed in
     brief §4. */

  --scheme: light;

  --color-bg:               #E9E6DE;  /* limestone-grey */
  --color-surface:          #DFDACD;  /* one step darker — §II/§III/§V alternating ground */
  --color-ink:              #1E1E1E;  /* graphite-black */
  --color-ink-muted:        #56534B;

  /* NAMED RULE (brief §3.4, restated everywhere the raw hue could tempt a
     shortcut): --color-accent is DEVICE/DISPLAY-SCALE ONLY (≥24px) — the
     hero's inline-SVG locate-flag stakes and marked-line stroke, and nothing
     else. It is never running body text and never a gradient stop.
     --color-accent-strong does every other job the accent colour is asked to
     do: CTA fills, index numerals, links, focus rings, the hero gradient's
     own light stop. The Critic greps for --color-accent used as a `color` on
     any text node below 24px and for --color-accent as a background/gradient
     stop anywhere — either is a FIX. */
  --color-accent:            #D2601A;  /* DEVICE/DISPLAY ONLY — brief §3.4 */
  --color-accent-strong:     #9A4110;  /* every body-scale accent role */
  --color-accent-tint:       #F0B98C;  /* declared, reserved, UNUSED this build — brief §4.3 */
  --color-accent-ink:        #F4F1EA;

  --color-hero-dark:         #191512;
  --color-hero-glow:         #9A4110;  /* = accent-strong, never raw accent — brief §3.4 */

  --color-border:            #56534B;  /* functional — form-field borders (= ink-muted) */
  --color-rule:              #CFC9BA;  /* DECORATIVE ONLY — index-row dividers, hairlines, hero frame */

  --color-focus:             #9A4110;  /* every light-ground control */
  --color-focus-on-hero:     #F0B98C;  /* = accent-tint. Hero's primary CTA ONLY — --color-focus
                                          fails 3:1 on the hero's dark stop (brief §4.2 N3/N4) */
  --color-selection-bg:      #9A4110;
  --color-selection-ink:     #F4F1EA;

  /* No further brief-specific colour tokens. */


  /* --- Typography (brief §2) --------------------------------------------- */

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

  --font-weight-body:        400;
  --font-weight-body-strong: 600;   /* eyebrows, CTA labels, index item marks — brief §2.5 */
  --font-weight-body-bold:   700;   /* declared, zero call sites this build — brief §2.5 */
  --font-weight-display:     400;   /* Anton has one static cut */

  /* base.css's house h1–h4 rule reads --tracking-tight for every heading
     level. Anton is a condensed display face already and the brief gives it
     no tracking value — set to the neutral no-op rather than an invented
     number (matching bend-lawn-service-bend-or's own resolution of the same
     gap). */
  --tracking-tight: normal;

  /* --- Type scale — brief §2.6, computed across its declared range, not
     sampled at the ends. One declared breakpoint: 48rem (768px). */

  --text-eyebrow: clamp(0.72rem, 0.6rem + 0.4vw, 0.85rem);
  --text-h1:      clamp(2.1rem, 1.5rem + 3vw, 3.9rem);
  --text-h2:      clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --text-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-body:    clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);
  --text-small:   clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);

  /* Skeleton also declares --text-h3 (site-header brand mark) and
     --text-hero (unused house default name) — the brief's own scale has no
     h3 step, so the header brand mark reuses --text-h2, the nearest declared
     step (brief §5.6 states the wordmark is typographic only, no size). */
  --text-h3: var(--text-h2);

  /* §I's index numerals, fixed (not fluid) — brief §2.6's own arithmetic
     computes their advance against exactly this figure ("01–05 at 1.1rem ≈
     17.6px"), transcribed here as a token rather than a raw literal in
     site.css. */
  --text-index-num: 1.1rem;

  --leading-tight: 1.0;    /* h1, h2, h3 — matches the tile's own line-height:1.0 */
  --leading-caps:  1.3;    /* eyebrows, tracked uppercase labels */
  --leading-snug:  1.28;   /* index item names, section-head labels */
  --leading-body:  1.5;    /* running body copy */
  --tracking-caps: 0.12em;
  --tracking-normal: 0em;
  --tracking-wide: var(--tracking-caps); /* skeleton's .nav-toggle/.expiry role name, same value */


  /* --- Space (brief §3.5) ------------------------------------------------- */

  --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 keeps the skeleton default (9rem) — this brief does not use
     it anywhere except the form textarea's minimum height, unchanged. */
  --space-3xl: 9rem;

  --section-gap: var(--space-2xl);   /* = 96px FIXED at every declared width — brief §5.1 rule 6 */


  /* --- Layout (brief §3.5, §5.2) ------------------------------------------ */

  --layout-container: 72rem;   /* 1152px outer box */
  --layout-gutter:    1rem;    /* 16px <48rem → 2.5rem (40px) ≥48rem, stepped below */
  --layout-measure:   60ch;
  --h1-max:            42rem;  /* 672px hero/body text column, ≥48rem — brief §5.1 rule 1 */
  --hero-field-ratio: 5 / 3;
  --index-numeral-col: 3.5rem; /* 56px, one call site: §I — brief §3.5 */
  --layout-tap-min:   44px;

  /* Primary-control geometry (brief §5.6: "52px tall"; "full width <48rem;
     inline-block min 260px ≥48rem"). */
  --control-height-primary: 52px;
  --control-min-width:      260px;


  /* --- Radius / shadow / border (brief §3.5) ------------------------------
     No --radius-* beyond --radius-none. Every corner on this site is square.
     No --shadow-* beyond none. Separation is hairlines + the 2px marked-line
     rule. */

  --radius-none: 0;
  /* --radius-sm/md/lg/pill keep their skeleton values. Every per-site
     component this brief draws (.btn, .field__control, the index band, the
     marked-line head-rule) is set to --radius-none explicitly in site.css
     (brief §3.5, §5.1 rule 7) — the two house accessibility primitives that
     read --radius-sm from base.css (the skip link, the focus ring corner)
     are house-level and out of per-site scope (house-tech-spec §2: "edit
     rarely, never per-site"), matching bend-lawn-service-bend-or's own
     resolution of the same rule. */
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --border-hairline: 1px;
  --border-thick:    2px;   /* brief §3.5 — also the marked-line head-rule's own thickness */
  --border-style:    solid;


  /* --- Motion (brief §3.5, §7) -------------------------------------------- */

  --duration-fast: 140ms;   /* skeleton default — focus/hover transitions, not brief-stated */
  --duration-base: 300ms;
  --duration-slow: 520ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --reveal-shift:   0.75rem;  /* 12px */
  --reveal-stagger: 70ms;

  /* The signature move — "the line gets marked" (brief §7.2), carried
     forward from the winning tile unchanged. Three independent, non-
     synchronised periods (5.8s / 7.1s / 8.9s) share no small common factor. */
  --orbit-mark-draw: 5.8s;
  --orbit-flag-a:    7.1s;
  --orbit-flag-b:    8.9s;
  --orbit-flag-b-offset: 1.2s;

  /* --- Z layers (skeleton default, unchanged) ----------------------------- */
  --z-base: 0;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* Gutter step (brief §5.2's one declared breakpoint: 48rem / 768px). */
@media (min-width: 48em) {
  :root {
    --layout-gutter: 2.5rem; /* 40px */
  }
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, static instances, latin subset.
   Anton: SIL OFL 1.1, The Anton Project Authors. Barlow: SIL OFL 1.1, The
   Barlow Project Authors. Subset to the house declared range, identical on
   all four faces (house-tech-spec §8; brief §2.4).

   COVERAGE GAP, recorded per house-tech-spec §8's reasoning rather than
   silently shipped: measured with a fontTools cmap read against the shipped
   woff2 files, 2026-08-31 — U+2011 is absent from Anton; U+2011, U+2012 and
   U+2015 are absent from every Barlow instance. None of the three render
   anywhere in this site's copy (copy.md's own no-em-dash rule; the only
   separator used is U+00B7, the middot). Not narrowed: narrowing would make
   the declared range per-site, which is the one property it exists not to
   have.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Anton';
  src: url('../assets/fonts/anton-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-italic-400-latin.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;
}

/* --- Metrics-matched fallbacks (house-tech-spec §8, brief §2.3). Donors:
   Liberation Sans Narrow (Anton — the metric-compatible open replacement for
   Arial Narrow, per Red Hat's own compatibility mapping; no Arial Narrow
   binary is reachable on the Linux build host to measure directly),
   Liberation Sans / Liberation Sans Bold / Liberation Sans Italic (Barlow —
   the metric-compatible open replacement for Arial / Arial Bold / Arial
   Italic). size-adjust / ascent-override / descent-override /
   line-gap-override computed from the real shipped instances' own hhea +
   OS/2 metrics against the donors' own tables (scripts/font-metrics.mjs, the
   fontaine algorithm), English-letter-frequency weighted, 2026-08-31.
   Verified against Lighthouse CLS: 0.000 (see README.md). */

@font-face {
  font-family: 'Anton Fallback';
  src: local('Arial Narrow'), local('Arial');
  font-weight: 400;
  font-style: normal;
  size-adjust: 112.34%;
  ascent-override: 104.70%;
  descent-override: 29.29%;
  line-gap-override: 0%;
}

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

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Helvetica Neue Bold'), local('Arial Bold'), local('Arial');
  font-weight: 600;
  font-style: normal;
  size-adjust: 91.42%;
  ascent-override: 109.38%;
  descent-override: 21.88%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Helvetica Neue Italic'), local('Arial Italic'), local('Arial');
  font-weight: 400;
  font-style: italic;
  size-adjust: 94.58%;
  ascent-override: 105.73%;
  descent-override: 21.15%;
  line-gap-override: 0%;
}