/* ============================================================
   NEPTUNE ELEVATORS v2.0 — DARK MODE
   Toggle switch, theme transition, system preference detection
   Dark-first default with light mode option
   ============================================================ */

/* ----------------------------------------------------------
   1. THEME TRANSITION
   Smooth color transitions when switching themes
   ---------------------------------------------------------- */

/* Apply transition to all color-related properties */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
    transition: background-color var(--duration-slow) var(--ease-out),
                color var(--duration-slow) var(--ease-out),
                border-color var(--duration-slow) var(--ease-out),
                box-shadow var(--duration-slow) var(--ease-out),
                fill var(--duration-slow) var(--ease-out),
                stroke var(--duration-slow) var(--ease-out) !important;
}

/* Disable transition after initial load to prevent flash */
html:not(.theme-transition) {
    transition: none;
}

/* ----------------------------------------------------------
   2. DARK MODE TOGGLE SWITCH
   Premium toggle with sun/moon icons
   ---------------------------------------------------------- */

.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    padding: var(--space-1-5);
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    transition: all var(--duration-normal) var(--ease-out);
}

.theme-toggle:hover {
    border-color: var(--border-default);
}

.theme-toggle-track {
    position: relative;
    width: 48px;
    height: 24px;
    background: var(--navy-700);
    border-radius: var(--radius-full);
    transition: background var(--duration-normal) var(--ease-out);
}

.theme-toggle-track::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--warm-100);
    border-radius: var(--radius-full);
    transition: transform var(--duration-slow) var(--ease-bounce);
    box-shadow: var(--shadow-sm);
}

/* Light mode state */
[data-theme="light"] .theme-toggle-track {
    background: var(--warm-300);
}

[data-theme="light"] .theme-toggle-track::before {
    transform: translateX(24px);
    background: var(--navy-900);
}

/* Toggle icons */
.theme-toggle-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: color var(--duration-normal) var(--ease-out),
                transform var(--duration-slow) var(--ease-out),
                opacity var(--duration-normal) var(--ease-out);
}

.theme-toggle-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle-icon-sun {
    opacity: 0.4;
    transform: rotate(-90deg) scale(0.8);
    position: absolute;
}

[data-theme="light"] .theme-toggle-icon-moon {
    opacity: 0.4;
    transform: rotate(90deg) scale(0.8);
}

[data-theme="light"] .theme-toggle-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    position: static;
}

/* Compact toggle (icon only) */
.theme-toggle-compact {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-default);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    transition: all var(--duration-normal) var(--ease-out);
    cursor: pointer;
}

.theme-toggle-compact:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-glow);
}

.theme-toggle-compact svg {
    width: 20px;
    height: 20px;
    transition: transform var(--duration-slow) var(--ease-bounce);
}

[data-theme="light"] .theme-toggle-compact .moon-icon {
    display: none;
}

.theme-toggle-compact .sun-icon {
    display: none;
}

[data-theme="light"] .theme-toggle-compact .sun-icon {
    display: block;
}

/* ----------------------------------------------------------
   3. SYSTEM PREFERENCE DETECTION
   Auto-detect user's system preference on first visit
   ---------------------------------------------------------- */

/* Default (no data-theme set) — respect system preference */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg-primary: var(--warm-50);
        --bg-secondary: #FFFFFF;
        --bg-tertiary: var(--warm-100);
        --bg-elevated: #FFFFFF;
        --bg-glass: rgba(245, 243, 239, 0.85);

        --text-primary: var(--navy-950);
        --text-secondary: var(--navy-700);
        --text-tertiary: var(--navy-600);
        --text-muted: var(--warm-600);
        --text-inverse: var(--warm-50);

        --border-subtle: rgba(10, 10, 20, 0.06);
        --border-default: rgba(10, 10, 20, 0.12);
        --border-strong: rgba(10, 10, 20, 0.2);
        --border-gold: rgba(0, 147, 204, 0.4);

        --accent-primary: var(--gold-600);
        --accent-hover: var(--gold-500);
        --accent-active: var(--gold-700);
        --accent-glow: rgba(0, 147, 204, 0.1);

        --noise-opacity: 0.02;
    }
}

/* Dark mode is default, so no media query needed for dark */

/* ----------------------------------------------------------
   4. THEME-SPECIFIC ADJUSTMENTS
   Fine-tune elements that need special handling per theme
   ---------------------------------------------------------- */

/* Images — slight brightness adjustment in dark mode */
[data-theme="dark"] img,
:root:not([data-theme]) img {
    filter: brightness(0.95);
}

[data-theme="light"] img {
    filter: brightness(1);
}

/* Code/pre blocks */
[data-theme="dark"] pre,
:root:not([data-theme]) pre,
[data-theme="dark"] code,
:root:not([data-theme]) code {
    background: var(--navy-900);
    color: var(--warm-200);
}

[data-theme="light"] pre,
[data-theme="light"] code {
    background: var(--warm-100);
    color: var(--navy-800);
}

/* Selection colors */
::selection {
    background: var(--accent-primary);
    color: var(--text-on-dark);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) var(--bg-secondary);
}

/* ----------------------------------------------------------
   5. THEME INDICATOR (optional — for debugging/showing state)
   ---------------------------------------------------------- */

.theme-indicator {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-tooltip);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background: var(--bg-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-default);
    color: var(--text-muted);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
    pointer-events: none;
}

.theme-indicator.show {
    opacity: 1;
}

/* ----------------------------------------------------------
   6. PRINT STYLES
   Always light mode for print
   ---------------------------------------------------------- */

@media print {
    :root,
    [data-theme="dark"],
    [data-theme="light"] {
        --bg-primary: #FFFFFF;
        --bg-secondary: #FFFFFF;
        --bg-tertiary: #F5F5F5;
        --text-primary: #000000;
        --text-secondary: #333333;
        --border-subtle: #CCCCCC;
        --border-default: #999999;
        --accent-primary: #B8860B;
    }

    .theme-toggle,
    .theme-toggle-compact,
    .theme-indicator {
        display: none !important;
    }

    * {
        animation: none !important;
        transition: none !important;
    }
}