/* Theme Overrides - Switch all DARK cards to pastel light cards */

/* Generic pastel card surface */
.cred-card,
.treemap-card,
.unified-budget-card,
.budget-setup-card,
.category-budget-card,
.smart-reminders-card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* "chip" blocks previously using #262626/#1E1E1E */
.wallet-icon,
.treemap-icon,
.category-icon,
.budget-icon,
.reminder-icon {
  background: var(--surface-soft);
  color: var(--text);
}

/* Secondary text that was rgba(255,255,255,.5/.7) */
.month-label,
.spend-label,
.treemap-title,
.treemap-total-label,
.category-month-label,
.budget-month-label,
.reminders-subtitle,
.reminders-health-label {
  color: var(--muted);
}

/* Primary numbers/titles that were white */
.month-name,
.spend-amount,
.budget-amount,
.treemap-total-amount,
.category-total-amount,
.budget-target-amount,
.reminders-title {
  color: var(--text);
}

/* Dividers/background strips */
.progress-bar,
.reminders-progress-bar,
.budget-slider,
.category-slider {
  background: var(--surface-soft);
}

/* Progress fill (green like app) */
.progress-fill,
.reminders-progress-fill {
  background: var(--progress);
  background-image: none;
}

/* Toasts & subtle fills */
.reminder-popup,
.success-message {
  background: var(--mint-50);
  color: var(--brand);
  border-color: var(--brand);
}

/* Buttons inside cards */
.btn-secondary {
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: #EEF2F6;
}

.btn-primary,
.budget-save-btn,
.category-save-btn,
.reminder-cta-btn,
.add-reminder-btn {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover,
.budget-save-btn:hover,
.category-save-btn:hover,
.reminder-cta-btn:hover,
.add-reminder-btn:hover {
  background: var(--brand-700);
}

/* Slider thumbs */
.budget-slider::-webkit-slider-thumb,
.budget-slider::-moz-range-thumb,
.category-slider::-webkit-slider-thumb,
.category-slider::-moz-range-thumb {
  background: var(--brand);
  border: 2px solid #fff;
}

/* Treemap container (no deep black) */
.treemap-container {
  background: var(--rose-50);
}

/* Testimonial cards – keep brand but lighten text */
.testimonial-card {
  background: var(--brand);
  color: #fff;
}