/* ══════════════════════════════════════════════════════════════
   SVS MSP Calculator — Light Theme
   Imported dynamically by toggleTheme() when user switches to light mode.
   Overrides :root design tokens and all hardcoded dark-mode colours
   in SVS-MSP-Calculator.css. Never edit layout or structure here.
   ══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS (light overrides) ───────────────────────────── */
:root {
  --ink:    #2c2825;       /* soft near-black — readable without harshness  */
  --paper:  #ece7dc;       /* warm sand/khaki page tone                     */
  --accent: #1a6a98;       /* blue — good for buttons, kept full strength   */
  --muted:  #6b6360;       /* mid-grey for secondary text                   */
  --border: #d2cbc0;       /* warm border to match khaki palette             */
  --card:   #f1ebdf;       /* general light-mode utility surface             */
  --green:  #217045;       /* darker green — accessible on white            */
  --amber:  #a05f00;       /* darker amber — accessible on white            */
}

/* ── BODY ────────────────────────────────────────────────────────── */
body {
  background: var(--paper);
  color: var(--ink);
}

/* ── TOP BAR ─────────────────────────────────────────────────────
   Dark CSS sets background: var(--ink). In dark mode --ink is cream.
   In light mode --ink becomes near-black, so we must pin it to cream
   to keep the SVG logo (fill="#0c0c0c" text) legible.
─────────────────────────────────────────────────────────────────── */
.top-bar {
  background: #e3ddd2 !important;
  border-bottom-color: rgba(0, 0, 0, 0.09) !important;  /* replace strong blue stripe with soft warm separator */
}

/* ── SECTION CARDS ───────────────────────────────────────────────── */
.section {
  background: #f5f2ea !important;  /* warm cream — floats above khaki paper */
}

/* ── SPLIT LIGHT-MODE SURFACES ─────────────────────────────────────
   Keep sections as the main content cards.
   Quote settings = warmer utility panel.
   Live quote = cooler summary panel, including the mobile sheet.
*/
.quote-settings-bar {
  background: #ebe1d2 !important;
  border-color: #d8cab8 !important;
}
.qs-divider {
  background: #d6c8b7 !important;
}
.qs-fee-input-wrap,
.qs-fee-dollar,
.qs-fee-input {
  background: #f6f0e6 !important;
}
.sidebar {
  background: #edf3f6 !important;
  border-color: #cfdae2 !important;
}
.sidebar-utility .btn-reset-quote,
.mobile-panel-actions .btn-reset-quote {
  background: #edf3f6 !important;
  border-color: #cfdae2 !important;
}
.sidebar-body {
  background: #f3f7f9 !important;
}
.export-wrap {
  background: #edf3f6 !important;
  border-top: 1px solid #d8e2e8 !important;
}
.mobile-panel-sheet {
  background: #edf3f6 !important;
  border-top-color: #cfdae2 !important;
}
.mobile-panel-close-row {
  background: #edf3f6 !important;
  border-bottom-color: #d8e2e8 !important;
}
.mobile-panel-actions {
  background: #edf3f6 !important;
  border-bottom-color: #d8e2e8 !important;
}
.mobile-panel-sheet .sidebar {
  background: transparent !important;
}
.mobile-panel-sheet .sidebar-body {
  background: #f3f7f9 !important;
}
.confirm-modal-card {
  background: #f5f2ea !important;
}
.confirm-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ── CHEVRON PILL — swap white-alpha tint for dark-alpha ─────────── */
.sec-chevron {
  background: rgba(0, 0, 0, 0.04) !important;
}
.sec-open .sec-chevron,
.section-toggle:hover .sec-chevron {
  background: rgba(0, 0, 0, 0.07) !important;
}

/* ── SECTION HOVER / OPEN GLOW ───────────────────────────────────── */
.section:hover {
  border-color: rgba(26, 106, 152, 0.22) !important;
  box-shadow: -3px 0 0 0 rgba(26, 106, 152, 0.25) !important;
}
.sec-open {
  border-color: rgba(26, 106, 152, 0.35) !important;
  box-shadow: -3px 0 0 0 rgba(26, 106, 152, 0.45) !important;
}

