/*
|--------------------------------------------------------------------------
| Reach universal light/dark compatibility layer
|--------------------------------------------------------------------------
| Loaded after page CSS. Page styles consume tokens from theme.css; this
| file only normalizes framework/common UI that does not use those tokens.
*/

html,
body {
  background-color: var(--theme-background);
  color: var(--theme-text);
}

body,
main,
section,
article,
aside,
header,
footer,
nav,
div,
form {
  border-color: var(--theme-border);
}

html[data-color-mode="dark"] {
  --bs-body-color: var(--theme-text);
  --bs-body-bg: var(--theme-background);
  --bs-emphasis-color: var(--theme-text);
  --bs-secondary-color: var(--theme-text-muted);
  --bs-secondary-bg: var(--theme-surface-soft);
  --bs-tertiary-bg: var(--theme-surface-muted);
  --bs-border-color: var(--theme-border);
  --bs-card-bg: var(--theme-surface);
}

/* Bootstrap / common surfaces */
html[data-color-mode="dark"] .bg-white,
html[data-color-mode="dark"] .bg-light,
html[data-color-mode="dark"] .card,
html[data-color-mode="dark"] .modal-content,
html[data-color-mode="dark"] .dropdown-menu,
html[data-color-mode="dark"] .offcanvas,
html[data-color-mode="dark"] .list-group-item,
html[data-color-mode="dark"] .accordion-item,
html[data-color-mode="dark"] .accordion-button,
html[data-color-mode="dark"] .table,
html[data-color-mode="dark"] .form-control,
html[data-color-mode="dark"] .form-select,
html[data-color-mode="dark"] input,
html[data-color-mode="dark"] textarea,
html[data-color-mode="dark"] select {
  background-color: var(--theme-control-background) !important;
  border-color: var(--theme-control-border) !important;
  color: var(--theme-text) !important;
}

html[data-color-mode="dark"] .form-control::placeholder,
html[data-color-mode="dark"] textarea::placeholder,
html[data-color-mode="dark"] input::placeholder {
  color: var(--theme-text-soft) !important;
  opacity: 1;
}

html[data-color-mode="dark"] .text-dark,
html[data-color-mode="dark"] .text-body,
html[data-color-mode="dark"] .text-black {
  color: var(--theme-text) !important;
}

html[data-color-mode="dark"] .text-muted,
html[data-color-mode="dark"] .text-secondary {
  color: var(--theme-text-muted) !important;
}

html[data-color-mode="dark"] .border,
html[data-color-mode="dark"] .border-top,
html[data-color-mode="dark"] .border-bottom,
html[data-color-mode="dark"] .border-start,
html[data-color-mode="dark"] .border-end {
  border-color: var(--theme-border) !important;
}

/* Common navigation surfaces */
html[data-color-mode="dark"] .navbar,
html[data-color-mode="dark"] .navbar-collapse,
html[data-color-mode="dark"] .nav-panel,
html[data-color-mode="dark"] .mobile-nav,
html[data-color-mode="dark"] .section-nav {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

html[data-color-mode="dark"] .navbar a,
html[data-color-mode="dark"] .navbar .nav-link,
html[data-color-mode="dark"] .section-nav a {
  color: var(--theme-text) !important;
}