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

   Welding Contractors, Keymar MD — warm-craft / barn-rust / split-hero.
   Compiled from runs/welding-contractors-keymar-md/brief.md §2 (colour,
   type, motion), §3 (layout), §5 (motion). Every value below restates a
   brief value; nothing here is improvised (house-tech-spec §3, §12).
   ========================================================================== */

:root {
  --scheme: light;                    /* one deliberate mode, per design-rules §6 */

  /* --- Colour (brief §2.2) -------------------------------------------------- */
  --color-bg:              #FBF3E7;   /* page ground — warm cream */
  --color-surface:         #F3E4CE;   /* raised panels, hero-lead band, form fields */
  --color-ink:              #2B2420;  /* body + heading text on bg/surface */
  --color-ink-muted:        #5B5048;  /* secondary text; also the control-boundary colour */

  --color-accent:           #A6472A;  /* barn-rust — fills, rules, large-text only */
  --color-accent-ink:       #FFF6EC;  /* text set ON the accent fill (buttons) */

  --color-border:           rgba(43, 36, 32, .14);  /* decorative hairlines only */
  --color-border-strong:    #5B5048;  /* = --color-ink-muted — a control's own boundary */
  --color-focus:            #2B2420;  /* = --color-ink — :focus-visible everywhere */
  --color-selection-bg:     #2B2420;
  --color-selection-ink:    #FBF3E7;

  /* No --color-focus-on-band: no dark band anywhere on this site (brief §2.2). */

  /* --- Typography (brief §2.4) --------------------------------------------
     EB Garamond (display, static 600 upright + 600 italic) + Karla (body,
     static 400 + 700). Four woff2 — design-rules §5's cap, met exactly.
     Weight is set with font-weight and NOTHING else: static instances, so
     font-variation-settings never appears on this site at all. */

  --font-display:  'EB Garamond',        'EB Garamond Fallback',        Georgia, 'Times New Roman', serif;
  --font-emphasis: 'EB Garamond Italic', 'EB Garamond Italic Fallback', Georgia, 'Times New Roman', serif;
  --font-body:     'Karla',              'Karla Fallback',              ui-sans-serif, system-ui, sans-serif;
  --font-body-strong: 'Karla Strong',    'Karla Strong Fallback',       ui-sans-serif, system-ui, sans-serif;

  --font-weight-body:        400;
  --font-weight-body-strong: 700;
  --font-weight-display:     600;      /* the only display weight used anywhere */

  /* --- Fluid scale (brief §2.5, computed at every breakpoint in the brief) -- */

  --text-eyebrow: 0.8rem;                          /* fixed — 12.8px */
  /* Critic round 1 FIX (render/wordwrap): the original 9vw slope reached its
     4.6rem ceiling at 818px, which put the hero H1 within ~6% of its max
     size exactly where the two-column split (48em) makes its own text
     column narrowest relative to the viewport — the longest word in the
     headline no longer fit and broke mid-letter under overflow-wrap:anywhere
     across the whole 770-1004px band (real tablet-portrait widths). The
     floor (41.6px, holds <=375px and well beyond) and the ceiling (73.6px,
     the value graded at 1440px) are UNCHANGED — both are exactly the brief
     §2.5 values at the two widths the clarity gate checks. Only the ramp's
     slope changes: 6vw reaches the same 4.6rem ceiling at 1226.7px instead
     of 818px, so the two-column band's font size stays proportionate to its
     narrowing column and the longest word (measured directly against the
     shipped face) clears its column at every width from 320-1600px with
     room to spare — verified by sweep, see build notes. */
  --text-hero:    clamp(2.6rem, 6vw, 4.6rem);      /* 41.6px @375 -> 73.6px @1440+ */
  --text-h2:      clamp(1.9rem, 5vw, 2.75rem);     /* 30.4px @375 -> 44px @1440+ */
  --text-h3:      clamp(1.25rem, 3vw, 1.6rem);     /* 20px @375 -> 25.6px @1440+ */
  --text-lead:    clamp(1.1rem, 2.2vw, 1.3rem);    /* 17.6px @375 -> 20.8px @1440+ */
  --text-body:    1rem;                            /* fixed — 16px */
  --text-small:   0.9rem;                          /* fixed — 14.4px */

  /* Leading, per element, computed in brief §3.2's first-screen table:
     eyebrow ~1.2 (15.4px/12.8px); H1 1.05 (43.7px/41.6px); lead ~1.4
     (24.6px/17.6px); facts ~1.3 (18.7px/14.4px). Body/snug are the house
     defaults base.css and site.css consume directly. */
  --leading-tight:   1.05;   /* h1 */
  --leading-snug:    1.25;   /* buttons */
  --leading-eyebrow: 1.2;
  --leading-lead:    1.4;
  --leading-facts:   1.3;
  --leading-body:    1.6;    /* reading paragraphs */

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;   /* eyebrow — uppercased via text-transform, never typed in caps */

  /* --- Space — the house scale, unchanged (brief cites these steps directly,
     §3.1/§3.2) ---------------------------------------------------------------- */

  --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 (brief §3.1). */
  --section-gap: var(--space-xl);     /* 64px, at every width */

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

  --layout-container: 72rem;
  --layout-measure:   62ch;
  --layout-gutter:    clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min:   44px;

  /* The hero field, per breakpoint. Below 48em, brief §3.2's target table
     gives the field row as "padding-top 24px + content >= 220px" = 244px
     total; --field-height is the CONTENT figure (220px) and the 24px lives
     as the field's own padding-block-start in site.css, so the two numbers
     stay separately named the way the brief states them. At and above 48em
     the two-column split gives the field the full column height (brief:
     "clears the fold trivially and is not separately tabulated") — 360px is
     a Builder execution value for that case, named here rather than left as
     a literal in site.css (house-tech-spec §3), on the same convention
     que-chilero-smithfield-ut's tokens.css documents for --media-rail-width. */
  --field-height:    220px;   /* below 48em — content only; +24px padding-top */
  --field-height-md: 360px;   /* >= 48em — split-hero side-by-side */

  /* --- Radius / border. No --shadow-* token carries a value (brief §2.2):
     flat, rule-and-whitespace separation throughout, ref-010's letterpress-
     card logic reads through weight and rule, not elevation. -------------- */
  --radius-none: 0;
  --radius-sm:   4px;          /* buttons only — brief §2.2 */

  --border-hairline: 1px;
  --border-thick:    3px;      /* the trust-strip card rule, brief §3.1 row 3 */
  --border-style:    solid;

  /* --- Motion (brief §5) ------------------------------------------------------ */

  --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 one signature move — "the joint holds" (brief §5): two independent,
     non-synced ambient loops, hero-only. */
  --loop-glint:    5.2s;   /* the weld-bead glint sweep */
  --loop-job-tag:  4.4s;   /* the job tag's gentle sway */

  /* Reduced-motion rest state (brief §5's reduced-motion statement): "the job
     tag sits at a fixed, level position rather than mid-sway" — held level,
     not rotated. The glint is held at a fixed partial position rather than
     invisible or snapped mid-sweep (house pattern, parks-and-sons-masonry's
     --glint-rest-*). */
  --job-tag-rest-transform: rotate(0deg);
  --glint-rest-transform: translateX(30%);
  --glint-rest-opacity: 0.55;

  /* Component sizes the brief does not cite a bare number for, named here
     rather than left as a literal in site.css (house-tech-spec §3) — the
     same convention que-chilero-smithfield-ut's tokens.css documents for its
     own --media-rail-width. */
  --job-tag-mark-size: 1.5rem;   /* the static corner mark heading each trust-strip card, brief §5 */
  --divider-img-width: 8rem;     /* imagery slots 2/3 — the small section-divider image, brief §4 */

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

@media (prefers-reduced-motion: reduce) {
  :root {
    /* @allow-literal: a duration token must resolve to a real time value */
    --loop-glint: 0.01ms;
    --loop-job-tag: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset, font-display: swap.
   Static EB Garamond upright 600 + italic 600; static Karla 400 + 700.
   Subset to house-tech-spec §8's declared safe range; identical
   unicode-range on all four faces (brief §2.4).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fonts/eb-garamond-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: 'EB Garamond Italic';
  src: url('../assets/fonts/eb-garamond-italic-600-latin.woff2') format('woff2');
  font-weight: 600;
  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: 'Karla';
  src: url('../assets/fonts/karla-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: 'Karla Strong';
  src: url('../assets/fonts/karla-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; brief §2.4) --------
   Georgia is the metric donor for both EB Garamond instances; Arial for both
   Karla instances. These four woff2 files are byte-identical to the ones
   shipped on que-chilero-smithfield-ut (same Google Fonts source, same house
   declared safe range subset), so the measured fallback numbers — taken
   there via canvas.measureText() in headless Chromium against the real
   shipped woff2 files and their metric-compatible stand-ins (Gelasio for
   Georgia, Liberation Sans for Arial; neither binary is installed in this
   build environment), against the test string "BESbswy the quick brown fox
   jumps 0123456789" at a fixed 200px — describe the same real faces here and
   are reused rather than re-measured. Acceptance test: Lighthouse CLS 0.000.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'EB Garamond Fallback';
  src: local('Georgia');
  size-adjust: 92.9%;
  ascent-override: 108.4%;
  descent-override: 32.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'EB Garamond Italic Fallback';
  src: local('Georgia');
  font-style: italic;
  size-adjust: 90.3%;
  ascent-override: 111.5%;
  descent-override: 33.0%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 101.3%;
  ascent-override: 90.5%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Strong Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 700;
  size-adjust: 99.8%;
  ascent-override: 91.9%;
  descent-override: 25.2%;
  line-gap-override: 0%;
}