/* Theme — roofmastery.com
   Roofing consultancy. Same family as the roofing cluster but the authority
   register rather than the retail one: steel primary, amber accent. */
:root {
  --font-display: Archivo, "Hanken Grotesk", system-ui, sans-serif;
  --font-body: var(--font-sans);
  --display-weight: var(--fw-extra);
  --display-tracking: -0.03em;

  --ink-50:#F7F7F5;  --ink-100:#EDEEEA; --ink-200:#DEDFDA; --ink-300:#C2C4BD;
  --ink-400:#95998F; --ink-500:#6E7269; --ink-600:#50554D; --ink-700:#3A3E38;
  --ink-800:#252924; --ink-900:#181B17; --ink-950:#101310;
  --shadow-tint: 16, 19, 16;

  --brand:#2F5468; --brand-hover:#24404F; --brand-active:#1A2F3A; --brand-soft:#EAF1F5;
  --brand-on-dark:#4F8DAE;
  --on-brand:#FFFFFF;
  --accent:#C8860A; --accent-soft:#FBF1DC;
  --accent-on-light:#8B5D07; --accent-on-dark:#C8860A;
  --text-link:#24404F;
  --focus-ring:#2F5468; --ring-color:rgba(47,84,104,0.30);
}
/* The gold accent, routed through the contrast system instead of set raw. #C8860A is
   3.06:1 on white (fails) but 6.12:1 on ink-950, so it needs a darker shade on light
   surfaces and the original on dark ones. Setting `color: var(--accent)` directly, as
   this did, also outranked the dark-context rules entirely -- theme.css loads after
   base.css, so a raw component override here silently defeats the whole system. */
.eyebrow   { color: var(--accent-contrast); }
.card__num { color: var(--accent-contrast); }


/* --- hoganroofs family resemblance (2026-08-13) --------------------------------
   Two conventions lifted from hoganroofs.com, which is the same brand and should feel
   like it. Neither is decorative: they are what makes that site read as engineered.

   1. Mono is the "data voice" -- numbers, counters and labels only, never prose.
      tabular-nums keeps digits from shifting width as they change.
   2. The eyebrow carries a short rule before it. currentColor is deliberate: the rule
      inherits whatever contrast-safe colour --brand-contrast/--accent-contrast resolved
      to for this surface, so it can never become the low-contrast case on its own. */
.stat__figure,
.card__num,
.badge,
.placeholder {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 26px;
  height: 1px;
  background: currentColor;
}