/* design-tokens-a.css — Concept A "Shop Floor".
   Dark, garage-forward. Carbon and steel neutrals lifted from shop-floor
   material, one signal accent like fresh paint under work lights.
   ACCENT PROVENANCE: the shop's own yellow, verified from Chris's photos
   of the real building and sign (see design-sources.md brand colors):
   wall yellow #e8c832 base with the brighter sign-field yellow #f0d020
   as the strong step. Replaced the invented signal orange 2026-07-08 so
   every concept draws from the verified brand palette.
   Bold condensed display type, set in caps like panel stencils.
   THE ONLY FILE IN CONCEPT A ALLOWED TO HOLD RAW VISUAL VALUES. */

@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald-var.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Sign-painter lettering for the grafted trade strip (from concept E) */
@font-face {
  font-family: "Archivo Black";
  src: url("../assets/fonts/archivoblack.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* --- Color: carbon, steel, verified shop yellow --- */
  --bg: #131417;
  --bg-deep: #0c0d0f;
  --surface: #1b1d21;
  --surface-2: #22252b;
  --heading: #f4f3f0;
  --text: #c9c9c4;
  --text-mute: #9a9b97;
  --text-faint: #8a8b87; /* >= 4.5:1 on --bg for WCAG 1.4.3 */
  --accent: #e8c832;
  --accent-strong: #f0d020;
  --on-accent: #16130f;
  --line: rgba(244, 243, 240, 0.08);
  --line-strong: rgba(244, 243, 240, 0.2);
  --header-bg: rgba(12, 13, 15, 0.86);
  --field-bg: #101114;
  --chip-bg: rgba(12, 13, 15, 0.78);
  --hero-scrim: linear-gradient(90deg, rgba(12, 13, 15, 0.94) 12%, rgba(12, 13, 15, 0.55) 55%, rgba(12, 13, 15, 0.18) 100%);
  --hero-scrim-mobile: linear-gradient(180deg, rgba(12, 13, 15, 0.4) 0%, rgba(12, 13, 15, 0.92) 78%);
  --nav-scrim: rgba(12, 13, 15, 0.55);
  --steel-line: rgba(244, 243, 240, 0.045);
  --grain-opacity: 0.10;

  /* --- Type: condensed stencil display + quiet grotesk body --- */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --w-display: 600;
  --w-body: 400;
  --w-semibold: 600;
  --w-bold: 700;
  --display-case: uppercase;
  --track-display: 0.015em;
  --track-wide: 0.06em;
  --track-wider: 0.14em;
  --leading-tight: 1.04;
  --leading-body: 1.6;

  --text-2xs: 0.72rem;
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-md: 1.15rem;
  --text-lg: 1.2rem;
  --text-xl: 1.6rem;
  --text-2xl: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --text-hero: clamp(2.9rem, 1.6rem + 6vw, 6rem);
  --text-stat: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);

  /* --- Space / shape / motion --- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 1.75rem; --s-8: 2rem;
  --s-9: 2.5rem; --s-10: 3rem; --s-12: 4rem; --s-14: 5rem; --s-16: 6.5rem;
  --sec-pad: clamp(4rem, 3rem + 4vw, 7rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1240px;
  --maxw-text: 46rem;
  --nav-h: 4.25rem;
  --radius: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 24px 60px rgba(0, 0, 0, 0.55);
  --dur-fast: 0.15s;
  --dur: 0.25s;
  --dur-slow: 0.7s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-nav: 50;

  /* --- Signature: before/after slider --- */
  --ba-before-filter: grayscale(0.9) brightness(0.62) contrast(0.92) sepia(0.18);
  --ba-handle: #e8c832;
  --ba-handle-line: rgba(232, 200, 50, 0.9);
  --ba-label-bg: rgba(12, 13, 15, 0.8);

  /* --- Grafted sections (production combination, 7/14) ---
     Trade strip + service tiles from concept E, gallery windows from
     concept C, re-skinned to this concept's dark carbon palette. */
  --font-strip: "Archivo Black", "Arial Black", sans-serif;
  --w-strip: 400;
  --text-strip: clamp(2.2rem, 6vw, 4.5rem);
  --track-strip: 0;
  --bg-zone: #1b1d21;        /* tile field, matches --surface steel */
  --bg-zone-hover: #22252b;  /* raised step, matches --surface-2 */
  --field-yellow: #e8c832;   /* verified shop yellow, same as --accent */
  --on-yellow: #16130f;      /* ink on the yellow field */
  --tile-bar: 2px;
  --drift-scale: 1.12;       /* gallery depth-drift zoom (concept C) */
}

/* Trade strip lettering. Lives here because stroked text needs raw values
   (same placement rule concept E uses). Hollow letters tuned for the dark
   carbon band; decorative only (the track is aria-hidden). */
.strip-word { color: #43464d; }
@supports (-webkit-text-stroke: 2px #43464d) {
  .strip-word { -webkit-text-stroke: 2px #565a62; color: transparent; }
}