/* ============================================================
   TOKENS — single source of truth for the theme.
   Change a value here and it updates everywhere on the site.
   Nothing else in the CSS should contain a raw colour or size.

   Site #11 palette: "galvalume, charcoal, burgundy" — the three
   metal-roof colours Charlotte actually orders. Light silver ground,
   deep charcoal for dark sections, burgundy for every CTA. Design
   approved on research/metal-roofing-charlotte/homepage-mockup.html.
   ============================================================ */
:root{
  /* ---- brand palette ---- */
  --brand:#252B32;         /* "Charcoal Gray" panel — dark sections, hub bands */
  --brand-dk:#1A1F25;      /* deeper charcoal — util bar, footer, rib lines */
  --brand-md:#4B5460;      /* mid — borders on hover, focus */
  --brand-lt:#E4E7EB;      /* pale — icon plates, menu hover */

  --accent:#8B1E2D;        /* "Burgundy" panel — every primary CTA, links, eyebrows */
  --accent-dk:#6F1623;     /* burgundy hover */
  --accent-lt:#F6E9EB;     /* pale burgundy — icon plates */
  --ruby:#8B1E2D;          /* decorative only (band SVG) */

  /* --zest is the engine's "highlight on dark" token: stat figures, the
     phone button in dark boxes, eyebrows on --brand. This design has no
     yellow — the highlight on charcoal is galvalume steel. */
  --zest:#AEB6BF;
  --zest-lt:#ECEEF1;
  --zest-ink:#1B2026;      /* text on a --zest surface */
  --zest-dk:#C9CFD6;       /* --zest hover */

  /* ---- surfaces & text ---- */
  --bg:#ECEEF1;            /* galvalume silver — page ground */
  --cream:#FFFFFF;         /* alternating section surface — white on silver */
  --surface:#FFFFFF;       /* cards, table body, form card */
  --ink:#1B2026;           /* body text */
  --muted:#4B5460;         /* secondary text */
  --ink-faint:#7E8792;     /* labels, captions */
  --line:#D5DAE0;          /* borders & rules */
  --steel:#AEB6BF;         /* strip rules, vs-card tops */
  --steel-lt:#C9CFD6;      /* hero em line, on-dark secondary text */

  /* ---- type ----
     Barlow Condensed carries every heading, button and figure; Barlow the
     body. Both self-hosted (see ../fonts/README.md). --serif is the engine's
     heading token, so it aliases the condensed face. */
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --serif:var(--display);
  --sans:"Barlow","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;

  /* ---- shape & rhythm ---- */
  --r:0;                   /* nothing is rounded — panels have edges */
  --r-sm:0;
  --maxw:1200px;
  --shadow:0 30px 60px -30px rgba(0,0,0,.45);   /* the hero form card only */

  /* ---- surfaces & text on dark / tinted overlays ---- */
  --scrim-rgb:37,43,50;      /* inner-page hero photo overlay = --brand */
  --band-rgb:37,43,50;       /* CTA band overlay */
  --ink-rgb:27,32,38;        /* shadow tint — keep in step with --ink */
  --zest-rgb:174,182,191;    /* pulse ring — keep in step with --zest */

  --paper:#FFFFFF;           /* sticky header, mobile panel, sticky bar */
  --paper-rgb:255,255,255;

  --on-brand:#C9CFD6;        /* body text on --brand */
  --on-brand-dim:#AEB6BF;    /* secondary text on --brand */
  --on-brand-mute:#AEB6BF;   /* stat labels on --brand */
  --on-brand-fade:#7E8792;   /* breadcrumbs on --brand */

  /* ---- standing-seam rib motif ----
     The whole visual identity, drawn in CSS: a 2px dark line and a 1px
     light line every 72px. Dark variant for charcoal sections, light for
     silver ones. Placeholders use narrower rib spacings. */
  --rib-dk:#1A1F25;
  --rib-dk-hi:rgba(255,255,255,.06);
  --rib-lt:#DEE2E7;
  --rib-lt-hi:#FFFFFF;
  --rib-gap:72px;
  --ph-a:#DADFE5;            /* photo-placeholder rib tones */
  --ph-b:#E9ECF0;
  --ph-c:#E2E6EB;
  --ph-d:#C3CAD2;
  --sw-label-rgb:255,255,255; /* colour-swatch caption plate */

  /* ---- hero focal point ----
     Home hero photo: roofer + panels sit in the right half, open sky/foliage on
     the left. X to the right keeps the subject clear of the headline column
     under `object-fit: cover`; inner-page bands share the same tokens. */
  --hero-focus:70% 8%;
  --hero-focus-sm:72% 20%;
  --hero-band-h:min(52vh,440px);
}