/* ============================================================
   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.

   Deliberately unlike site #1 (Harlingen: grove green + ruby +
   citrus, a warm palette). This one is cool and dark-based —
   wrought iron and bronze — so the two sites in the portfolio
   do not read as the same template with the nouns swapped.
   ============================================================ */
:root{
  /* ---- brand palette: "iron & bronze" ---- */
  --brand:#22303C;         /* wrought iron — headers, dark sections */
  --brand-dk:#16212B;      /* deeper iron — hovers, scrims */
  --brand-md:#445A6B;      /* steel — borders, hover states */
  --brand-lt:#E7EDF1;      /* pale steel — icon plates */

  --accent:#B4541D;        /* bronze — primary CTAs, links */
  --accent-dk:#8F400F;     /* bronze hover */
  --accent-lt:#FBEDE3;     /* pale bronze — icon plates */
  --ruby:#C96A2E;          /* display bronze — decorative only */

  --zest:#E0A93F;          /* brass — stats, stars, CTAs on dark iron */
  --zest-lt:#FCF2DF;

  /* ---- surfaces & text ---- */
  --bg:#FFFFFF;            /* page background */
  --cream:#F4F6F7;         /* alternating section surface (cool grey) */
  --ink:#1A1F24;           /* body text */
  --muted:#5C6670;         /* secondary text */
  --line:#DFE4E8;          /* borders & rules */

  /* ---- type ---- */
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Inter",system-ui,-apple-system,sans-serif;  /* headings */

  /* ---- shape & rhythm ---- */
  --r:10px;                /* card radius */
  --r-sm:8px;              /* button / input radius */
  --maxw:1180px;           /* content width */
  --shadow:0 1px 2px rgba(26,31,36,.04),0 10px 22px -16px rgba(26,31,36,.26);

  /* ---- surfaces & text on dark / tinted overlays ----
     main.css used to hardcode these, which is why the hero scrim, the CTA band
     and every on-dark text colour came out Harlingen green regardless of the
     brand tokens above. They are tokens now (hard rule #2). rgb triplets, not
     hex, because CSS cannot build an rgba() from a hex custom property. */
  --scrim-rgb:18,27,34;      /* hero photo overlay — cool iron, not green */
  --band-rgb:22,33,43;       /* CTA band overlay */
  --ink-rgb:26,31,36;        /* shadow tint — in step with --ink */
  --zest-rgb:224,169,63;     /* pulse ring — in step with --zest */

  --paper:#FAFBFC;           /* mobile panel + sticky bar surface (cool, not cream) */
  --paper-rgb:250,251,252;   /* same colour, for the translucent stuck header */

  --zest-ink:#3A2A08;        /* text on a --zest (brass) surface */
  --zest-dk:#C9902B;         /* --zest hover */

  --on-brand:#D6DFE6;        /* body text on --brand / scrim */
  --on-brand-dim:#C2CFD9;    /* secondary text on --brand */
  --on-brand-mute:#B7C4CE;   /* stat labels on --brand */
  --on-brand-fade:#93A4B1;   /* breadcrumbs on --brand */

  /* ---- hero focal point ----
     Which part of the hero photo survives the cover-crop, as object-position
     "X Y". Photo-specific, so it belongs here rather than in the engine.
     The hero is a driveway gate standing open, shot down the drive: the gate
     leaf and the opening sit left-of-centre, and the headline overlays from
     the left, so X pushes the crop right to keep the gate clear of the text.
     Y trims foreground pavement and keeps the gate's full height in frame. */
  --hero-focus:64% 34%;
  --hero-focus-sm:58% 44%;   /* narrow screens crop horizontally, so Y barely bites */

  /* Minimum height for the city/service-area hero band. A gate photographed
     head-on is a tall subject — a short band clips the top of the leaf and no
     focal point can recover it. Matching the home hero's height lets
     --hero-focus above behave identically on both. */
  --hero-band-h:min(76vh,640px);
}