/* Shared palette. Bootstrap components follow data-bs-theme; site components use these tokens. */
:root[data-bs-theme="dark"] {
    color-scheme: dark;
    --bg-primary: #081425;
    --bg-secondary: #102139;
    --bg-card: #162943;
    --text-primary: #d3e2ef;
    --text-secondary: #adc3d8;
    --text-heading: #bdd0e1;
    --bs-body-color: var(--text-primary);
    --bs-emphasis-color: var(--text-primary);
    --border-color: #304b68;
    --cyan: #8ac6f0;
    --cyan-dark: #5c9fd1;
    --accent-green: #67c69a;
    --bs-code-color: #59b487;
    --accent-orange: #e1b86b;
    --accent-purple: #c4b9eb;
    --accent-red: #ee8f93;
    --table-head: #1e3855;
    --table-stripe: #192f4a;
    --table-hover: #23415f;
    --table-active: #295073;
    --nav-bg: linear-gradient(90deg, rgb(8 20 37 / 97%), rgb(14 34 57 / 97%));
    --nav-hover: #203b59;
    --menu-feature: #193755;
    --surface-shadow: rgb(2 9 20 / 38%);
    --blog-bg: #12253d;
    --blog-text: #cbddeb;
    --page-bg: radial-gradient(ellipse 85% 60% at 78% 8%, rgb(33 75 113 / 42%), transparent 72%),
        linear-gradient(155deg, #0d2037 0%, #0a1a2f 48%, #071321 100%);
}
:root[data-bs-theme="light"] {
    color-scheme: light;
    --bg-primary: #f2f2ee;
    --bg-secondary: #e9eeec;
    --bg-card: #faf9f5;
    --text-primary: #25384a;
    --text-secondary: #526476;
    --text-heading: #25384a;
    --border-color: #cbd4d5;
    --cyan: #155d91;
    --cyan-dark: #0e4775;
    --accent-green: #17683f;
    --bs-code-color: #17683f;
    --accent-orange: #8a5100;
    --accent-purple: #62429b;
    --accent-red: #b4232d;
    --table-head: #e3eae8;
    --table-stripe: #f1f3ef;
    --table-hover: #e4ecea;
    --table-active: #d8e7ea;
    --nav-bg: rgb(250 249 245 / 97%);
    --nav-hover: #e7ecea;
    --menu-feature: #e8eeeb;
    --surface-shadow: rgb(37 56 74 / 12%);
    --blog-bg: #faf9f5;
    --blog-text: #344a5c;
    --page-bg: radial-gradient(ellipse 80% 60% at 72% 6%, rgb(255 252 244 / 75%), transparent 75%),
        linear-gradient(155deg, #f5f5f0 0%, #f0f2ef 55%, #e9eeed 100%);
}

/* Navigation and search contain their own surfaces, outside the main card palette. */
body { background: var(--page-bg); background-attachment: fixed; }
.text-secondary, .text-body-secondary { color: var(--text-secondary) !important; }
:root[data-bs-theme="dark"] .section-alt {
    background: linear-gradient(155deg, #10243c, #0d1c31);
}
:root[data-bs-theme="dark"] .hero {
    background: radial-gradient(ellipse 75% 80% at 50% 0%, rgb(53 111 158 / 18%), transparent 75%);
}
:root[data-bs-theme="dark"] .card-dark,
:root[data-bs-theme="dark"] .capability-card,
:root[data-bs-theme="dark"] .pricing-card {
    background: linear-gradient(150deg, #192e49, #13243b);
    box-shadow: 0 12px 32px rgb(2 9 20 / 16%);
}
:root[data-bs-theme="dark"] .card-dark:hover,
:root[data-bs-theme="dark"] .capability-card:hover,
:root[data-bs-theme="dark"] .pricing-card:hover {
    border-color: #5d95bf;
}
:root[data-bs-theme="light"] .card-dark,
:root[data-bs-theme="light"] .capability-card,
:root[data-bs-theme="light"] .pricing-card,
:root[data-bs-theme="light"] .blog-post-body {
    box-shadow: 0 8px 28px rgb(37 56 74 / 5%);
}
:root[data-bs-theme="light"] .form-control,
:root[data-bs-theme="light"] .form-select,
:root[data-bs-theme="light"] .theme-toggle {
    border-color: #708895;
}
.navbar[data-aitm="UI.NAV"] { background: var(--nav-bg); border-color: var(--border-color) !important; }
.navbar[data-aitm="UI.NAV"] .navbar-brand,
.navbar[data-aitm="UI.NAV"] .nav-link,
.navbar[data-aitm="UI.NAV"] .navbar-toggler { color: var(--text-primary); }
.navbar[data-aitm="UI.NAV"] .nav-link:hover,
.navbar[data-aitm="UI.NAV"] .nav-link:focus-visible,
.mega-menu-toggle[aria-expanded="true"], .mega-menu-toggle:hover { color: var(--cyan) !important; background: var(--nav-hover); }
.mega-menu-panel { background: var(--bg-secondary); border-color: var(--border-color); box-shadow: 0 26px 75px var(--surface-shadow); }
.mega-menu-column { background: var(--bg-card); border-color: var(--border-color); }
.mega-menu-column-title, .mega-menu-item-copy small, .mega-menu-feature p,
.mega-menu-bottom { color: var(--text-secondary); }
.mega-menu-item, .mega-menu-feature strong { color: var(--text-primary); }
.mega-menu-item:hover, .mega-menu-item:focus-visible { background: var(--nav-hover); color: var(--text-primary); }
.mega-menu-item-icon { background: var(--bg-secondary); border-color: var(--border-color); }
.mega-menu-item:hover .mega-menu-item-icon, .mega-menu-item:focus-visible .mega-menu-item-icon { background: var(--nav-hover); border-color: var(--cyan); }
.mega-menu-feature { background: var(--menu-feature); border-color: var(--border-color); }
.mega-menu-feature-media { background: var(--bg-secondary); border-color: var(--border-color); }
.mega-menu-feature-kicker { color: var(--cyan); }
.mega-menu-bottom { background: var(--bg-card); border-color: var(--border-color); }
.nav-search-suggestions { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 10px 30px var(--surface-shadow); }
.search-suggestion-item { color: var(--text-primary); border-color: var(--border-color); }
.search-suggestion-item:hover { background: var(--nav-hover); }
.search-suggestion-item small { color: var(--text-secondary); }
.culture-mobile-select { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }

/* Table variants must override Bootstrap's .table-dark cell colors and shadows. */
table thead th, table.table > thead > tr > * { background-color: var(--table-head); border-bottom-color: var(--border-color); color: var(--text-primary); }
table th, table td, table.table > :not(caption) > * > * { border-bottom-color: var(--border-color); }
table tbody tr:nth-child(even) > *, table.table tbody tr:nth-child(even) > * { background-color: var(--table-stripe); }
table tbody tr:hover > *, table.table tbody tr:hover > * { background-color: var(--table-hover); }
table.table tbody tr.table-active > *, table.table tbody tr.table-active:hover > * { background-color: var(--table-active); }
table a:not(.btn):hover { color: var(--cyan-dark); }

.cookie-consent, .navbar[data-aitm="UI.ADMIN.NAV"] { background: var(--nav-bg); }
.guide-card-media.guide-card-media-icon { background: var(--bg-secondary); }
.screenshot-nav-arrow { background: var(--nav-bg); }
:root[data-bs-theme="light"] .ai-pill-claude { color: #815000; }
:root[data-bs-theme="light"] .ai-pill-gemini { color: #174ea6; }
:root[data-bs-theme="light"] .ai-pill-deepseek { color: #17683f; }
:root[data-bs-theme="light"] .ai-pill-openai { color: #087658; }
:root[data-bs-theme="light"] .ai-pill-nvidia { color: #4b7300; }
:root[data-bs-theme="light"] .form-control::placeholder { color: #5a6e7e; }
:root[data-bs-theme="light"] .form-control.bg-dark,
:root[data-bs-theme="light"] .form-select.bg-dark { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
:root[data-bs-theme="light"] .form-control.text-white,
:root[data-bs-theme="light"] .form-select.text-white { color: var(--text-primary) !important; }
:root[data-bs-theme="light"] .ai-pill-ollama { color: var(--text-primary); border-color: var(--border-color); background: var(--bg-secondary); }
:root[data-bs-theme="light"] .share-buttons .share-btn:hover { color: #fff; }
:root[data-bs-theme="light"] .mega-menu-feature[data-preview-kind="screenshot"] .mega-menu-feature-image { filter: none; opacity: 1; }
:root[data-bs-theme="light"] .mega-menu-feature[data-preview-kind="screenshot"] .mega-menu-feature-media::after { display: none; }
:root[data-bs-theme="light"] .docker-install {
    --bg: var(--bg-primary); --surface: var(--bg-card); --border: var(--border-color);
    --text: var(--text-primary); --text-dim: var(--text-secondary); --accent: var(--cyan);
    --accent-dim: var(--border-color); --button: #135b91; --code-bg: #e8f0f7; --code-text: #172638;
}

.theme-switcher { display: flex; align-items: center; }
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-width: 36px; min-height: 36px; padding: .35rem .5rem;
    border: 1px solid var(--border-color); border-radius: 999px;
    background: var(--bg-card); color: var(--text-primary); cursor: pointer;
}
.theme-toggle:hover { color: var(--cyan); background: var(--nav-hover); }
.theme-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.theme-icon { width: 18px; height: 18px; }
.theme-icon-moon { display: none; }
[data-bs-theme="light"] .theme-icon-sun { display: none; }
[data-bs-theme="light"] .theme-icon-moon { display: block; }
.theme-toggle-label { font-size: .8rem; }
@media (min-width: 1400px) { .theme-toggle-label { display: none; } }
@media (min-width: 992px) and (max-width: 1399.98px) { .navbar[data-aitm="UI.NAV"] .navbar-nav > .theme-switcher { width: max-content; margin: 0 .75rem; } }
@media (max-width: 991.98px) {
    .navbar[data-aitm="UI.NAV"] .navbar-nav { grid-template-columns: 44px 44px minmax(0, 1fr) 44px; }
    .navbar[data-aitm="UI.NAV"] .culture-switcher { grid-column: 3 !important; justify-self: end; }
    .navbar[data-aitm="UI.NAV"] .navbar-nav > .theme-switcher { grid-column: 4 !important; grid-row: 1; width: 44px; }
    .navbar[data-aitm="UI.NAV"] .nav-auth-item .nav-link,
    .navbar[data-aitm="UI.NAV"] .nav-auth-item .nav-action-btn { background: var(--bg-card); border-color: var(--border-color); }
    .theme-toggle { width: 44px; height: 44px; border-radius: 9px; }
    .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}