/* ── CALLOUT BOXES ───────────────────────────────────────────────── */
.callout-green {
  background: #e8f7ef !important;
  border-color: #3ab870 !important;
  color: var(--green) !important;
}
.callout-red {
  background: #fceef0 !important;
  border-color: #c4526a !important;
  color: #7a1520 !important;
}

/* ── NUMBER STEPPER CONTROLS ─────────────────────────────────────── */
/* Dark mode steppers blend in naturally. Light mode needs explicit lift:
   white surfaces stand off the warm card bg; accent symbols tie to brand. */
.step-btn {
  background: #faf8f3 !important;    /* soft cream — not stark white */
  border-color: #b8b4ae !important;   /* stronger than --border for crispness */
  color: var(--accent) !important;    /* accent blue +/- symbols instead of muted grey */
}
.step-btn:hover {
  background: #ede8de !important;     /* warm tint matches khaki family on hover */
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.step-btn:active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.num-input {
  background: #faf8f3 !important;    /* soft cream — matches step buttons */
  border-color: #b8b4ae !important;
}
.num-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(26, 106, 152, 0.15) !important;
}

/* ── ADDON ROW SELECTED ──────────────────────────────────────────── */
.addon-row.selected {
  background: #daedf8 !important;
  border-color: var(--accent) !important;
  box-shadow: inset 3px 0 0 0 var(--accent) !important;
}
.addon-row.selected .addon-name {
  color: var(--ink) !important;
}
.addon-row.selected .addon-price {
  color: var(--accent) !important;  /* override dark-mode #62c5f0 */
}

/* ── FEATURE CARDS ───────────────────────────────────────────────── */
.feature-card {
  background: #e9e4da !important;
}

/* ── SIDEBAR / SUMMARY TEXT ────────────────────────────────────────
   Base dark theme hardcodes a few bright values for money and labels.
   In light mode those need to return to dark text so the desktop
   sidebar and the responsive mobile sheet remain readable.
*/
.sidebar-line .val {
  color: var(--ink) !important;
}
.sidebar-mrr {
  color: var(--ink) !important;
}
.vs-svs-label {
  color: var(--ink) !important;
}
.vs-val-accent {
  color: var(--accent) !important;
}
.vs-td-muted {
  color: var(--muted) !important;
}

/* ── NUDGE BANNER ────────────────────────────────────────────────── */
.nudge-banner.amber {
  background: #fff7e0 !important;
  color: var(--amber) !important;
}
.nudge-banner.green {
  background: #e8f7ef !important;
  color: var(--green) !important;
}
.nudge-nav-btn {
  background: rgba(0, 0, 0, 0.06) !important;
}
.nudge-nav-btn:hover {
  background: rgba(0, 0, 0, 0.11) !important;
}

/* ── VS COMPARISON ───────────────────────────────────────────────── */
.vs-comparison-wrap {
  background: #e5edf2 !important;
  border-color: #cfdae2 !important;
}
.vs-save-green td { background: rgba(39, 174, 96, 0.10) !important; }
.vs-save-amber td { background: rgba(210, 120, 30, 0.09) !important; }

/* ── SUMMARY BADGE ───────────────────────────────────────────────── */
.sec-summary-badge {
  background: rgba(26, 106, 152, 0.09) !important;
  border-color: rgba(26, 106, 152, 0.28) !important;
}

/* ── MOBILE PILL HOVER ───────────────────────────────────────────── */
.mobile-quote-pill:hover {
  background: #1a5f8a !important;
}

/* ── THEME TOGGLE BUTTON (light-mode variant) ────────────────────── */
.theme-toggle-btn {
  background: rgba(0, 0, 0, 0.09) !important;
  color: #2a2622 !important;
}
.theme-toggle-btn:hover  { background: rgba(0, 0, 0, 0.15) !important; }
.theme-toggle-btn:active { background: rgba(0, 0, 0, 0.21) !important; }

/* ── SAVINGS RESULT BOX ──────────────────────────────────────────── */
.savings-result {
  background: #eaf5ef !important;
  border-color: #a8d5b8 !important;
}
/* Amber warning state — JS toggles .savings-amber class */
.savings-result.savings-amber {
  background: #fff4e0 !important;
  border-color: #e8c57a !important;
  color: var(--amber) !important;
}

/* ── PITCH FOOTER (green strip) ──────────────────────────────────── */
.pitch-footer {
  background: #d4eddc !important;
  border-top-color: #a8d5b8 !important;
}