/* ==========================================================================
   tokens.css — Minnich Manufacturing, Fort Wayne IN. Source: brief.md §2
   (palette, type, fluid scale, container, capability-tag geometry) and §5
   (motion — "the plate holds"). Archetype: poster-hero. Family: retro-local.
   Palette: iron-oxide / kraft / light. Every value below traces to brief
   §2.1-§2.9, §3.2 or §5, or is a house default the brief did not override
   (house-tech-spec §3). Nothing improvised.
   ========================================================================== */

:root {

  /* --- Colour --------------------------------------------------------------
     brief §2.1-§2.4. Step 1 (real-world colour) is the WEAK case: #4a98e2 is
     CSS-only with no second real-world sighting (dossier §4.5) and carries no
     brand-echo obligation (dossier-schema §3.2). Step 2 (local character):
     no specific hue signal. Step 3: playbook §7's retro-local opening, earned
     on Minnich's 47-year V-tier tenure — iron-oxide as raw stock waiting to
     be machined, the trade's own material register (brief §2.1). */

  --scheme: light;

  --color-bg: #EDE2C9;                /* page ground — kraft/parchment */
  --color-surface: #E3D5B4;           /* plate/tag stock — capability tags, tenure band, form panel */
  --color-ink: #241D18;               /* body + heading text, structural borders */
  --color-ink-muted: #5C4F3D;         /* secondary text — 6.18:1 on bg, 5.47:1 on surface */
  --color-accent: #A8432A;            /* iron-oxide rust — eyebrow text, H1 accent word, rivet fills, primary CTA fill. NEVER as text on --color-surface (brief §2.4 forbidden row: 4.13:1, fails AA) */
  --color-accent-ink: #FFFFFF;        /* text set ON accent fills — 6.00:1 */

  /* House-required structural colours */
  --color-border: #CBB98F;            /* DECORATIVE hairlines only — 1.50:1, ornamental (brief §2.3/§2.4) */

  /* A CONTROL'S OWN BOUNDARY, WCAG 1.4.11: >=3:1 against bg AND surface.
     Brief §2.3 reuses --color-ink-muted's hex rather than a fifth literal. */
  --color-border-strong: #5C4F3D;

  --color-focus: #241D18;             /* :focus-visible — 12.92:1 / 11.43:1. One ring colour
                                          suffices site-wide: no dark band on this site (brief §2.3). */

  --color-selection-bg: #241D18;
  --color-selection-ink: #EDE2C9;

  /* --- Typography ------------------------------------------------------------
     brief §2.5. Yeseva One (display, 400 only) + Karla (body, 400/700), both
     static instances, OFL, self-hosted. Metrics-matched fallback faces
     declared below (house-tech-spec §7/§8) so font-display: swap costs no
     CLS; each is named ahead of the terminal system fallback the brief states
     literally (Georgia / Arial). */

  --font-display: 'Yeseva One', 'Yeseva One Fallback', Georgia, serif;
  --font-body: 'Karla', 'Karla Fallback', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 700;
  --font-weight-display: 400;         /* Yeseva One ships one weight only (brief §2.5) */

  /* --- Type scale ------------------------------------------------------------
     brief §2.6, computed at floor/375/414/768/1024/ceiling in the brief
     itself. Token NAMES are the brief's own. */

  --text-hero: clamp(2.2rem, 1.8rem + 2vw, 3.6rem);           /* H1 — 35.2px @320 to 57.6px @1440 */
  --text-h2: clamp(1.4rem, 1.229rem + 0.857vw, 2rem);         /* section heads — 22.4px @320 to 32.0px @1440 */

  /* Fixed tokens (brief §2.6) — state the same number everywhere and mean it. */
  --text-eyebrow: 0.8125rem;    /* 13.0px — every eyebrow on the site */
  --text-lead: 1.125rem;        /* 18.0px — hero lead line */
  --text-body: 1rem;            /* 16.0px — running body copy, tag lists */
  --text-small: 0.875rem;       /* 14.0px — facts strip, footer fine print, tag body copy */
  --text-tag-label: 0.8125rem;  /* 13.0px — capability-tag headers (uppercase, Karla 700) */
  --text-badge-num: 2.4rem;     /* 38.4px — tenure-band numerals, a distinct system from §2.8's tags */

  /* Header wordmark (Karla 700, copy.md §3) — not one of brief §2.6's named
     scale steps, so it reuses --text-lead rather than inventing a literal
     size (design-rules §5: reuse before inventing). */
  --text-brand: var(--text-lead);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;
  --leading-hero: 1.08;         /* brief §3.2: H1, 36.3px x 1.08 x 2 lines = 78.4px */
  --leading-eyebrow: 1.3;       /* brief §3.2: eyebrow, 13px x 1.3 x 2 lines = 33.8px */
  --leading-lead: 1.5;          /* brief §3.2: hero lead line, 18px x 1.5 x 3 lines = 81.0px */
  --leading-facts: 1.4;         /* brief §3.2: facts strip, 14px x 1.4 x 2 lines = 39.2px */

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.1em;       /* brief §2.9: hero eyebrow letter-spacing */

  /* --- Space -------------------------------------------------------------
     House scale, unchanged — brief argues no override. */

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

  --section-gap: var(--space-xl);     /* brief §3: 64px, fixed at every breakpoint */

  /* --- Layout ------------------------------------------------------------
     brief §2.7. --container-pad and --hero-col-max are the brief's own named
     tokens, and per §2.8 the SAME 672px-capped column governs every section
     on the page (not the hero alone) — the capability tags' 3-across yield
     math is computed directly against this column. */

  --layout-container: 72rem;          /* house default — unused directly; --hero-col-max is the page's own column */
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;

  --container-pad: clamp(1rem, 4vw, 2.75rem);  /* floor 16px, ceiling 44px (brief §2.7) */
  --hero-col-max: 42rem;                       /* 672px — the page's single content-column cap (brief §2.7) */

  /* First-screen arithmetic (brief §3.2's target stack) — exact fixed
     rhythm tokens the brief computed, same at every breakpoint. */
  --hero-pad-top: 1.5rem;       /* 24.0px */
  --hero-gap-eyebrow-h1: 0.75rem;  /* 12.0px */
  --hero-gap-h1-cta: 1.25rem;      /* 20.0px */
  --hero-gap-cta-field: 1.25rem;   /* 20.0px */
  --hero-gap-field-lead: 1.25rem;  /* 20.0px */
  --hero-gap-lead-facts: 0.75rem;  /* 12.0px */
  --hero-pad-bottom: 2rem;         /* 32.0px */
  --control-height: 3rem;          /* 48.0px — primary CTA control height (brief §3.2) */

  /* Sticky chrome (brief §3.1 header row, §3.2): 56px header content + 1px
     border rule = 57px. Header is sticky; the preview expiry bar (44px,
     house default, not overridden here) is static flow ahead of it, so the
     two sum to the brief's own measured 101px at initial paint. */
  --chrome-header: 3.5rem;      /* 56px */

  /* --- The engraved-plate field (brief §2.7, §3.2): height = width x 0.82.
     aspect-ratio: 1 / 0.82 encodes that directly. */
  --field-ratio: 1 / 0.82;

  /* --- Capability-tag system (brief §2.8): fixed px at every breakpoint —
     a fixed-minimum flex item, not a fluid value. */
  --tag-min: 200px;
  --tag-gap: 1rem;               /* 16px, <=16px per brief §2.8/§3 */
  --tag-rivet: 4px;              /* fixed corner-rivet dot, never scales with tag width (brief §2.8) */
  --tag-accent-size: 3.5rem;     /* 56px — the Materials/Equipment tag's own accent-texture thumbnail */

  /* The hero's own rivet-glint dots (brief §5) — the tag rivet is explicitly
     this device "shrunk to card scale" (brief §2.8), so the hero's own is
     the larger original: sized against the baked plate image's own corner
     fasteners rather than invented. */
  --hero-rivet: 0.875rem;        /* 14px */

  /* --- Radius / shadow / border -----------------------------------------
     House scale. --radius-md (6px) is the brief's chosen step for the
     rounded-rectangle plate device (§2.8) — hero field, capability tags and
     tenure-band badges all read as one milled-plate family; nothing else on
     the page is rounded (design-rules §4: no uniform radius on everything). */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

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

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

  /* --- Motion ------------------------------------------------------------
     House reveal tokens, unchanged (brief §5: standard reveals elsewhere use
     these as-is). base.css collapses every duration to ~0 under
     prefers-reduced-motion: reduce. */

  --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 plate holds" — brief §5's bespoke, hero-only, continuous ambient
     loops. Independent periods sharing no short common multiple, so the
     five motions drift in and out of phase (brief §5). Collapsed to a
     settled resting state under reduced motion, below. */
  --duration-sweep: 8.8s;         /* independent, infinite — the specular sweep */
  --duration-rivet: 6.4s;         /* independent, infinite — each corner's glint */
  --rivet-delay-1: 0s;
  --rivet-delay-2: 1.6s;
  --rivet-delay-3: 3.1s;
  --rivet-delay-4: 4.7s;
  --rivet-rest-opacity: 0.78;      /* reduced-motion resting glint (brief §5) */

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

/* Brief §5 / house-tech-spec §8: prefers-reduced-motion removes every
   animation and reveal, no exception. base.css collapses the shared duration
   tokens; the two bespoke hero timings above are this site's own and are
   collapsed here on the same precedent. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-sweep: 0.01ms;
    --duration-rivet: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   @font-face — brief §2.5. Two families, three woff2 files (<=2 families /
   <=4 files, one file of headroom, matching the Yeseva One/Karla pairing
   already in this registry at lewis-property-maintenance-champaign-il).
   METRICS-MATCHED FALLBACKS FIRST so swap costs no CLS: overrides measured
   against these same real webfont files (identical faces, weights and files
   as lewis-property-maintenance-champaign-il) and a metric-compatible
   stand-in (Gelasio for Georgia, Liberation Sans for Arial); each `local()`
   still names the REAL font.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Yeseva One Fallback';
  src: local('Georgia');
  font-weight: 400;
  font-style: normal;
  size-adjust: 116.56%;
  ascent-override: 78.5%;
  descent-override: 20.59%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial');
  font-weight: 400;
  font-style: normal;
  size-adjust: 103.53%;
  ascent-override: 88.57%;
  descent-override: 24.34%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial');
  font-weight: 700;
  font-style: normal;
  size-adjust: 100.06%;
  ascent-override: 91.64%;
  descent-override: 25.18%;
  line-gap-override: 0%;
}

/* House declared safe range (spec §8), identical on every face, no
   exceptions. COVERAGE GAP, recorded per §8's own practice: U+2010, U+2011,
   U+2012, U+2015, U+2032, U+2033 are in the declared range and absent from
   ALL THREE files here (same gap the range's own worked example records for
   the pilot site). copy.md carries no em dash and no feet/inches marks
   anywhere a customer reads (copy.md preamble, gate 5); since every face
   lacks the same six, the fallback failure mode would be consistent across
   faces, never mid-sentence. */
@font-face {
  font-family: 'Yeseva One';
  src: url('../assets/fonts/yeseva-one-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';
  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';
  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;
}