/* =====================================================
   DARK MODE - Night Version
   Subtle dark background with cream text
   Modular file for dark mode base styles
   ===================================================== */

/* Dark Mode CSS Variables */
body.dark-mode {
    --c-bg: #2A2E36;
    --c-bg-elevated: #323742;
    --c-text: #F5EFE6;
    --c-text-secondary: #C8C2B8;
    --c-sub: #A09A8E;
    --c-accent: #E8B86D;  /* Warm gold accent for night */
    --c-line: rgba(245, 239, 230, 0.12);
    --c-card-hover: #3A404C;
    
    /* Cool ambient light */
    --warm-light: radial-gradient(
        ellipse 60% 40% at 50% -5%,
        rgba(160, 175, 195, 0.07) 0%,
        rgba(130, 145, 165, 0.04) 30%,
        rgba(100, 115, 135, 0.02) 50%,
        transparent 70%
    );
}

/* Base dark mode styles */
body.dark-mode {
    background-color: var(--c-bg);
    color: var(--c-text);
    transition: background-color 0.6s ease, color 0.5s ease;
}

/* Cool ambient light at center top */
body.dark-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70vh;
    background: var(--warm-light);
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* Navigation */
body.dark-mode .nav-side {
    background: var(--nav-surface);
    backdrop-filter: blur(10px);
    border-right-color: rgba(0, 0, 0, 0.12);
}

body.dark-mode .logo-vert {
    color: #333333;
}

body.dark-mode .nav-social__link {
    color: #333333;
}

/* Hero Section */
body.dark-mode .hero-sec h1 {
    color: var(--c-text);
}

body.dark-mode .hero-sec h1 em {
    color: var(--c-accent);
}

/* Theme switch — softer shadows in dark mode */
body.dark-mode .theme-switch__track {
    --neo-shadow-dark: rgba(0, 0, 0, 0.28);
    --neo-shadow-light: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 2px 2px 4px var(--neo-shadow-dark),
        inset -1px -1px 3px var(--neo-shadow-light);
}

body.dark-mode .theme-switch__knob {
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.28),
        -1px -1px 3px rgba(255, 255, 255, 0.08);
}

body.dark-mode .theme-switch__input:active + .theme-switch__track .theme-switch__knob {
    box-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.24),
        -1px -1px 2px rgba(255, 255, 255, 0.06);
}

/* Smooth transitions for all elements */
body.dark-mode * {
    transition: background-color 0.4s ease, 
                color 0.4s ease, 
                border-color 0.4s ease,
                filter 0.4s ease;
}

/* Z-index layering for dark mode (no position changes to avoid layout shifts) */
body.dark-mode #hero-liquid {
    z-index: 0;
    background: var(--c-bg);
}

body.dark-mode #hero-liquid .hero-liquid-canvas {
    filter: saturate(0.2) brightness(0.92);
}

body.dark-mode .grain-overlay {
    opacity: 0.4;
    mix-blend-mode: soft-light;
}

body.dark-mode .nav-side {
    z-index: 50;
}

body.dark-mode #smooth-wrapper {
    z-index: 1;
}