/**
 * HeatWiseSW V2.4 — Direction B: Coastal Teal
 * Visual proof tokens only. Not a full-site deploy yet.
 *
 * Intent: sea-mist wash (Devon & Cornwall), deep teal CTAs,
 * warm sand accent for small highlights. Keep ink dark for readability.
 */

:root {
  /* Washes */
  --hw-page:        #E6F0F1; /* sea mist — main body */
  --hw-section:     #D9E8EA; /* slightly deeper section bands */
  --hw-card:        #FFFFFF;
  --hw-card-soft:   #F2F7F8; /* soft path / step cards */
  --hw-passport:    #EEF6F7; /* passport product card — lighter than section, still teal-tinted */

  /* Borders */
  --hw-border:      #C5D5D8;
  --hw-border-soft: #D7E4E6;

  /* Ink (unchanged for trust/readability) */
  --hw-ink:         #1C1917;
  --hw-muted:       #57534E;
  --hw-soft-text:   #78716C;

  /* Actions */
  --hw-cta:         #0F5C63; /* deep teal primary */
  --hw-cta-hover:   #0A474C;
  --hw-accent:      #0F766E; /* links / emphasis */
  --hw-accent-soft: #CCFBF1; /* soft teal chip/bg */
  --hw-explore:     #E0F2F1; /* explore strip inside passport */
  --hw-explore-border: #0F5C63;

  /* Optional SW warmth (use sparingly) */
  --hw-sand:        #D4A574;
}

/* ---------- Global wash ---------- */
html, body {
  background-color: var(--hw-page) !important;
  color: var(--hw-ink);
}

