/* Shared Metrixblue light/dark theme. Home remains the visual source of truth. */
html.theme-light {
    color-scheme: light;
    --nav-bg: rgba(255, 255, 255, 0.88);
    --nav-border: rgba(15, 23, 42, 0.08);
}

html.theme-dark {
    color-scheme: dark;
    --color-bg: #0A0F1F;
    --color-bg-white: #111827;
    --color-bg-section: #0F172A;
    --color-bg-dark: #0A0F1F;
    --color-bg-dark-soft: #1E293B;
    --color-text: #F1F5F9;
    --color-text-secondary: #94A3B8;
    --color-text-muted: #64748B;
    --color-text-inverse: #0F172A;
    --color-border: #1E293B;
    --color-border-light: #1E293B;
    --color-card-bg: #1E293B;
    --color-card-border: #334155;
    --color-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --color-section-alt: #0F172A;
    --color-hero-overlay: rgba(5, 7, 12, 0.85);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 32px 80px rgba(0, 0, 0, 0.4);
    --nav-bg: rgba(17, 24, 39, 0.92);
    --nav-border: #1E293B;
    --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.theme-dark body {
    background-color: var(--color-bg, #0A0F1F);
    color: var(--color-text, #F1F5F9);
}

/* Older pages hard-code a light glass header; keep the Home dark header global. */
html.theme-dark .navbar,
body.dark-mode .navbar {
    background: var(--nav-bg, rgba(17, 24, 39, 0.92)) !important;
    border-color: var(--nav-border, #1E293B) !important;
}

html.theme-light .navbar {
    background: var(--nav-bg) !important;
    border-color: var(--nav-border) !important;
}

html.theme-light .navbar .nav-link {
    color: var(--color-text-secondary, #475569) !important;
}

html.theme-light .navbar .nav-link:hover,
html.theme-light .navbar .nav-link.active {
    color: var(--color-text, #0F172A) !important;
}

/* Footers remain dark in both themes, so their supporting copy stays light. */
html.theme-light .footer .footer-brand p,
html.theme-light .footer .footer-col p,
html.theme-light .footer .footer-col a,
html.theme-light .footer .footer-contact li,
html.theme-light .footer .footer-bottom,
html.theme-light .footer .footer-bottom-links a {
    color: #94A3B8 !important;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Same toggle styling used by the current Home page. */
.dark-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0.4rem;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--color-text-secondary, #475569);
    background: rgba(128, 128, 128, 0.06);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--transition-fast, 0.2s ease);
}

.dark-toggle:hover {
    color: var(--color-primary, #2563EB);
    background: rgba(37, 99, 235, 0.08);
    transform: rotate(20deg);
}

.dark-toggle:focus-visible {
    outline: 2px solid var(--color-primary, #2563EB);
    outline-offset: 2px;
}

html.theme-dark .dark-toggle,
body.dark-mode .dark-toggle {
    color: #FBBF24;
}

html.theme-dark .dark-toggle:hover,
body.dark-mode .dark-toggle:hover {
    color: #FCD34D;
    background: rgba(251, 191, 36, 0.1);
}

.dark-toggle-mobile {
    display: none;
}

.dark-toggle__label {
    margin-left: 0.3rem;
    font-size: 0.9rem;
    font-weight: 500;
}

/* The standalone 404 page uses its own legal-page token set. */
html.theme-light {
    --legal-bg: #F8FAFC;
    --legal-surface: rgba(255, 255, 255, 0.9);
    --legal-surface-soft: rgba(241, 245, 249, 0.9);
    --legal-border: rgba(15, 23, 42, 0.12);
    --legal-text: #0F172A;
    --legal-muted: #475569;
    --legal-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

html.theme-light body:has(.not-found) {
    background:
        radial-gradient(circle at 12% 8%, rgba(0, 229, 255, 0.08), transparent 30rem),
        radial-gradient(circle at 88% 24%, rgba(138, 43, 226, 0.08), transparent 34rem),
        var(--legal-bg);
}

html.theme-light .not-found h1 {
    background: linear-gradient(120deg, #0F172A 8%, #0E7490 48%, #6D28D9);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.theme-light .not-found p {
    color: var(--legal-muted);
}

html.theme-light .not-found .btn-secondary {
    border-color: rgba(15, 23, 42, 0.16);
    color: #0F172A;
    background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 980px) {
    .nav-actions {
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dark-toggle {
        transition: none;
    }

    .dark-toggle:hover {
        transform: none;
    }
}