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

   Palette: RED / YELLOW / BONE — direct response.

   The earlier terracotta scheme was reasoned but wrong in
   practice: it produced a site that read as a restrained
   agency build, not as a local-services site that converts.
   The three references (research/stucco-repair-chandler/
   competitors.md) all run ONE saturated accent hard, with
   heavy condensed display type, thick borders and no
   gradients. Red is chandlerstuccorepair's accent; the
   yellow is eastvalleystuccopros' urgency colour.

   Two structural rules follow from that language:
     · radius is ZERO everywhere. Nothing is rounded.
     · there are no soft shadows. Depth is a hard offset
       text-shadow or a thick border, never a blur.
   ============================================================ */
:root{
  /* ---- brand palette: one saturated accent, used hard ----
     --brand and --accent are deliberately the SAME red. The
     engine stylesheet distinguishes them (brand = surfaces,
     accent = actions) and other sites use that; here the
     references are unanimous that a second colour weakens it.
     Yellow is the only other colour, and it is reserved for
     the call-to-action and the urgency strip. */
  --brand:#C8102E;         /* the red — dark sections, hub heads, area band */
  --brand-dk:#9E0C24;      /* deeper red — hovers, hero fallback */
  --brand-md:#E0334F;      /* lighter red — rules, hover states */
  --brand-lt:#FBE7EA;      /* pale wash — menu + tile hover only */

  --accent:#C8102E;        /* same red — CTAs, links, counters, rules */
  --accent-dk:#9E0C24;     /* accent hover */
  --accent-lt:#FBE7EA;     /* pale wash */
  --ruby:#E0334F;          /* decorative only */

  --zest:#FFC72C;          /* the yellow — call buttons, urgency strip */
  --zest-lt:#FFF6DF;
  --zest-ink:#1A1A1A;      /* text on yellow — near-black, never white */
  --zest-dk:#E8B01F;       /* yellow hover */

  /* ---- surfaces & text ---- */
  --bg:#FFFFFF;            /* page background */
  --cream:#F2F0ED;         /* alternating surface — warm grey "bone" */
  --ink:#1A1A1A;           /* body text, near-black */
  --muted:#4A4A4A;         /* secondary text — darker than the old scheme,
                              because this design uses smaller body copy */
  --line:#D8D8D8;          /* borders & rules */

  /* ---- rgb triplets, for rgba() ----
     CSS cannot build an rgba() from a hex custom property, so
     anything an overlay needs must live here as a triplet. */
  --scrim-rgb:0,0,0;       /* hero photo overlay — neutral black, so the
                              outlined headline reads as pure contrast */
  --band-rgb:26,26,26;     /* CTA band */
  --ink-rgb:26,26,26;      /* shadow tint */
  --zest-rgb:255,199,44;   /* pulse ring */

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

  /* ---- text on the red surfaces ---- */
  --on-brand:#FFFFFF;
  --on-brand-dim:#FBDDE2;
  --on-brand-mute:#F3C3CB;
  --on-brand-fade:#E9A0AC;

  /* ---- type ----
     --display is the condensed poster face that carries the whole
     design. Anton (SIL Open Font License 1.1) is self-hosted at
     /assets/fonts/anton-latin.woff2 — see fonts/README.md.

     The approved demo used Haettenschweiler/Impact, which are
     SYSTEM fonts: present on Windows and macOS, absent on iOS and
     Android. Most local-services traffic is phones, so on the
     devices that matter the demo would have fallen back to plain
     sans and the design would have collapsed. Self-hosting is not
     optional here.

     The latin subset covers U+0000-00FF, which includes every
     accented character Spanish needs. */
  --display:"Anton","Arial Narrow",Impact,"Haettenschweiler",sans-serif;
  --serif:var(--display);  /* alias — main.css and the engine's inner-page
                              templates ask for --serif for headings */
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;

  /* ---- shape & rhythm ---- */
  --r:0;                   /* nothing is rounded in this design */
  --r-sm:0;
  --maxw:1200px;           /* content width */
  --shadow:none;           /* no soft depth anywhere — borders instead */

  /* ---- hero focal point ----
     The hero is a close-up of a trowel drawing fresh stucco across a wall —
     the shot all three reference sites independently chose. The tool and the
     hand sit right of centre. The form column now sits on the LEFT, so X
     pushes the crop right to keep the subject clear of it. */
  --hero-focus:70% 42%;
  --hero-focus-sm:62% 45%;

  /* Minimum height for the city/service hero band. */
  --hero-band-h:min(58vh,470px);
}