/* Roughley Mechanical — token extensions
   Loaded immediately AFTER tokens.css. Plain source-order cascade, both
   unlayered, so declarations here win at equal specificity.

   tokens.css is the transcription-of-record: every value in it is a confirmed
   statement from the brand system page. Nothing is edited there. This file
   holds three categorically different things, kept separate on purpose:

     (a) OBSERVED — used in the brand artifact but never stated as a rule
     (b) CORRECTED — two transcription bugs in tokens.css
     (c) INVENTED — spacing, type scale, borders, focus. The brand system
         documents none of these; they are our decisions, not the brand's.

   Mirrors the confirmed/outstanding split already kept in brand/NOTES.md. */

:root {

  /* ── (a) OBSERVED in the artifact, not named in "02 — Color" ─────────── */
  --white:        #FFFFFF;
  --body-ink:     #3A3D42;  /* supporting copy in sections 01/02/03/05      */
  --meta-ink:     #4A4D52;  /* date, dealer-badge label, hairlines on dark  */
  --copper-hover: #8E4A20;  /* primary button hover                         */
  --copper-tint:  #D98A55;  /* the copper substitute on Iron grounds        */

  /* ── (b) CORRECTIONS to tokens.css ───────────────────────────────────── */

  /* tokens.css:28 lists "Archivo Expanded" as a family. It is not one — the
     three widths are a font-stretch/wdth axis on the single Archivo family
     (the @font-face descriptor is `font-stretch: 62% 125%`), and the string
     appears nowhere in the brand artifact. Left in place, a font by that name
     installed locally would silently hijack body text. */
  --font:      "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* tokens.css:22 maps --text-muted to Slate. The artifact never sets text in
     Slate — Slate is the logo ground, and at 3.49:1 on Paper it would fail
     WCAG AA for normal text. Supporting copy is #3A3D42, metadata #4A4D52. */
  --text-body:  var(--body-ink);
  --text-meta:  var(--meta-ink);
  --text-muted: var(--body-ink);          /* was var(--slate) */

  /* ── Semantic additions ──────────────────────────────────────────────── */
  --accent-hover:   var(--copper-hover);
  --accent-on-dark: var(--copper-tint);   /* copper on Iron is 3.50:1 — banned */
  --surface:        var(--paper);
  --surface-card:   var(--white);
  --ground-dark:    var(--iron);

  /* ── (c) INVENTED — borders. Square corners are non-negotiable. ──────── */
  --radius:    0;
  --bw:        2px;   /* the structural border */
  --bw-hair:   1px;
  --border:      var(--bw)      solid var(--iron);
  --border-hair: var(--bw-hair) solid var(--steel);  /* list top rule       */
  --border-fine: var(--bw-hair) solid var(--mist);   /* list row rule       */
  --border-hair-dark: var(--bw-hair) solid var(--meta-ink);
  --border-fine-dark: var(--bw-hair) solid var(--graphite);

  /* ── (c) INVENTED — spacing.
     Value-named, not index-named. The brand system documents no spacing
     scale; these are the values observed in its inline styles, and their gaps
     are irregular (18, 20, 24, 26, 28, 32, 40, 56, 96, 120) because no scale
     was ever designed. An index scale would imply a rhythm that isn't there.
     Snapping to a clean 8px scale would change button padding from the
     spec'd 16px 26px to 16px 24px — a visible deviation. Fidelity wins. ── */
  --space-4:   4px;   --space-6:   6px;   --space-8:   8px;   --space-10: 10px;
  --space-12: 12px;   --space-14: 14px;   --space-16: 16px;   --space-18: 18px;
  --space-20: 20px;   --space-24: 24px;   --space-26: 26px;   --space-28: 28px;
  --space-32: 32px;   --space-40: 40px;   --space-56: 56px;   --space-72: 72px;
  --space-96: 96px;   --space-120: 120px;

  /* ── Layout roles ────────────────────────────────────────────────────── */
  --shell-max:   1200px;
  --measure:     640px;   /* body copy max-width, per the brand's Body spec */
  --rail:        220px;   /* the section label column                       */
  --gap-section: var(--space-56);  /* → 96px at >=48em, see layout.css      */
  --gap-rail:    var(--space-32);

  /* ── (c) INVENTED — type scale.
     Width axis: 62% condensed / 100% reading / 125% expanded. These are the
     axis EXTREMES (font-stretch: 62% 125%) — nothing narrower or wider
     exists, and requesting it silently clamps. ────────────────────────── */
  --w-display: 62%;
  --w-body:   100%;
  --w-label:  125%;

  /* Fluid across 360px -> 1280px. The preferred term is always rem + vw,
     never vw alone: a vw-only clamp cannot respond to the user's font-size
     setting and fails WCAG 1.4.4 Resize Text. */
  --fs-display:    clamp(2.75rem,  1.48rem + 5.65vw, 6rem);     /* 44 -> 96 */
  --fs-heading:    clamp(1.75rem,  1.26rem + 2.17vw, 3rem);     /* 28 -> 48 */
  --fs-card-title: clamp(1.875rem, 1.53rem + 1.52vw, 2.75rem);  /* 30 -> 44 */
  --fs-quote:      clamp(2rem,     1.22rem + 3.48vw, 4rem);     /* 32 -> 64 */

  /* Fixed. These are already comfortable at phone size and shrinking them
     only hurts. --fs-input must stay exactly 16px: below that, iOS Safari
     force-zooms the viewport on focus. */
  --fs-body:    18px;
  --fs-support: 15px;
  --fs-input:   16px;
  --fs-label:   13px;
  --fs-eyebrow: 12px;
  --fs-micro:   11px;
  --fs-mono:    13px;

  --lh-display:    0.98;  /* tightens to the brand's 0.92 at >=48em */
  --lh-heading:    1;
  --lh-card-title: 0.95;
  --lh-quote:      0.95;
  --lh-body:       1.55;
  --lh-support:    1.5;

  --fw-display: 800;
  --fw-heading: 700;
  --fw-label:   600;
  --fw-body:    400;

  --ls-display: -0.005em;
  --ls-label:    0.14em;  /* labels, eyebrows, micro-labels */
  --ls-button:   0.12em;  /* buttons and underlined text links — the brand
                             artifact uses a different value here than for
                             labels. Two tokens, deliberately. */

  /* ── (c) INVENTED — focus.
     The brand's focus style is `border-color: #A95A2A` on inputs. That is a
     colour-only change between two dark, near-identical-luminance colours,
     and it covers inputs alone — not links, buttons or radio labels. Kept as
     a second signal; this ring is the first. ─────────────────────────── */
  --focus-ring:   3px solid var(--copper);
  --focus-offset: 3px;

  --dur: 120ms;

  /* ── (c) INVENTED — imagery.
     The brand system has no photography section. Every photo on the site is
     rendered as an Iron -> Paper duotone so that Copper stays the only
     saturated colour on the page; see assets/css/media.css for the mechanism
     and brand/NOTES.md for the rule. */
  --duotone-shadow:    var(--iron);
  --duotone-highlight: var(--paper);

  /* Scrim over hero imagery so Display type stays legible whatever photo
     lands. Iron at the copy end, transparent at the other. */
  --scrim: linear-gradient(100deg,
             rgb(24 25 27 / 0.92) 0%,
             rgb(24 25 27 / 0.78) 38%,
             rgb(24 25 27 / 0.40) 70%,
             rgb(24 25 27 / 0.20) 100%);

  /* ── (c) INVENTED — chrome.
     The sticky header and the mobile call bar are conversion patterns taken
     from the reference sites, not from the brand system. */
  --header-h:      76px;   /* condensed height, used for scroll-margin  */
  --callbar-h:     64px;   /* phone-only bottom bar                     */
  --z-header:      50;
  --z-drop:        60;
  --z-callbar:     70;
  --z-skip:       100;
}