:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --muted-strong: #374151; /* NEW: better-contrast secondary text (light) */
  --primary: #0d6efd;
  --accent: #3b82f6;
  --border: #e5e7eb;
}

[data-theme="dark"] {
  --bg: #0f1115;
  --card: #161a20;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --muted-strong: #d1d5db; /* NEW: lighter secondary text (dark) */
  --primary: #3b82f6;
  --accent: #60a5fa;
  --border: #1f2937;
}

body { background: var(--bg); color: var(--text); }

.cc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}

.navbar {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border);
}

a, .link-like { color: var(--primary); }

/* Boost contrast for secondary/muted text across the app */
.text-muted,
small,
.form-text,
label span,
.helper,
.muted {
  color: var(--muted-strong) !important;
}

/* If you use Bootstrap 5.3+, also nudge its CSS vars */
:root {
  --bs-secondary-color: var(--muted-strong);
}
[data-theme="dark"] {
  --bs-secondary-color: var(--muted-strong);
}
/* Improve select & input text contrast in dark theme */
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control {
  color: var(--text) !important;           /* #e5e7eb */
  background-color: var(--card) !important;/* #161a20 */
  border-color: var(--border) !important;  /* #1f2937 */
}

/* Make placeholder/empty option readable in dark mode */
[data-theme="dark"] .form-control::placeholder {
  color: #cbd5e1; /* light slate */
  opacity: 1;
}

/* Dropdown list items in dark mode */
[data-theme="dark"] .form-select option {
  color: var(--text);
  background-color: var(--card);
}

/* If you use a disabled placeholder option, don’t let it go too faint */
[data-theme="dark"] .form-select option[disabled] {
  color: #a5b4c0;
}
.focus-pulse {
  animation: focusPulse 1.2s ease-in-out 0s 2;
  box-shadow: 0 0 0 4px rgba(13,110,253,.25);
}
@keyframes focusPulse {
  0% { box-shadow: 0 0 0 0 rgba(13,110,253,.25); }
  50% { box-shadow: 0 0 0 6px rgba(13,110,253,.35); }
  100% { box-shadow: 0 0 0 0 rgba(13,110,253,.25); }
}