/* Semantic tokens: use these in pages as they are migrated. */
:root, [data-bs-theme="light"] {
    --app-bg: #ffffff;
    --app-surface: #ffffff;
    --app-surface-muted: #f1f5f9;
    --app-text: #1f2937;
    --app-text-muted: #475569;
    --app-border: #cbd5e1;
    --app-accent: #1d4ed8;
    --app-focus: #2563eb;
    --app-shadow: 0 12px 28px rgb(15 23 42 / 12%);
}
[data-bs-theme="dark"] {
    color-scheme: dark;
    --app-bg: #111827;
    --app-surface: #1e293b;
    --app-surface-muted: #273449;
    --app-text: #e2e8f0;
    --app-text-muted: #b8c5d6;
    --app-border: #475569;
    --app-accent: #93c5fd;
    --app-focus: #93c5fd;
    --app-shadow: 0 12px 28px rgb(0 0 0 / 28%);
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
}
html[data-theme-ready="true"] body {
    background-color: var(--app-bg);
    color: var(--app-text);
}
.app-footer__theme-toggle {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin: 0 auto .75rem;
    -webkit-tap-highlight-color: transparent;
}
.app-footer__theme-icon {
    position: absolute;
    transition: opacity .25s ease, transform .25s ease;
}
.app-footer__theme-icon--dark { opacity: 0; transform: scale(.5) rotate(-25deg); }
.app-footer__theme-toggle:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.app-footer[data-bs-theme="dark"] .app-footer__theme-icon--light { opacity: 0; transform: scale(.5) rotate(25deg); }
.app-footer[data-bs-theme="dark"] .app-footer__theme-icon--dark { opacity: 1; transform: scale(1) rotate(0); }
/* Hover previews the theme a click would switch to; locked right after a
   click so the icon doesn't flip again until the pointer leaves and
   re-enters the button (see theme.js). */
.app-footer__theme-toggle:hover:not(.theme-toggle-locked) .app-footer__theme-icon--light { opacity: 0; transform: scale(.5) rotate(25deg); }
.app-footer__theme-toggle:hover:not(.theme-toggle-locked) .app-footer__theme-icon--dark { opacity: 1; transform: scale(1) rotate(0); }
.app-footer[data-bs-theme="dark"] .app-footer__theme-toggle:hover:not(.theme-toggle-locked) .app-footer__theme-icon--dark { opacity: 0; transform: scale(.5) rotate(-25deg); }
.app-footer[data-bs-theme="dark"] .app-footer__theme-toggle:hover:not(.theme-toggle-locked) .app-footer__theme-icon--light { opacity: 1; transform: scale(1) rotate(0); }
@media (prefers-reduced-motion: reduce) {
    .app-footer__theme-icon { transition: none !important; }
}
@media (forced-colors: active) {
    .app-footer__theme-toggle { border: 1px solid ButtonText; }
}
.app-navbar[data-bs-theme="dark"],
.app-navbar[data-bs-theme="dark"].is-scrolled {
    background: rgb(17 24 39 / 94%) !important;
}
.app-navbar[data-bs-theme="dark"] .navbar-shell {
    background: var(--app-surface);
    border-color: var(--app-border);
    box-shadow: var(--app-shadow);
}
.app-navbar[data-bs-theme="dark"] .navbar-brand,
.app-navbar[data-bs-theme="dark"] .nav-link {
    color: var(--app-text);
}
.app-navbar[data-bs-theme="dark"] .brand-title { text-shadow: none; }
.app-navbar[data-bs-theme="dark"] .nav-link:hover,
.app-navbar[data-bs-theme="dark"] .nav-link.active {
    color: #fff;
    background: var(--app-surface-muted);
}
.app-navbar[data-bs-theme="dark"] .navbar-collapse { border-color: var(--app-border); }
.app-footer[data-bs-theme="dark"] {
    background: var(--app-bg);
    color: var(--app-text);
}
.app-footer[data-bs-theme="dark"] .app-footer__main { border-color: var(--app-border); }
.app-footer[data-bs-theme="dark"] .app-footer__main::before { background: var(--app-surface); }
.app-footer[data-bs-theme="dark"] .app-footer__badge,
.app-footer[data-bs-theme="dark"] .app-footer__link,
.app-footer[data-bs-theme="dark"] .app-footer__social-link { color: var(--app-accent); }
.app-footer[data-bs-theme="dark"] .app-footer__title {
    color: var(--app-text);
    font-weight: 700;
}
.app-footer[data-bs-theme="dark"] .app-footer__description,
.app-footer[data-bs-theme="dark"] .app-footer__bottom { color: var(--app-text-muted); }
@media print {
    :root, [data-bs-theme] {
        color-scheme: light;
        --app-bg: #fff;
        --app-surface: #fff;
        --app-surface-muted: #f1f5f9;
        --app-text: #000;
        --app-text-muted: #334155;
        --app-border: #cbd5e1;
        --app-accent: #1d4ed8;
        --bs-body-bg: #fff;
        --bs-body-color: #000;
    }
    .app-navbar, .app-footer { display: none !important; }
}