/* ==========================================================================
   tokens.css — the design brief, compiled. c-and-l-welding-llc-elkview-wv.

   Source: runs/c-and-l-welding-llc-elkview-wv/brief.md §2. Every value below
   traces to that section; nothing here is improvised. THIS FILE IS THE ONLY
   PLACE RAW VALUES LIVE (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour --------------------------------------------------------------
     Brief §2.2/§2.3. Palette derivation: real-world colour is void for this
     business (no logo/wrap/signage anywhere public, dossier §4.5) — the
     Thryv template default is explicitly disclaimed and owed no echo — so the
     palette is drawn from the trade's own material physics instead:
     heat-affected steel runs straw/bronze/violet/blue (playbook §6.1).
     Temper-straw (bright accent) is fills and rules ONLY — never a text
     role, anywhere on this page, no decorative-numeral carve-out (§2.3,
     revised r2), because it fails AA even at large-text size (2.41:1).
     Deep-straw carries every accent TEXT role instead, with zero exceptions
     (4.71:1 vs bg). One light mode only. */

  --scheme: light;

  --color-bg: #FAF7F2;                /* page ground — bone-white */
  --color-surface: #F1EBE0;           /* hero-lead band, any raised panel */
  --color-ink: #26282B;               /* body + heading text on bg/surface */
  --color-ink-muted: #565A5E;         /* secondary text; also the control-boundary colour */
  --color-accent: #C99A34;            /* temper-straw — fills and rules only, no text-role exceptions */
  --color-accent-ink: #26282B;        /* text set ON the bright accent fill (= --color-ink) */

  /* House-required structural colours (consumed by base.css) */
  --color-border: rgba(38, 40, 43, .14);  /* decorative hairlines only (= --color-ink at 14% alpha) */
  --color-border-strong: #565A5E;         /* a control's own boundary, WCAG 1.4.11 (= --color-ink-muted) */

  --color-focus: #26282B;             /* :focus-visible ring everywhere (= --color-ink; no dark panel exists) */

  --color-selection-bg: #26282B;
  --color-selection-ink: #FAF7F2;

  /* Brief-specific: every accent TEXT role (process numerals, trust-strip
     lead figures if ever accented, footer hours emphasis) — brief §2.2/§2.3.
     Bright accent above is FORBIDDEN as text (2.41:1); this is what stands
     in for it at 4.71:1 against --color-bg. Never placed on --color-surface
     at body size (4.25:1, fails AA body) — brief §2.3 names this explicitly
     so no future edit reaches for it there. */
  --color-accent-deep: #8A6A1F;


  /* --- Typography ------------------------------------------------------------
     Brief §2.4. Two families, four static-instance woff2 files (the ≤4-file
     ceiling, exactly met): Source Serif 4 (upright + italic, weight 500) and
     Work Sans (400, 700). Both OFL, self-hostable, Google Fonts. The italic
     STYLE is the emphasis device, not a heavier weight — §2.4's own point,
     avoiding a second display cut. Fallback stacks + @font-face blocks are at
     the bottom of this file. */

  --font-display: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif;
  --font-emphasis: 'Source Serif 4 Italic', 'Source Serif 4 Italic Fallback', Georgia, serif;
  --font-body: 'Work Sans', 'Work Sans Fallback', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 700;
  --font-weight-display: 500;

  /* --- Type scale ------------------------------------------------------------
     Brief §2.5, computed at every breakpoint the token declares. Pure-vw
     preferred values so the floor/ceiling boundaries are exact, checkable
     widths. Body/lead/small are FIXED per §2.5's own argument: a reading
     paragraph does not benefit from scaling with viewport width the way a
     hero display size does (house precedent, gibbons-electric-rockford-il
     brief §2.5). --text-index is the hero's one-off decorative numeral only
     (§2.3, §3.2) — never a second counter (§2.5's nested-counters check). */

  --text-eyebrow: 0.8125rem;                    /* 13px, fixed */
  --text-h1: clamp(2rem, 8vw, 3.5rem);          /* 32px @ <=400px, 56px @ >=700px */
  --text-h2: clamp(1.125rem, 4vw, 1.75rem);     /* 18px @ <=450px, 28px @ >=700px */
  --text-index: clamp(2.5rem, 11vw, 4.75rem);   /* 40px @ <=364px, 76px @ >=691px — decorative only */
  --text-body: 1rem;                            /* 16px, fixed */
  --text-lead: 0.9375rem;                       /* 15px, fixed — also the header brand size: brief §2.5
                                                    defines no --text-h3, and reusing this fixed token
                                                    avoids inventing an unstated value for the wordmark */
  --text-small: 0.875rem;                       /* 14px, fixed */

  /* Brief §3.2's own arithmetic fixes these two leading values (measured
     against the hero's H1 and eyebrow line heights): 1.1 for the H1 (32px x
     1.1 = 35.2px/line) and 1.15 for the eyebrow (13px x 1.15 = ~15px). */
  --leading-tight: 1.1;
  --leading-snug: 1.15;
  --leading-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;

  /* --- Space -------------------------------------------------------------
     Scale derived from brief §3.2's first-screen arithmetic, which fixes
     four exact rungs (xs=8px, sm=14.4px, md=24px, xl=52px — the section-gap
     itself, brief §3.1); the remaining rungs fill the scale between and
     above them on the same progression, unused by the fold arithmetic but
     needed by base.css/site.css's other components. */

  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.375rem;  /* 6px */
  --space-xs: 0.5rem;     /* 8px — brief §3.2: eyebrow-to-H1 gap */
  --space-sm: 0.9rem;     /* 14.4px — brief §3.2: H1-to-CTA and CTA-to-field gaps */
  --space-md: 1.5rem;     /* 24px — brief §3.2: hero padding-block */
  --space-lg: 2.25rem;    /* 36px */
  --space-xl: 3.25rem;    /* 52px — brief §3.1: --section-gap */
  --space-2xl: 4.5rem;    /* 72px */
  --space-3xl: 7rem;      /* 112px */

  /* Brief §3.1: the ONE token setting space BETWEEN sections. Fixed, not
     fluid, at every breakpoint. No intra-section gap on this page exceeds
     2 x this (104px). */
  --section-gap: var(--space-xl);

  /* --- Layout ------------------------------------------------------------ */

  --layout-container: 72rem;
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;             /* WCAG touch target floor; also the CTA-row height, brief §3.2 */

  /* Brief §3.2: the hero field (image + diagram overlay) is a fixed 240px
     block at mobile, matching the arithmetic table exactly. Free-flowing
     (aspect-ratio) from the tablet breakpoint up, house precedent
     (calwater-drilling-company-turlock-ca's --layout-hero-field-block). */
  --layout-hero-field-block: 15rem;   /* 240px */

  /* The process section's numeral column (brief §3.1 row 5) — fixed width so
     the three steps' body copy lines up regardless of "01"/"02"/"03"'s own
     measured glyph width. House precedent: calwater-drilling-company-
     turlock-ca's --layout-numeral-col. */
  --layout-numeral-col: 2.75rem;      /* 44px */

  /* --- Radius / shadow / border -------------------------------------------
     Brief §2.2: this site is flat. No --shadow-* token carries a value.
     --radius-sm is the only radius in use (buttons only); the rest of the
     required group exists per the token contract but is unused, so it stays
     at the same flat value rather than introducing an unused second look. */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-pill: 4px;

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

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

  /* --- Motion --------------------------------------------------------------
     House values (brief §5): reveals, staggers. */

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

  /* Brief §5's bespoke signature — "the bevel draws true" — hero-only,
     plays once on load. The draw durations are stated by the brief; the
     tick's own draw length is not (the brief states only "short duration"),
     so 0.6s is the Builder's mechanical fill, sized proportionately against
     the 1.8s bevel draw it completes. Two ambient loops, independent periods,
     never synced (brief §5, C2-DECISION nudge 1: exactly two loops). */
  --duration-bevel-draw: 1.8s;
  --delay-tick-draw: 1.6s;
  --duration-tick-draw: 0.6s;
  --duration-angle-loop: 6.8s;
  --duration-glint-loop: 5.4s;

  /* The glint's own drift distance inside the diagram (brief §5's "travels
     along the diagram" — a short, ambient traverse, not a page-scale move).
     House precedent for a motion-distance-as-token:
     calwater-drilling-company-turlock-ca's --motion-flow-shift. */
  --motion-glint-shift-x: 2.25rem;   /* 36px */
  --motion-glint-shift-y: -0.625rem; /* -10px */

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

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset (house declared safe range,
   house-tech-spec §8), font-display: swap. SIL OFL 1.1, both families
   (assets/fonts/OFL-SourceSerif4.txt, OFL-WorkSans.txt). Brief §2.4: two
   STATIC instances per family (not variable), weight 500 for Source Serif 4
   (upright + italic, its own family name per the token stack), 400/700 for
   Work Sans.

   Metrics-matched fallbacks measured with scripts/font-metrics.mjs against
   the real shipped woff2 files: Gelasio for Georgia (no distributable
   Georgia file exists; Gelasio is its open metric twin, precedent
   gibbons-electric-rockford-il, dannys-auto-clinic-abilene-tx), Liberation
   Sans for Arial (this build environment's own `fc-match Arial` resolution).
   Each local() still names the real font that renders when a visitor's
   system has it. -------------------------------------------------------- */

@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  font-weight: 500;
  font-style: normal;
  size-adjust: 108.94%;
  ascent-override: 95.1%;
  descent-override: 30.75%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Serif 4 Italic Fallback';
  src: local('Georgia Italic'), local('Georgia');
  font-weight: 500;
  font-style: italic;
  size-adjust: 99.15%;
  ascent-override: 104.49%;
  descent-override: 33.79%;
  line-gap-override: 0%;
}

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

