/* Design tokens — S & S Auto & Truck Repair
   Base system: automotive  |  Bespoke-tuned for this prospect.
   Tone: dependable, no-nonsense, local — the experienced neighbor who knows your vehicle.
   Palette: charcoal-navy brand (settled, trustworthy) + warm amber-orange accent
   (mechanical energy, shop-floor warmth). Departs from the stark near-black + electric
   blue base toward something more approachable without losing credibility.
   Type: Chakra Petch (headings) + Barlow (body) — mechanical character retained. */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  /* ── surface & ink ── */
  --bg:          #ffffff;
  --surface:     #ffffff;
  --ink:         #23262d;
  --ink-strong:  #101218;
  --muted:       #565d6a;
  --line:        #d9dce2;

  /* ── brand palette ──
     --brand         charcoal-navy: authoritative, seasoned, honest
     --brand-dark    deep hover state
     --brand-tint    cool-light wash for icon backgrounds / ghost hovers
     --on-brand      white — passes 15.9:1 on --brand (WCAG AAA) */
  --brand:       #1c2434;
  --brand-dark:  #111722;
  --brand-tint:  #e8ecf3;
  --on-brand:    #ffffff;

  /* ── accent ──
     Warm amber-orange: mechanical energy, shop-floor character.
     #d4620f on #fff ≈ 5.3:1 — used exclusively on eyebrow labels (bold/large) PASS */
  --accent:      #d4620f;

  /* ── hero background ──
     Subtle cool-neutral radial wash — professional, not flashy */
  --hero-bg:     radial-gradient(1100px 460px at 88% -12%, #dce3ed, transparent), #f0f2f5;

  /* ── header / footer / band ── */
  --header-bg:   rgba(255, 255, 255, .88);
  --footer-bg:   #f0f2f5;
  --band-bg:     #1c2434;
  --on-band:     #ffffff;
  --on-band-muted: #a0a9b8;

  /* ── typography ── */
  --font-heading: 'Chakra Petch', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;
  --fs-base:      17px;
  --lh-body:      1.62;
  --fw-body:      400;
  --fw-head:      700;
  --lh-head:      1.06;
  --ls-head:      -.01em;
  --fs-lead:      1.2rem;
  --fs-h1:        clamp(2.5rem, 5.4vw, 4.3rem);
  --fs-h2:        clamp(1.75rem, 3.7vw, 2.6rem);
  --fs-h3:        1.3rem;

  /* ── layout ── */
  --container:   1180px;
  --gutter:      24px;
  --section-y:   90px;
  --hero-y:      98px;
  --nav-h:       72px;
  --space-3:     10px;
  --space-4:     16px;
  --space-5:     26px;
  --space-6:     30px;
  --space-7:     54px;
  --btn-pad:     15px 28px;

  /* ── shape ── */
  --radius:      4px;
  --radius-lg:   6px;
  --radius-pill: 3px;

  /* ── elevation ── */
  --shadow:      0 6px 22px rgba(16, 18, 24, .09);
  --shadow-lg:   0 18px 44px rgba(16, 18, 24, .20);

  /* ── motion ── */
  --dur:         140ms;
  --ease:        cubic-bezier(.45, 0, .15, 1);
}

/* ── component overrides that depend on brand/accent tokens ── */
.btn           { background: var(--brand); }
.btn:hover     { background: var(--brand-dark); }
.btn.ghost,
.btn--outline  { background: transparent; color: var(--on-brand); box-shadow: inset 0 0 0 1.5px var(--on-brand); }
.btn.ghost:hover,
.btn--outline:hover { background: rgba(255,255,255,.12); }
/* On light backgrounds (hero, sections) the outline btn uses brand ink */
.hero .btn--outline,
.section .btn--outline { color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.hero .btn--outline:hover,
.section .btn--outline:hover { background: var(--brand-tint); }
.eyebrow       { color: var(--accent); }
.card .ic      { background: #e6ecf5; color: var(--accent); }