:root {
  --bg-color: white;
  --text-color: black;
  --card-bg: white;
  --card-text: black;
  --input-bg: white;
  --input-text: black;
  --input-border: #ced4da;
  --placeholder-color: #6c757d;
}

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

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

.form-control, .form-check-input {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
}

.form-control::placeholder {
  color: var(--placeholder-color);
}

/* Auto set vars for dark theme using prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #eee;
    --card-bg: #1e1e1e;
    --card-text: #eee;
    --input-bg: #2c2c2c;
    --input-text: #eee;
    --input-border: #555;
    --placeholder-color: #aaa;
  }
}