/* Cream / stone arbitrary washes used across the live site */
.bg-\[\#f7f4ef\],
.bg-\[\#f4f1ea\],
.bg-\[\#faf8f5\] {
  background-color: var(--hw-section) !important;
}

/* Soft path cards that used cream */
a.bg-\[\#faf8f5\],
.bg-\[\#faf8f5\] {
  background-color: var(--hw-card-soft) !important;
}

/* Stone borders → teal-grey */
.border-stone-200,
.border-slate-200 {
  border-color: var(--hw-border) !important;
}

/* ---------- Primary CTAs (Tailwind blue → teal) ---------- */
.bg-blue-600,
.bg-blue-700,
.bg-blue-800,
.bg-blue-900 {
  background-color: var(--hw-cta) !important;
}
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover,
.hover\:bg-blue-900:hover {
  background-color: var(--hw-cta-hover) !important;
}

/* Text / links */
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900,
.text-blue-900\/80 {
  color: var(--hw-accent) !important;
}
.hover\:text-blue-700:hover,
.hover\:text-blue-800:hover,
.hover\:text-blue-900:hover {
  color: var(--hw-cta) !important;
}

/* Soft blue panels → soft teal */
.bg-blue-50,
.bg-blue-50\/50 {
  background-color: var(--hw-explore) !important;
}
.border-blue-100,
.border-blue-200,
.border-blue-300 {
  border-color: var(--hw-border) !important;
}
.hover\:border-blue-300:hover {
  border-color: var(--hw-accent) !important;
}

/* Deep blue panels used as CTA blocks */
.bg-blue-950 {
  background-color: var(--hw-cta) !important;
}
.text-blue-950 {
  color: var(--hw-cta) !important;
}

/* ---------- Homepage-specific (inline style classes) ---------- */
.pc-form button {
  background: var(--hw-cta) !important;
}
.pc-form button:hover {
  background: var(--hw-cta-hover) !important;
}
.pc-form input:focus {
  outline-color: color-mix(in srgb, var(--hw-cta) 30%, transparent) !important;
  border-color: var(--hw-cta) !important;
}
.chip i {
  background: var(--hw-cta) !important;
}
.process .n {
  color: var(--hw-accent) !important;
}
.pp-card {
  background: var(--hw-passport) !important;
  border-color: var(--hw-border) !important;
}
.pp-card .pp-explore {
  background: var(--hw-explore) !important;
  border-color: var(--hw-explore-border) !important;
}
.pp-card .pp-explore .lbl {
  color: var(--hw-cta) !important;
}
.pp-card .pp-chips span {
  color: var(--hw-cta) !important;
  border-color: var(--hw-cta) !important;
}
.path-card:hover {
  border-color: var(--hw-accent) !important;
}

/* Calculator gradients that hard-code navy */
.hp-gradient {
  background: linear-gradient(135deg, #0F5C63 0%, #0F766E 55%, #0D9488 100%) !important;
}
.option-card.selected {
  border-color: var(--hw-cta) !important;
  background: var(--hw-explore) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hw-cta) 18%, transparent) !important;
}
.progress-dot.on {
  background: var(--hw-cta) !important;
}
.progress-dot.done {
  background: var(--hw-accent) !important;
}
#passport .pp-stat.is-accent .pp-stat-value {
  color: var(--hw-cta) !important;
}

/* Header stays white for contrast; CTA already remapped via .bg-blue-700 */
header.sticky {
  background-color: #FFFFFF !important;
}

/* Footer: if dark navy exists, leave it; accent links inside get teal */
footer a:hover {
  color: var(--hw-accent);
}

/* Site-wide deploy additions */
body.bg-slate-50, .bg-slate-50 { background-color: var(--hw-page) !important; }
.bg-slate-100 { background-color: var(--hw-card-soft) !important; }
.border-blue-500, .border-blue-600 { border-color: var(--hw-cta) !important; }


/* ---------- Passport / calculator hardening ---------- */
.text-blue-900,
.text-blue-950,
a.text-blue-900 {
  color: var(--hw-accent) !important;
}
.bg-blue-900,
.bg-blue-950 {
  background-color: var(--hw-cta) !important;
}
.hover\:bg-blue-800:hover,
.hover\:bg-blue-900:hover {
  background-color: var(--hw-cta-hover) !important;
}
.border-blue-900,
.border-blue-800 {
  border-color: var(--hw-cta) !important;
}
/* Hard-coded navy from older builds */
[class*="bg-\[#1e3a8a\]"],
.bg-\[\#1e3a8a\] {
  background-color: var(--hw-cta) !important;
}
/* Progress / selected states common in passport */
.bg-blue-100 { background-color: var(--hw-accent-soft) !important; }
.text-blue-100 { color: #ccfbf1 !important; }
.from-blue-700, .from-blue-800, .from-blue-900 {
  --tw-gradient-from: #0F5C63 !important;
}
.to-blue-700, .to-blue-800, .to-blue-900 {
  --tw-gradient-to: #0F766E !important;
}


/* ---------- Passport results / plan view (V2.4) ---------- */
.passport-doc {
  background: #F7FBFC !important;
}
.passport-doc .rule {
  border-color: #C5D5D8 !important;
}
/* Primary actions inside passport */
.bg-blue-900,
button.bg-blue-900,
a.bg-blue-900 {
  background-color: #0F5C63 !important;
}
.hover\:bg-blue-800:hover,
button.hover\:bg-blue-800:hover {
  background-color: #0A474C !important;
}
.text-blue-900 {
  color: #0F766E !important;
}
.bg-blue-50 {
  background-color: #E0F2F1 !important;
}
.border-blue-900,
.border-blue-100 {
  border-color: #99F6E4 !important;
}
.border-blue-900 {
  border-color: #0F5C63 !important;
}
/* Explore chips / active system toggles */
.opt-on,
button[aria-pressed="true"].tech-btn {
  border-color: #0F5C63 !important;
  background: #E0F2F1 !important;
  color: #0F5C63 !important;
}
/* Tabs / secondary chrome */
#sticky-installer-cta {
  background: rgba(15, 92, 99, 0.97) !important;
  box-shadow: 0 -8px 24px rgba(15, 92, 99, 0.25) !important;
}
/* Assessment badge teal */
#assessment-badge {
  background: #E0F2F1 !important;
  color: #0F5C63 !important;
  border-color: #99F6E4 !important;
}