@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a1a1a;
    --card-background-color: #1e1e1e;
    --form-background-color: #2c2c2c;
    --text-color: #e9ecef;
    --text-color-secondary: #adb5bd;
    --error-color: #e57373;
    --border-color: #343a40;
    --input-border-color: #495057;
    --input-background-color: #343a40;
    --input-placeholder-color: #6c757d;
    --button-disabled-background: #343a40;
    --button-disabled-color: #6c757d;

    --button-secondary-background: #343a40;
    --button-secondary-color: #e9ecef;

    --logo-placeholder-bg: #343a40;
    --container-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.2);
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    --logo-color: #d0d0d0;

    --badge-active-color: #4cbe8a;
    --badge-active-bg: rgba(76, 190, 138, 0.15);
    --badge-active-border: rgba(76, 190, 138, 0.3);
    --badge-pending-color: #f0b429;
    --badge-pending-bg: rgba(240, 180, 41, 0.15);
    --badge-pending-border: rgba(240, 180, 41, 0.3);
  }

  .light {
    display: none;
  }
  .dark {
    display: block;
  }
}