:root {
  color-scheme: light;
  --auth-page-bg: #ffffff;
  --auth-panel-bg: #ffffff;
  --auth-text-main: #212529;
  --auth-text-muted: #6c757d;
  --auth-control-bg: #ffffff;
  --auth-control-border: #dee2e6;
  --auth-control-text: #212529;
  --auth-control-hover-bg: #f8f9fa;
  --auth-control-hover-border: #ced4da;
  --auth-link: #0d6efd;
  --auth-divider: #dee2e6;
  --auth-dropdown-bg: #ffffff;
  --auth-dropdown-border: #dee2e6;
  --auth-country-hover-bg: #f8f9fa;
  --auth-modal-bg: #ffffff;
  --auth-modal-text: #212529;
  --auth-modal-border: #dee2e6;
  --auth-toast-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  --auth-toast-success-bg: #d4edda;
  --auth-toast-success-border: #28a745;
  --auth-toast-error-bg: #f8d7da;
  --auth-toast-error-border: #dc3545;
  --auth-toast-warning-bg: #fff3cd;
  --auth-toast-warning-border: #ffc107;
  --auth-toast-info-bg: #d1ecf1;
  --auth-toast-info-border: #17a2b8;
  --auth-toast-text: #333333;
  --auth-close-filter: none;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: light;
  }
}

html.theme-light,
html.light,
html[data-theme="light"] {
  color-scheme: light;
  --auth-page-bg: #ffffff;
  --auth-panel-bg: #ffffff;
  --auth-text-main: #212529;
  --auth-text-muted: #6c757d;
  --auth-control-bg: #ffffff;
  --auth-control-border: #dee2e6;
  --auth-control-text: #212529;
  --auth-control-hover-bg: #f8f9fa;
  --auth-control-hover-border: #ced4da;
  --auth-link: #0d6efd;
  --auth-divider: #dee2e6;
  --auth-dropdown-bg: #ffffff;
  --auth-dropdown-border: #dee2e6;
  --auth-country-hover-bg: #f8f9fa;
  --auth-modal-bg: #ffffff;
  --auth-modal-text: #212529;
  --auth-modal-border: #dee2e6;
  --auth-toast-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  --auth-toast-success-bg: #d4edda;
  --auth-toast-success-border: #28a745;
  --auth-toast-error-bg: #f8d7da;
  --auth-toast-error-border: #dc3545;
  --auth-toast-warning-bg: #fff3cd;
  --auth-toast-warning-border: #ffc107;
  --auth-toast-info-bg: #d1ecf1;
  --auth-toast-info-border: #17a2b8;
  --auth-toast-text: #333333;
  --auth-close-filter: none;
}

html.theme-dark,
html.dark,
html[data-theme="dark"] {
  color-scheme: dark;
  --auth-page-bg: #0b1220;
  --auth-panel-bg: #111b2e;
  --auth-text-main: #f5f8ff;
  --auth-text-muted: #9db0cd;
  --auth-control-bg: #16243c;
  --auth-control-border: #2a3d5f;
  --auth-control-text: #e8efff;
  --auth-control-hover-bg: #1d2f4c;
  --auth-control-hover-border: #3a5077;
  --auth-link: #8eb8ff;
  --auth-divider: #2a3d5f;
  --auth-dropdown-bg: #111b2e;
  --auth-dropdown-border: #2a3d5f;
  --auth-country-hover-bg: #1d2f4c;
  --auth-modal-bg: #111b2e;
  --auth-modal-text: #dbe5f5;
  --auth-modal-border: #2a3d5f;
  --auth-toast-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --auth-toast-success-bg: #0f2f1c;
  --auth-toast-success-border: #1f7a43;
  --auth-toast-error-bg: #3a1118;
  --auth-toast-error-border: #c14657;
  --auth-toast-warning-bg: #3a2c08;
  --auth-toast-warning-border: #d3a200;
  --auth-toast-info-bg: #0f2b34;
  --auth-toast-info-border: #2b9cb1;
  --auth-toast-text: #ecf2ff;
  --auth-close-filter: invert(1) grayscale(100%);
}

body {
  background-color: var(--auth-page-bg) !important;
  color: var(--auth-text-main) !important;
}

.signin-form-container,
.form-wrapper,
.bg-white {
  background-color: var(--auth-panel-bg) !important;
}

.text-dark,
.signin-heading,
.auth-heading,
label {
  color: var(--auth-text-main) !important;
}

.text-muted,
.text-white-50 {
  color: var(--auth-text-muted) !important;
}

.social-login-btn,
.btn-outline-secondary,
.signup-input,
#countryDropdownBtn,
#countrySearch,
#phoneInput {
  background-color: var(--auth-control-bg) !important;
  border-color: var(--auth-control-border) !important;
  color: var(--auth-control-text) !important;
}

.social-login-btn:hover,
.btn-outline-secondary:hover {
  background-color: var(--auth-control-hover-bg) !important;
  border-color: var(--auth-control-hover-border) !important;
  color: var(--auth-control-text) !important;
}

.signup-input::placeholder,
#countrySearch::placeholder,
#phoneInput::placeholder {
  color: var(--auth-text-muted) !important;
  opacity: 1;
}

#countryDropdown {
  background-color: var(--auth-dropdown-bg) !important;
  border-color: var(--auth-dropdown-border) !important;
}

#countryDropdown .border-bottom {
  border-bottom-color: var(--auth-dropdown-border) !important;
}

.country-option .text-muted {
  color: var(--auth-text-muted) !important;
}

.link-primary-blue {
  color: var(--auth-link) !important;
}

hr.text-muted {
  color: var(--auth-divider) !important;
}

.modal-content {
  background-color: var(--auth-modal-bg);
  color: var(--auth-modal-text);
  border: 1px solid var(--auth-modal-border);
}

.modal-content .text-dark,
.modal-content .small,
.modal-content .text-muted {
  color: var(--auth-modal-text) !important;
}

.modal-content .btn-close {
  filter: var(--auth-close-filter);
}

#toast {
  box-shadow: var(--auth-toast-shadow);
}

#toast.success {
  background: var(--auth-toast-success-bg);
  border: 1px solid var(--auth-toast-success-border);
}

#toast.error {
  background: var(--auth-toast-error-bg);
  border: 1px solid var(--auth-toast-error-border);
}

#toast.warning {
  background: var(--auth-toast-warning-bg);
  border: 1px solid var(--auth-toast-warning-border);
}

#toast.info {
  background: var(--auth-toast-info-bg);
  border: 1px solid var(--auth-toast-info-border);
}

#toast #toast-message p {
  color: var(--auth-toast-text);
}