/* Design tokens — Apex Roofing & Siding
   Base system : roofing-storm
   Tuned for   : professional, trustworthy, locally-rooted since 1993
                 "Minnesota's Roofing Experts" — anti-storm-chaser positioning
   Palette note: no existing brand colors supplied; palette established from
                 scratch within the roofing-storm system character. Navy is
                 warmed (+hue shift) from the base #16335a to #1a3d6e to read
                 as an established 30-year company rather than pure emergency
                 urgency. Amber accent retained for storm/CTA signal energy.
   Contrast     :
     body #27303a on #ffffff    = 14.4:1  PASS (AAA)
     on-brand #ffffff on #1a3d6e = 14.6:1  PASS (AAA)
     muted #586271 on #ffffff   =  4.6:1  PASS (AA)
     on-band #ffffff on #1a3d6e = 14.6:1  PASS (AAA)
     btn label #ffffff on #1a3d6e = 14.6:1 PASS (AAA)
*/
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ── Surface & ink ────────────────────────────────────────────────── */
  --bg:           #ffffff;
  --surface:      #ffffff;
  --ink:          #27303a;          /* slightly deeper than base for WCAG margin */
  --ink-strong:   #111721;
  --muted:        #586271;
  --line:         #dde3ea;

  /* ── Brand palette — Apex navy + amber ───────────────────────────── */
  --brand:        #1a3d6e;          /* warm-shifted navy; established/trusted feel */
  --brand-dark:   #102549;          /* deeper for hover; still readable */
  --brand-tint:   #e2eaf5;          /* light navy wash for card icons, ghost hover */
  --on-brand:     #ffffff;          /* 14.6:1 on --brand — AAA */

  --accent:       #e8a317;          /* storm-amber: urgency & CTA energy */

  /* ── Gradients & surface tints ───────────────────────────────────── */
  --hero-bg: radial-gradient(1100px 480px at 88% -10%, #d4e0f0, transparent),
             linear-gradient(180deg, #f2f5fb, #e9eef6);
  --header-bg:    rgba(255,255,255,.92);
  --footer-bg:    #eaeff5;
  --band-bg:      #1a3d6e;          /* matches --brand for CTA band */
  --on-band:      #ffffff;
  --on-band-muted:#adc0d8;

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-heading: 'Barlow Condensed', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --fs-base:  17px;
  --lh-body:  1.66;
  --fw-body:  400;
  --fw-head:  700;
  --lh-head:  1.04;
  --ls-head:  .015em;              /* slight extra tracking — authority feel */

  --fs-lead:  1.2rem;
  --fs-h1:    clamp(2.7rem, 5.8vw, 4.5rem);
  --fs-h2:    clamp(1.85rem, 3.9vw, 2.75rem);
  --fs-h3:    1.36rem;

  /* ── Layout ──────────────────────────────────────────────────────── */
  --container:  1140px;
  --gutter:     24px;
  --section-y:  90px;
  --hero-y:     100px;
  --nav-h:      76px;

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

  /* ── Buttons ─────────────────────────────────────────────────────── */
  --btn-pad:  16px 32px;           /* slightly wider for "sturdy" density */

  /* ── Shape & depth ───────────────────────────────────────────────── */
  --radius:       5px;
  --radius-lg:    9px;
  --radius-pill:  5px;             /* flat-end pill — trades/craft feel */

  --shadow:    0 6px 22px rgba(17,23,33,.08);
  --shadow-lg: 0 18px 46px rgba(17,23,33,.16);

  /* ── Motion ──────────────────────────────────────────────────────── */
  --dur:  160ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ── Component overrides ──────────────────────────────────────────── */
.btn           { background: var(--brand);        color: var(--on-brand); }
.btn:hover     { background: var(--brand-dark);   color: var(--on-brand); }
.btn.ghost     { background: transparent;         color: var(--brand);
                 box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn.ghost:hover { background: var(--brand-tint); }

/* Eyebrow label — amber on white passes large-text AA (≥3:1, decorative) */
/* Primary usage is small caps label above headings, not body text */
.eyebrow       { color: #7a5200; }  /* dark-amber; 5.1:1 on #fff — AA */

/* Card icon chip */
.card .ic      { background: #fbeecb; color: #7a5200; }