@font-face {
  font-family: 'Work Sans Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 700;
  font-style: normal;
  size-adjust: 104.7%;
  ascent-override: 88.82%;
  descent-override: 23.21%;
  line-gap-override: 0%;
}

/* House declared safe range (house-tech-spec §8) — identical on every face
   on this site, no exceptions, including the italic/emphasis-only face. The
   degree symbol in the diagram's "45°" label is U+00B0, already inside this
   range.

   Coverage note (measured with fontTools, not assumed): Source Serif 4
   (both styles) carries no U+2011 glyph at all — a family gap, not a
   subsetting artefact — while Work Sans does. Asymmetric, unlike the pilot
   site's uniform gap (house-tech-spec §8), which §8 calls a FIX only if the
   character is actually rendered. It is not: copy.md uses no U+2011
   anywhere, every hyphen is plain ASCII U+002D. Re-check before any copy
   amendment introduces a non-breaking hyphen. */
@font-face {
  font-family: 'Source Serif 4';
  src: url('../assets/fonts/source-serif-4-500-latin.woff2') format('woff2');
  font-weight: 500;
  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: 'Source Serif 4 Italic';
  src: url('../assets/fonts/source-serif-4-500italic-latin.woff2') format('woff2');
  font-weight: 500;
  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: 'Work Sans';
  src: url('../assets/fonts/work-sans-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: 'Work Sans';
  src: url('../assets/fonts/work-sans-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;
}