:root {
  /* Fallbacks (overridden by themeweb.js) */
  --aw-bg: #ffffff;
  --aw-text: #1f2937;
  --aw-muted: #6b7280;
  --aw-surface: #ffffff;
  --aw-surface-2: #f8fafc;
  --aw-border: #e5e7eb;
  --aw-link: #1485ee;
  --aw-primary: #1485ee;
  --aw-primary-text: #ffffff;
  --aw-btn-bg: #1485ee;
  --aw-btn-text: #ffffff;
  --aw-nav-bg: #f8f9fa;
  --aw-nav-text: #111827;
  --aw-input-bg: #ffffff;
}

body.answerit-layout {
  background-color: var(--aw-bg);
  color: var(--aw-text);
}

body.answerit-layout h1,
body.answerit-layout h2,
body.answerit-layout h3,
body.answerit-layout h4,
body.answerit-layout h5,
body.answerit-layout h6 {
  color: var(--aw-text);
}

a {
  color: var(--aw-link);
}

a:hover {
  color: var(--aw-link);
  opacity: 0.9;
}

.navbar {
  background-color: var(--aw-nav-bg) !important;
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .dropdown-toggle {
  color: var(--aw-nav-text) !important;
}

.navbar .dropdown-menu {
  background-color: var(--aw-surface);
  border-color: var(--aw-border);
}

.navbar .dropdown-item {
  color: var(--aw-text);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--aw-surface-2);
  color: var(--aw-text);
}

html[data-answerit-theme="sombres"] .navbar-light .navbar-toggler {
  border-color: var(--aw-border);
}

html[data-answerit-theme="sombres"] .navbar-light .navbar-toggler-icon {
  filter: invert(1);
}

.footer-basic {
  background-color: var(--aw-nav-bg) !important;
  color: var(--aw-nav-text);
}

.footer-basic a {
  color: var(--aw-nav-text);
}

.text-muted {
  color: var(--aw-muted) !important;
}

/* Common surfaces */
.box,
.login-clean form {
  background-color: var(--aw-surface);
  color: var(--aw-text);
  border: 1px solid var(--aw-border);
}

/* Template sections (assets/css/*) often hardcode white backgrounds. */
body.answerit-layout .features-boxed,
body.answerit-layout .features-clean,
body.answerit-layout .projects-clean,
body.answerit-layout .login-clean {
  background-color: var(--aw-bg) !important;
  color: var(--aw-text);
}

body.answerit-layout .features-boxed p,
body.answerit-layout .features-clean p,
body.answerit-layout .projects-clean p {
  color: var(--aw-muted) !important;
}

body.answerit-layout .features-boxed .item .box {
  background-color: var(--aw-surface) !important;
  color: var(--aw-text);
  border: 1px solid var(--aw-border);
}

body.answerit-layout .features-boxed .item .icon,
body.answerit-layout .features-clean .item .icon {
  color: var(--aw-primary) !important;
}

body.answerit-layout .projects-clean .item {
  background-color: var(--aw-surface);
  border: 1px solid var(--aw-border);
}

body.answerit-layout .login-clean .illustration {
  color: var(--aw-primary) !important;
}

body.answerit-layout .login-clean form .form-control {
  background-color: transparent;
  color: var(--aw-text);
  border-bottom: 1px solid var(--aw-border);
}

.table {
  color: var(--aw-text);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--aw-surface-2);
}

.table thead th {
  border-bottom: 2px solid var(--aw-border);
}

.table td,
.table th {
  border-top: 1px solid var(--aw-border);
}

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

.form-control:focus {
  background-color: var(--aw-input-bg);
  color: var(--aw-text);
  border-color: var(--aw-link);
  box-shadow: 0 0 0 0.2rem rgba(20, 133, 238, 0.25);
}

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

.input-group-text {
  background-color: var(--aw-surface-2);
  color: var(--aw-text);
  border-color: var(--aw-border);
}

/* Buttons */
.btn-primary {
  background-color: var(--aw-btn-bg) !important;
  border-color: var(--aw-btn-bg) !important;
  color: var(--aw-btn-text) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  opacity: 0.92;
}

.btn-outline-primary {
  border-color: var(--aw-primary) !important;
  color: var(--aw-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--aw-primary) !important;
  border-color: var(--aw-primary) !important;
  color: var(--aw-primary-text) !important;
}

/* Make btn-outline-secondary readable on dark themes */
.btn-outline-secondary {
  border-color: var(--aw-border);
  color: var(--aw-nav-text);
}

.btn-outline-secondary:hover {
  background-color: var(--aw-surface-2);
  border-color: var(--aw-border);
  color: var(--aw-nav-text);
}

/* Alerts readability (Bootstrap already OK, but ensure text color is readable) */
.alert {
  color: inherit;
}