/* P&B Lumber & Hardware, Cadott WI. Design tokens.
   ACSS-mappable: every value here becomes an ACSS variable at convert time.
   Brand red sampled from the real storefront sign (lettering #C82030, awning #A85048). */
:root{
  /* color roles */
  --red:#C82030;            /* sign lettering: CTAs, accents */
  --red-dark:#A3151F;       /* hover */
  --red-awning:#A85048;     /* muted brick red: secondary bands, badges */
  --cream:#F6F0E4;          /* paper-alt: warm section bands */
  --cream-deep:#EDE4D2;     /* rules on cream */
  --paper:#FFFDF9;          /* page */
  --ink:#221D19;            /* warm charcoal text */
  --ink-muted:#5E5750;
  --charcoal:#2A2522;       /* dark bands, footer, drawer */
  --charcoal-deep:#1C1815;
  --trust:#2F7A4F;
  --amber:#D9A21B;
  --rule:rgba(34,29,25,.12);
  --rule-dark:rgba(255,255,255,.12);

  /* type */
  --f-display:"Fraunces","Georgia","Times New Roman",serif;
  --f-body:"Source Sans 3","Source Sans Pro","Helvetica Neue",Arial,sans-serif;
  --fs-display-lg:clamp(2.6rem,5.4vw,4.5rem);
  --fs-display-md:clamp(2rem,3.6vw,2.9rem);
  --fs-display-sm:1.3rem;
  --fs-body-lg:1.14rem;
  --fs-body:1rem;
  --fs-body-sm:.86rem;

  /* space (4px base) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;

  /* layout: ONE container, ONE gutter */
  --container:1280px;
  --gutter:32px;
  --section-y:90px;

  --radius-sm:8px;--radius-md:16px;--radius-lg:22px;--radius-pill:999px;
  --shadow-sm:0 4px 14px rgba(34,29,25,.10);
  --shadow-md:0 16px 40px rgba(34,29,25,.16);
  --shadow-red:0 10px 26px rgba(200,32,48,.42);
}
@media(max-width:760px){:root{--gutter:20px;--section-y:56px;}}