/* ============================
   LIZIU - Dark Mode Theme
   Overrides :root variables when data-theme="dark"
   ============================ */

html[data-theme="dark"] {
    /* Neutrals (inverted) */
    --white: #1E293B;
    --gray-50: #1E293B;
    --gray-100: #283548;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #94A3B8;
    --gray-500: #94A3B8;
    --gray-600: #CBD5E1;
    --gray-700: #E2E8F0;
    --gray-800: #F1F5F9;
    --gray-900: #F8FAFC;

    /* Surfaces */
    --bg: #0F172A;
    --surface: #1E293B;
    --surface-hover: #283548;
    --border: #334155;
    --border-light: #283548;

    /* Primary adjustments for dark bg */
    --primary-50: rgba(139, 92, 246, 0.12);
    --primary-100: rgba(139, 92, 246, 0.18);
    --primary-200: rgba(139, 92, 246, 0.25);

    /* Difficulty backgrounds for dark */
    --easy-bg: rgba(16, 185, 129, 0.15);
    --easy-text: #6EE7B7;
    --medium-bg: rgba(245, 158, 11, 0.15);
    --medium-text: #FCD34D;
    --hard-bg: rgba(239, 68, 68, 0.15);
    --hard-text: #FCA5A5;

    /* Shadows (darker, more subtle) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);

    color-scheme: dark;
}

/* Callout overrides for dark mode */
html[data-theme="dark"] .callout-info {
    background: rgba(59, 130, 246, 0.12);
    color: #93C5FD;
}

html[data-theme="dark"] .callout-success {
    background: rgba(16, 185, 129, 0.12);
    color: #6EE7B7;
}

html[data-theme="dark"] .callout-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #FCD34D;
}

html[data-theme="dark"] .callout-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #FCA5A5;
}

/* Key takeaway box */
html[data-theme="dark"] .key-takeaway {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(253, 230, 138, 0.08) 100%);
    color: #FCD34D;
}

html[data-theme="dark"] .key-takeaway strong {
    color: #FBBF24;
}

/* Hint / solution content */
html[data-theme="dark"] .hint-content.visible {
    background: rgba(59, 130, 246, 0.1);
}

html[data-theme="dark"] .solution-content.visible {
    background: rgba(16, 185, 129, 0.1);
}

/* Practice problem header */
html[data-theme="dark"] .practice-problem-header {
    background: var(--surface);
}

/* Nav overrides — inline styles use hardcoded colors */
html[data-theme="dark"] .main-nav {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .dropdown-content {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .dropdown-content a {
    color: var(--gray-700) !important;
}

html[data-theme="dark"] .dropdown-content a:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #A78BFA !important;
}

html[data-theme="dark"] .dropdown-label {
    color: var(--gray-500) !important;
}

html[data-theme="dark"] .nav-link {
    color: var(--gray-600) !important;
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active {
    color: #A78BFA !important;
    background: rgba(139, 92, 246, 0.1) !important;
}

html[data-theme="dark"] .nav-search-btn,
html[data-theme="dark"] .nav-progress-btn,
html[data-theme="dark"] .nav-offline-btn,
html[data-theme="dark"] .nav-theme-btn,
html[data-theme="dark"] .nav-bookmark-btn {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--gray-500) !important;
}

html[data-theme="dark"] .nav-search-btn:hover,
html[data-theme="dark"] .nav-progress-btn:hover,
html[data-theme="dark"] .nav-offline-btn:hover,
html[data-theme="dark"] .nav-theme-btn:hover,
html[data-theme="dark"] .nav-bookmark-btn:hover {
    border-color: #7C3AED !important;
    color: #A78BFA !important;
    background: rgba(139, 92, 246, 0.08) !important;
}

html[data-theme="dark"] .mobile-menu-toggle span {
    background: var(--gray-600) !important;
}

/* Mobile menu */
@media (max-width: 768px) {
    html[data-theme="dark"] .nav-menu {
        background: var(--surface) !important;
        border-top-color: var(--border) !important;
    }

    html[data-theme="dark"] .nav-actions {
        border-top-color: var(--border) !important;
    }

    html[data-theme="dark"] .dropdown-content {
        background: var(--bg) !important;
    }
}

/* Sidebar mobile overlay */
html[data-theme="dark"] .tutorial-sidebar.mobile-open {
    background: var(--surface);
}

/* Search modal dark mode */
html[data-theme="dark"] .search-container {
    background: var(--surface) !important;
    border: 1px solid var(--border);
}

html[data-theme="dark"] .search-header {
    border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .search-input {
    color: var(--gray-900) !important;
}

html[data-theme="dark"] .search-result-item {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .search-result-item:hover,
html[data-theme="dark"] .search-result-item.selected {
    border-color: #7C3AED !important;
    background: rgba(139, 92, 246, 0.08) !important;
}

html[data-theme="dark"] .search-footer {
    background: var(--bg) !important;
    border-top-color: var(--border) !important;
}

html[data-theme="dark"] .search-shortcuts kbd {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--gray-600) !important;
}

html[data-theme="dark"] .suggestion-item {
    background: var(--bg) !important;
    color: var(--gray-600) !important;
}

html[data-theme="dark"] .suggestion-item:hover {
    background: #7C3AED !important;
    color: white !important;
}

html[data-theme="dark"] .search-suggestions {
    border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .result-title {
    color: var(--gray-900) !important;
}

html[data-theme="dark"] .result-title mark {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #FCD34D !important;
}

html[data-theme="dark"] .result-snippet mark {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #FCD34D !important;
}

html[data-theme="dark"] .result-category {
    background: var(--bg) !important;
    color: var(--gray-500) !important;
}

/* Tutorial nav link */
html[data-theme="dark"] .tutorial-nav-link .title {
    color: var(--gray-900);
}

/* Complexity table */
html[data-theme="dark"] .complexity-table th {
    background: rgba(139, 92, 246, 0.12);
}

/* Images — slightly reduce brightness */
html[data-theme="dark"] .tutorial-image img {
    opacity: 0.92;
}

/* Footer */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer {
    background: var(--surface) !important;
    border-top-color: var(--border) !important;
}

html[data-theme="dark"] .footer a,
html[data-theme="dark"] footer a {
    color: var(--gray-600) !important;
}

/* Theme toggle button */
.nav-theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: white;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.nav-theme-btn:hover {
    border-color: #C4B5FD;
    color: #8B5CF6;
    background: rgba(139, 92, 246, 0.04);
}

.nav-theme-btn:focus-visible {
    outline: 2px solid #8B5CF6;
    outline-offset: 2px;
}

.nav-theme-btn .theme-icon-sun,
.nav-theme-btn .theme-icon-moon {
    display: none;
}

/* Show moon in light mode (click to go dark) */
html:not([data-theme="dark"]) .nav-theme-btn .theme-icon-moon {
    display: block;
}

/* Show sun in dark mode (click to go light) */
html[data-theme="dark"] .nav-theme-btn .theme-icon-sun {
    display: block;
}

/* Transition for smooth theme change */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}