/* ============================================================
   Design tokens — Street Plumbing, Inc.
   Base system : plumbing (Drains & Water Heaters)
   Bespoke tune: no client colors provided; industry palette
   refined toward a deeper, more composed professional teal
   ("established local pro, south-metro") while retaining
   every variable name base.css depends on.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');
:root{
  /* ---- surface & ink ---- */
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#1e2f3a;          /* ~13.5:1 on #fff — PASS body contrast */
  --ink-strong:#0c2733;   /* ~15:1 on #fff — headings */
  --muted:#4f6470;        /* ~6.3:1 on #fff — PASS large-text + UI labels */
  --line:#d9e8ee;

  /* ---- brand palette ---- */
  /* Deeper water-teal vs. stock plumbing system. Reads trustworthy + local.  */
  --brand:#0a6078;        /* contrast vs. #fff = 7.3:1 — PASS AA large + AA normal */
  --brand-dark:#074e63;   /* hover state: darker, ~9.2:1 on #fff */
  --brand-tint:#ddf0f5;   /* very light teal wash for card icons, chip bgs */
  --on-brand:#ffffff;     /* #fff on --brand #0a6078 = 7.3:1 — PASS AA+AAA large */

  /* ---- accent (copper-pipe) ---- */
  /* Used only for eyebrow labels, decorative icons — NOT as btn text on white. */
  --accent:#b5581a;        /* darkened for WCAG AA at small text: 4.80:1 on #fff */

  /* ---- structural backgrounds ---- */
  --hero-bg:radial-gradient(1080px 460px at 88% -12%,#c7e9f0,transparent),#eaf5f8;
  --header-bg:rgba(255,255,255,.88);
  --footer-bg:#e8f3f7;
  --band-bg:#0c2733;      /* deep navy CTA band */
  --on-band:#ffffff;      /* #fff on #0c2733 = ~15.3:1 — PASS */
  --on-band-muted:#9bbfc9;

  /* ---- typography ---- */
  --font-heading:'Manrope',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --fs-base:17px;
  --lh-body:1.66;
  --fw-body:400;
  --fw-head:800;
  --lh-head:1.1;
  --ls-head:-.02em;
  --fs-lead:1.2rem;
  --fs-h1:clamp(2.35rem,5.1vw,3.8rem);
  --fs-h2:clamp(1.68rem,3.5vw,2.42rem);
  --fs-h3:1.3rem;

  /* ---- layout ---- */
  --container:1140px;
  --gutter:24px;
  --section-y:88px;
  --hero-y:96px;
  --nav-h:74px;

  /* ---- spacing scale ---- */
  --space-3:10px;
  --space-4:16px;
  --space-5:26px;
  --space-6:30px;
  --space-7:56px;

  /* ---- buttons ---- */
  --btn-pad:15px 28px;

  /* ---- shape ---- */
  --radius:12px;
  --radius-lg:16px;
  --radius-pill:999px;

  /* ---- elevation ---- */
  --shadow:0 6px 22px rgba(12,39,51,.07);
  --shadow-lg:0 18px 46px rgba(12,39,51,.14);

  /* ---- motion ---- */
  --dur:170ms;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- component micro-overrides (bespoke to Street Plumbing) ---- */
/* Primary button: deep teal fill, white text — 7.3:1 contrast on btn bg */
.btn{background:var(--brand)}
.btn:hover{background:var(--brand-dark)}
/* Ghost button: teal outline, readable on white bg */
.btn.ghost,.btn--ghost{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand)}
.btn.ghost:hover,.btn--ghost:hover{background:var(--brand-tint)}
/* Eyebrow labels get the accent copper for visual warmth */
.eyebrow{color:var(--accent)}
/* Card icon badges: light teal tint background, brand teal icon */
.card .ic{background:var(--brand-tint);color:var(--brand)}