/**
 * Material 3–inspired theme tokens (light/dark).
 * Uses CSS custom properties; no inline styles.
 * Defaults to system preference when no saved choice.
 * @see https://m3.material.io/styles/color/the-color-system
 */

/* Light theme (default) */
:root,
html.theme-light {
  --md-sys-color-primary: #2563eb;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #dbeafe;
  --md-sys-color-on-primary-container: #001d3d;
  --md-sys-color-surface: #f8f9fa;
  --md-sys-color-on-surface: #212529;
  --md-sys-color-surface-container: #ffffff;
  --md-sys-color-outline: #dee2e6;
  --md-sys-color-outline-variant: #e9ecef;
}

/* Dark theme */
html.theme-dark {
  --md-sys-color-primary: #4dabf7;
  --md-sys-color-on-primary: #003258;
  --md-sys-color-primary-container: #00497d;
  --md-sys-color-on-primary-container: #d6eaff;
  --md-sys-color-surface: #1a1c1e;
  --md-sys-color-on-surface: #e3e2e6;
  --md-sys-color-surface-container: #2d2f31;
  --md-sys-color-surface-container-high: #383a3d;
  --md-sys-color-outline: #8b9199;
  --md-sys-color-outline-variant: #44474e;
  --md-sys-color-success-container: #0d3320;
  --md-sys-color-on-success-container: #a7f3a0;
  --md-sys-color-warning-container: #332800;
  --md-sys-color-on-warning-container: #ffdd4b;
  --md-sys-color-info-container: #003d4d;
  --md-sys-color-on-info-container: #97f0ff;
}

/* System preference when no class set */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light):not(.theme-dark) {
    --md-sys-color-primary: #4dabf7;
    --md-sys-color-on-primary: #003258;
    --md-sys-color-primary-container: #00497d;
    --md-sys-color-on-primary-container: #d6eaff;
    --md-sys-color-surface: #1a1c1e;
    --md-sys-color-on-surface: #e3e2e6;
    --md-sys-color-surface-container: #2d2f31;
    --md-sys-color-surface-container-high: #383a3d;
    --md-sys-color-outline: #8b9199;
    --md-sys-color-outline-variant: #44474e;
    --md-sys-color-success-container: #0d3320;
    --md-sys-color-on-success-container: #a7f3a0;
    --md-sys-color-warning-container: #332800;
    --md-sys-color-on-warning-container: #ffdd4b;
    --md-sys-color-info-container: #003d4d;
    --md-sys-color-on-info-container: #97f0ff;
  }
}

/* Apply tokens to body */
body.theme-applied {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

/* Navbar uses primary */
.navbar-theme {
  background-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
}
.navbar-theme .navbar-brand,
.navbar-theme .nav-link,
.navbar-theme .dropdown-toggle {
  color: var(--md-sys-color-on-primary) !important;
}

/* Cards/surface */
.card-theme {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-outline-variant);
}

/* Dark mode: cards, panels and alerts use dark / light-dark surfaces */
html.theme-dark .card,
html.theme-dark .card .card-body,
html.theme-dark .card .card-header {
  background-color: var(--md-sys-color-surface-container) !important;
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-outline-variant);
}
html.theme-dark .card .card-header.bg-white {
  background-color: var(--md-sys-color-surface-container) !important;
  color: var(--md-sys-color-on-surface);
}
html.theme-dark .text-muted {
  color: rgba(227, 226, 230, 0.75) !important;
}
html.theme-dark .alert-success {
  background-color: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
  border-color: var(--md-sys-color-outline-variant);
}
html.theme-dark .alert-warning {
  background-color: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
  border-color: var(--md-sys-color-outline-variant);
}
html.theme-dark .alert-info {
  background-color: var(--md-sys-color-info-container);
  color: var(--md-sys-color-on-info-container);
  border-color: var(--md-sys-color-outline-variant);
}
html.theme-dark .alert-danger {
  background-color: rgba(127, 29, 29, 0.4);
  color: #fca5a5;
  border-color: var(--md-sys-color-outline-variant);
}
html.theme-dark footer.border-top {
  border-color: var(--md-sys-color-outline) !important;
}
/* System dark preference (no theme class) */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light):not(.theme-dark) .card,
  html:not(.theme-light):not(.theme-dark) .card .card-body,
  html:not(.theme-light):not(.theme-dark) .card .card-header {
    background-color: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline-variant);
  }
  html:not(.theme-light):not(.theme-dark) .card .card-header.bg-white {
    background-color: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface);
  }
  html:not(.theme-light):not(.theme-dark) .text-muted {
    color: rgba(227, 226, 230, 0.75) !important;
  }
  html:not(.theme-light):not(.theme-dark) .alert-success {
    background-color: var(--md-sys-color-success-container);
    color: var(--md-sys-color-on-success-container);
    border-color: var(--md-sys-color-outline-variant);
  }
  html:not(.theme-light):not(.theme-dark) .alert-warning {
    background-color: var(--md-sys-color-warning-container);
    color: var(--md-sys-color-on-warning-container);
    border-color: var(--md-sys-color-outline-variant);
  }
  html:not(.theme-light):not(.theme-dark) .alert-info {
    background-color: var(--md-sys-color-info-container);
    color: var(--md-sys-color-on-info-container);
    border-color: var(--md-sys-color-outline-variant);
  }
  html:not(.theme-light):not(.theme-dark) .alert-danger {
    background-color: rgba(127, 29, 29, 0.4);
    color: #fca5a5;
    border-color: var(--md-sys-color-outline-variant);
  }
  html:not(.theme-light):not(.theme-dark) footer.border-top {
    border-color: var(--md-sys-color-outline) !important;
  }
}

/* Public header/footer */
.header-theme {
  background-color: var(--md-sys-color-surface-container) !important;
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
}
.footer-theme {
  background-color: var(--md-sys-color-surface-container) !important;
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-outline) !important;
}
.footer-theme a {
  color: var(--md-sys-color-on-surface);
  opacity: 0.8;
}
.footer-theme .border-top {
  border-color: var(--md-sys-color-outline) !important;
}

.header-theme a:not(.btn-primary),
.header-theme .btn-link {
  color: var(--md-sys-color-on-surface) !important;
}

/* Gradient text (public) – use primary token */
.text-primary-gradient {
  background: linear-gradient(to right, var(--md-sys-color-primary), var(--md-sys-color-primary-container));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Legal content headings and layout */
.legal-content h1,
.legal-content h2,
.legal-content h3 {
  color: var(--md-sys-color-primary);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.legal-content h1 {
  font-size: 2.5rem;
  border-bottom: 2px solid var(--md-sys-color-outline);
  padding-bottom: 1rem;
}
.legal-content h2 {
  font-size: 1.75rem;
}
.legal-content ul {
  margin-bottom: 1rem;
}
.legal-content li {
  margin-bottom: 0.5rem;
}

.bg-primary-gradient {
  background: linear-gradient(to right, var(--md-sys-color-primary), var(--md-sys-color-primary-container));
}