Before Theme Change

SVS-MSP-Calculator-light.css

@@ -69,6 +69,33 @@ body {
   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: #ffffff !important;
+  border-color: #b8b4ae !important;   /* stronger than --border #d0cdc7 for crispness */
+  color: var(--accent) !important;    /* accent blue +/- symbols instead of muted grey */
+}
+.step-btn:hover {
+  background: #f0ede7 !important;     /* warm tint matches section card 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: #ffffff !important;
+  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: #dff0fb !important;
@@ -132,6 +159,12 @@ body {
   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 {