/* Theme — corbenhogan.com
   Roofing-adjacent: deliberately in the same visual family as hoganroofs.com,
   so a visitor moving between them feels one organisation. Flame on warm ink. */
:root {
  --font-display: Archivo, "Hanken Grotesk", system-ui, sans-serif;
  --font-body: var(--font-sans);
  --display-weight: var(--fw-black);
  --display-tracking: -0.035em;

  --ink-50:#FAF7F5;  --ink-100:#F2ECE8; --ink-200:#E5DDD7; --ink-300:#CCC2BB;
  --ink-400:#A6998F; --ink-500:#7E7068; --ink-600:#5E524B; --ink-700:#443A34;
  --ink-800:#2D2521; --ink-900:#1E1916; --ink-950:#15110E;
  --shadow-tint: 30, 21, 14;

  --brand:#F0572F; --brand-hover:#FA7A4F; --brand-active:#B23415; --brand-soft:#FFF3EF;
  --brand-on-dark:#F0572F;
  /* Flame-500 is hoganroofs.com's real brand colour and it stays, unchanged, as the fill.
     But it is a LIGHT orange: white text on it measures 3.44:1 and it measures 3.44:1 as
     text on white -- both below AA, and hoganroofs.com has the same defect today. Rather
     than darken the brand and lose the colour, the pairings change:
       - buttons keep the flame fill and take warm near-black labels  -> 5.46:1
       - brand-coloured TEXT on light uses flame-700                  -> 6.19:1
       - hover BRIGHTENS to flame-400 (only ever a background)        -> 7.12:1 with ink
     --brand-on-dark stays flame-500, which is already 5.46:1 on ink-950. */
  --on-brand:#15110E;
  --brand-on-light:#B23415;
  --brand-ink:#B23415;
  --accent:#335FA6; --accent-soft:#EEF3FB;
  --text-link:#B23415;
  --focus-ring:#F0572F; --ring-color:rgba(240,87,47,0.32);
}


/* --- 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;
}