/* ============================================================
   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 #12 palette: "storm blue, hail-warning ochre, caliche".
   Weather-warning colours rather than panel colours — the site is
   hail-led. Design approved on
   research/metal-roofing-san-antonio/homepage-mockup.html.
   ============================================================ */
:root{
  /* ---- brand palette ---- */
  --brand:#22313F;         /* storm blue — the sky an hour before the hail. Dark sections, hub bands */
  --brand-dk:#182430;      /* deeper storm — footer, quote panel */
  --brand-md:#2E4052;      /* mid — rules on dark, input borders */
  --brand-lt:#E3E8EC;      /* pale — icon plates, menu hover */

  --accent:#D9A21B;        /* hail-warning ochre — every primary CTA */
  --accent-dk:#B6861A;     /* ochre hover */
  --accent-lt:#FBF3DC;     /* pale ochre — the endorsement section ground, icon plates */
  --ruby:#D9A21B;          /* decorative only (band SVG) */

  /* --zest is the engine's "highlight on dark" token: stat figures, the
     phone button in dark boxes, eyebrows on --brand. Here it is the ochre. */
  --zest:#D9A21B;
  --zest-lt:#FBF3DC;
  --zest-ink:#1C2430;      /* text on a --zest surface */
  --zest-dk:#B6861A;       /* --zest hover */

  /* ---- surfaces & text ---- */
  --bg:#EAEBE6;            /* caliche — the pale Hill Country ground */
  --cream:#FFFFFF;         /* alternating section surface — white on caliche */
  --surface:#FFFFFF;       /* cards, table body, form card */
  --ink:#1C2430;           /* body text */
  --muted:#4A5563;         /* secondary text */
  --ink-faint:#7C8794;     /* labels, captions */
  --line:#D3D7D3;          /* borders & rules */
  --sky:#B9C5D0;           /* secondary text on storm blue */
  --sky-lt:#DCE3EA;        /* ledes on storm blue */

  /* ---- type ----
     Zilla Slab carries the headings (sentence case, heavy); Archivo the
     body, buttons and labels. Both self-hosted (see ../fonts/README.md).
     --serif is the engine's heading token, so it aliases the slab. */
  --display:"Zilla Slab",Georgia,"Times New Roman",serif;
  --serif:var(--display);
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;

  /* ---- shape & rhythm ---- */
  --r:0;                   /* nothing is rounded — panels have edges */
  --r-sm:0;
  --maxw:1180px;
  --shadow:0 40px 80px -40px rgba(0,0,0,.8);   /* the hero quote panel only */

  /* ---- surfaces & text on dark / tinted overlays ---- */
  --scrim-rgb:34,49,63;      /* inner-page hero photo overlay = --brand */
  --band-rgb:34,49,63;       /* CTA band overlay */
  --ink-rgb:28,36,48;        /* shadow tint — keep in step with --ink */
  --zest-rgb:217,162,27;     /* pulse ring — keep in step with --zest */

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

  --on-brand:#DCE3EA;        /* body text on --brand */
  --on-brand-dim:#B9C5D0;    /* secondary text on --brand */
  --on-brand-mute:#B9C5D0;   /* stat labels on --brand */
  --on-brand-fade:#7C8794;   /* breadcrumbs on --brand */

  /* ---- swatch tiles ---- */
  --galv-a:#F4F5F6;          /* bare Galvalume gradient stops */
  --galv-b:#C9CED4;
  --galv-c:#E3E6E9;
  --sw-label-rgb:255,255,255; /* colour-swatch caption plate */
  --sun-tint-line:#EAD9A8;   /* rule around the endorsement section */

  /* ---- home hero photo focal point ---- */
  --hero-focus-home:50% 40%; /* keep the ridge and the clouds, lose driveway */

  /* ---- hero focal point (inner pages) ---- */
  --hero-focus:62% 40%;
  --hero-focus-sm:60% 45%;
  --hero-band-h:min(52vh,440px);
}