/* RoofSort marketing site: LIGHT THEME (2026-10-08).
   Loaded last on every page. The site stylesheet is a purged Tailwind build with the old
   dark palette baked into class names; this file remaps those classes plus the page-level
   custom classes (.sa-*, .lp-*, .sp-*, .rs-*). Remove the <link> to go back to dark.

   Palette
     paper      #f6f5f0   page background (warm off-white)
     surface    #ffffff   cards, inputs
     ink        #10233a   headings (navy)
     body       #334155   body text
     muted      #64748b   secondary text
     line       #e3e6ea   borders
     green      #0f766e   buttons / accent (deep green, passes contrast on white)
     green-ink  #0b5e56   accent text / links
     green-tint #e6f4f1   accent backgrounds
     amber      #f59e0b   storm elements (unchanged)
*/
:root { --paper:#f6f5f0; --surface:#fff; --ink:#10233a; --body:#334155; --muted:#64748b; --faint:#94a3b8; --line:#e3e6ea; --line-strong:#cbd5e1; --green:#0f766e; --green-hover:#0d5f58; --green-ink:#0b5e56; --green-tint:#e6f4f1; --green-line:#b7e1d8; --amber:#f59e0b; }
html, body { background: var(--paper); color: var(--body); }

/* ---------- Tailwind utility remaps ---------- */
.bg-\[\#0a0f14\] { background-color: var(--paper); }
.bg-\[\#0a0f14\]\/90 { background-color: rgba(246,245,240,.92); }
.bg-\[\#0d1218\], .bg-\[\#0d1a20\]\/95 { background-color: var(--surface); }
.bg-gradient-to-br, .bg-gradient-to-r, .bg-gradient-to-b { background-image: none; background-color: var(--surface); }
.bg-emerald-900\/20, .bg-teal-900\/15, .bg-emerald-400\/\[0\.04\] { background-color: rgba(15,118,110,.07); }
.bg-white\/\[0\.02\], .bg-white\/\[0\.03\], .bg-white\/\[0\.04\], .hover\:bg-white\/\[0\.02\]:hover { background-color: var(--surface); }
.bg-emerald-400\/\[0\.08\], .bg-emerald-400\/10, .hover\:bg-emerald-400\/\[0\.03\]:hover { background-color: var(--green-tint); }
.bg-red-500\/10, .bg-red-500\/\[0\.06\] { background-color: #fee2e2; }
.border-white\/\[0\.03\], .border-white\/\[0\.04\], .border-white\/\[0\.06\], .border-white\/\[0\.08\], .border-white\/10 { border-color: var(--line); }
.border-emerald-400\/15, .border-emerald-400\/20, .hover\:border-emerald-400\/15:hover, .hover\:border-emerald-400\/20:hover, .hover\:border-emerald-400\/40:hover, .focus\:border-emerald-400\/40:focus { border-color: var(--green-line); }
.text-white, .text-slate-50 { color: var(--ink); }
.text-slate-200 { color: #1e293b; }
.text-slate-300 { color: var(--body); }
.text-slate-400 { color: #475569; }
.text-slate-500 { color: var(--muted); }
.text-slate-600 { color: var(--faint); }
.text-emerald-200, .text-emerald-300, .text-emerald-400, .text-emerald-400\/80, .text-emerald-400\/60,
.hover\:text-emerald-200:hover, .hover\:text-emerald-300:hover { color: var(--green-ink); }
.text-red-400, .text-red-400\/80 { color: #b91c1c; }
.placeholder\:text-slate-500::placeholder { color: var(--faint); }
.focus\:ring-emerald-400\/20:focus { --tw-ring-color: rgba(15,118,110,.25); }
.shadow-emerald-950\/30, .shadow-emerald-950\/40 { --tw-shadow-color: rgba(16,35,58,.14); --tw-shadow: var(--tw-shadow-colored); }
.hover\:shadow-emerald-400\/20:hover { --tw-shadow-color: rgba(15,118,110,.25); --tw-shadow: var(--tw-shadow-colored); }
/* primary buttons: green fill, white text (the dark-text class is only used on buttons) */
.bg-emerald-400 { background-color: var(--green); }
.hover\:bg-emerald-300:hover { background-color: var(--green-hover); }
.bg-emerald-400.text-\[\#0a0f14\], .bg-emerald-400 .text-\[\#0a0f14\], a.text-\[\#0a0f14\], button.text-\[\#0a0f14\] { color: #fff; }
.bg-red-500 { background-color: #dc2626; }
/* header */
header.sticky { border-bottom-color: var(--line); }
header .text-emerald-300 { color: var(--green-ink); }
/* product screenshot: frame it so the dark app UI reads as a screenshot */
picture img, img[src*="app-screenshot"] { border-radius: 12px; box-shadow: 0 24px 60px rgba(16,35,58,.18), 0 2px 6px rgba(16,35,58,.08); }
/* footer */
footer { border-top-color: var(--line); }

/* ---------- home page custom (.rs-*) ---------- */
.rs-story li { color: var(--body); }
.rs-story li::before { background: var(--green); }
.rs-story-last { color: var(--ink); }
.rs-storm-cta { color: var(--ink); box-shadow: 0 10px 30px rgba(245,158,11,.3); }
/* storm banner strip (storm-banner.js): keep amber, label block goes navy */
.rs-sb-label { background: var(--ink); color: #fcd34d; }
.rs-sb-tag { background: var(--ink); color: #fde68a; }

/* ---------- storm-alerts landing page (.lp-*, .sa-*) ---------- */
.lp-head { border-bottom-color: var(--line); }
.lp-head .tag { color: var(--green-ink); }
.lp-kicker { background: #fff4df; border-color: #f5c66b; color: #92400e; }
.lp h1 { color: var(--ink); }
.lp-sub { color: var(--body); }
.lp-sub strong { color: var(--ink); }
.lp-stat { background: var(--surface); border-color: var(--line); box-shadow: 0 1px 2px rgba(16,35,58,.04); }
.lp-stat b { color: var(--green-ink); }
.lp-stat span { color: var(--muted); }
.lp-source { color: var(--faint); }
/* the phone mock stays dark on purpose: it is a picture of a phone */
.lp-phone { background: #10233a; border-color: #10233a; box-shadow: 0 16px 40px rgba(16,35,58,.25); }
.lp-phone .from { color: #94a3b8; }
.lp-bubble { background: #22364d; color: #f1f5f9; }
.lp-bubble .t { color: #94a3b8; }
.lp-cta-top { background: var(--green); color: #fff; }
.lp-cta-top:hover { background: var(--green-hover); }
.lp-form-wrap { background: var(--surface); border-color: var(--green-line); box-shadow: 0 10px 30px rgba(16,35,58,.08); }
.lp-form-wrap h2 { color: var(--ink); }
.lp-form-wrap .lead { color: var(--muted); }
.sa-label { color: var(--body); }
.sa-label .sa-opt { color: var(--faint); }
.sa-input { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.sa-input::placeholder { color: var(--faint); }
.sa-input:focus { border-color: var(--green); box-shadow: 0 0 0 1px rgba(15,118,110,.3); }
.sa-input[aria-invalid="true"] { border-color: #dc2626; }
select.sa-input option { background: #fff; color: var(--ink); }
.sa-err { color: #b91c1c; }
.sa-hint, .sa-summary { color: var(--muted); }
.sa-chip { background: var(--green-tint); border-color: var(--green-line); color: var(--green-ink); }
.sa-chip button { color: var(--green-ink); }
.sa-chip button:hover, .sa-chip button:focus-visible { background: rgba(15,118,110,.15); color: var(--ink); }
.sa-list { background: var(--surface); border-color: var(--line-strong); box-shadow: 0 12px 32px rgba(16,35,58,.16); }
.sa-list button { color: #1e293b; }
.sa-list button:hover, .sa-list button.hl { background: var(--green-tint); color: var(--ink); }
.sa-list button[aria-selected="true"] { color: var(--green-ink); }
.sa-list button span, .sa-list .sa-none { color: var(--muted); }
.sa-check { color: var(--body); }
.sa-check input { accent-color: var(--green); }
.sa-consent { background: #fafaf7; border-color: var(--line); }
.sa-consent .sa-check { color: var(--muted); }
.sa-consent a { color: var(--green-ink); }
.sa-btn { background: var(--green); color: #fff; }
.sa-btn:hover { background: var(--green-hover); box-shadow: 0 10px 24px rgba(15,118,110,.25); }
.sa-form-err { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
details.lp-more { border-top-color: var(--line); }
details.lp-more summary { color: var(--muted); }
details.lp-more summary::before { color: var(--green-ink); }
.sa-success { background: var(--green-tint); border-color: var(--green-line); }
.sa-success h2, .sa-success .text-white { color: var(--ink); }
.sa-success .text-slate-300 { color: var(--body); }
.sa-success .text-slate-500 { color: var(--muted); }
.lp-trust { color: var(--muted); }
.lp-trust li::before { color: var(--green); }
.lp-trust a { color: var(--green-ink); }
.lp-recent h2, .lp-next h2 { color: var(--ink); }
.lp-recent li { background: var(--surface); border-color: var(--line); color: var(--body); }
.lp-recent li b { color: var(--muted); }
.lp-card { background: var(--surface); border-color: var(--line); color: var(--body); }
.lp-card b { color: var(--ink); }
.lp-card:hover { border-color: var(--green); }
.lp-foot { border-top-color: var(--line); color: var(--muted); }
.lp-foot a { color: var(--body); }
/* legacy sample bubble + facts on older page versions */
.sa-sample { background: #22364d; color: #f1f5f9; }
.sa-fact dt { color: var(--ink); }
.sa-fact dd { color: var(--muted); }

/* ---------- storm-packs page (.sp-*) ---------- */
.sp-btn-primary { background: var(--green); color: #fff; }
.sp-btn-primary:hover { background: var(--green-hover); }
.sp-btn-secondary { border-color: var(--line-strong); color: var(--ink); }
.sp-btn-secondary:hover { border-color: var(--green); color: var(--green-ink); }
.sp-field { color: #475569; }
.sp-field input { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.sp-field input:focus { border-color: var(--green); }
.sp-form-msg { color: var(--green-ink); }
.sp-form-msg.err { color: #b91c1c; }
.sp-cta-card, .sp-card { background: var(--surface); border-color: var(--line); }
.sp-cta-card { background: var(--surface); border-color: var(--green-line); box-shadow: 0 10px 30px rgba(16,35,58,.08); }
.sp-card h3 { color: var(--ink); }
.sp-card p { color: var(--muted); }
.sp-steps li { color: var(--body); }
.sp-steps li::before { background: var(--green-tint); color: var(--green-ink); }
.lp-upsell { background: #fff4df; border-left-color: var(--amber); color: var(--body); }
.lp-upsell strong { color: var(--ink); }
.lp-upsell a { color: var(--green-ink); }