/* ===== DARK MODE STYLES ===== */

/* Dark mode color variables */
[data-theme="dark"] {
    /* Text Colors */
    --text-primary: #e1e1e1;
    --text-secondary: #a1a1a1;
    --text-muted: #7a7a7a;
    --text-inverse: #1a1a1a;
    
    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-card: rgba(45, 45, 45, 0.8);
    
    /* Border Colors */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --border-dark: rgba(255, 255, 255, 0.2);
    
    /* Shadow Colors - Adjusted for dark mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
}

/* ===== DARK MODE COMPONENT OVERRIDES ===== */

/* Header dark mode */
[data-theme="dark"] .header {
    background-color: rgba(26, 26, 26, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Navigation dark mode */
[data-theme="dark"] .nav__link {
    color: var(--text-primary);
}

[data-theme="dark"] .nav__link:hover {
    color: var(--primary-color);
    background-color: rgba(88, 86, 214, 0.2);
}

[data-theme="dark"] .nav__link--active {
    color: var(--primary-color);
    background-color: rgba(88, 86, 214, 0.2);
}

/* Mobile navigation dark mode */
[data-theme="dark"] .nav__menu {
    background-color: var(--bg-secondary);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Hamburger menu dark mode */
[data-theme="dark"] .hamburger,
[data-theme="dark"] .hamburger::before,
[data-theme="dark"] .hamburger::after {
    background-color: var(--text-primary);
}

/* Theme toggle dark mode */
[data-theme="dark"] .theme-toggle {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .theme-toggle:hover {
    border-color: var(--primary-color);
    background-color: rgba(88, 86, 214, 0.2);
}

/* Cards dark mode */
[data-theme="dark"] .project-card {
    background-color: var(--bg-secondary);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .card {
    background-color: var(--bg-secondary);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Feature tags dark mode */
[data-theme="dark"] .feature-tag {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Footer dark mode */
[data-theme="dark"] .footer {
    background-color: var(--bg-primary);
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .footer__title {
    color: var(--text-primary);
}

[data-theme="dark"] .footer__link {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer__link:hover {
    color: var(--primary-color);
}

/* Social links dark mode */
[data-theme="dark"] .social-link {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .social-link:hover {
    background-color: var(--primary-color);
}

/* Form elements dark mode */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(88, 86, 214, 0.2);
}

/* Modal dark mode */
[data-theme="dark"] .modal__content {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .modal__title {
    color: var(--text-primary);
}

[data-theme="dark"] .modal__close {
    color: var(--text-secondary);
}

[data-theme="dark"] .modal__close:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Tooltip dark mode */
[data-theme="dark"] .tooltip__content {
    background-color: var(--text-primary);
    color: var(--text-inverse);
}

[data-theme="dark"] .tooltip__content::after {
    border-top-color: var(--text-primary);
}

/* ===== DARK MODE ANIMATIONS ===== */

/* Smooth theme transition */
* {
    transition: background-color var(--transition-normal),
                border-color var(--transition-normal),
                color var(--transition-normal),
                box-shadow var(--transition-normal);
}

/* ===== DARK MODE SPECIFIC COMPONENTS ===== */

/* Baby icon dark mode adjustments */
[data-theme="dark"] .baby-face {
    background: #2d2d2d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .eye {
    background: #e1e1e1;
}

[data-theme="dark"] .mouth {
    border-color: #e1e1e1;
}

/* Project card gradients - maintain visibility in dark mode */
[data-theme="dark"] .project-card__gradient--exiframe {
    background: linear-gradient(45deg, #00C9FF, #92FE9D, #FFF94C, #FF9A8B);
    opacity: 0.9;
}

[data-theme="dark"] .project-card__gradient--baby-tracker {
    background: linear-gradient(45deg, #FF6B9D, #C44569, #F8B500, #FF9A8B);
    opacity: 0.9;
}

/* App store button dark mode */
[data-theme="dark"] .btn--app-store img {
    filter: brightness(0.9);
}

/* ===== DARK MODE UTILITIES ===== */

[data-theme="dark"] .text-primary {
    color: var(--text-primary);
}

[data-theme="dark"] .text-secondary {
    color: var(--text-secondary);
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted);
}

[data-theme="dark"] .bg-primary {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .bg-secondary {
    background-color: var(--bg-secondary);
}

/* ===== DARK MODE RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
    [data-theme="dark"] .nav__menu {
        background-color: var(--bg-secondary);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

/* ===== SYSTEM PREFERENCE DETECTION ===== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Text Colors */
        --text-primary: #e1e1e1;
        --text-secondary: #a1a1a1;
        --text-muted: #7a7a7a;
        --text-inverse: #1a1a1a;
        
        /* Background Colors */
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --bg-tertiary: #3a3a3a;
        --bg-card: rgba(45, 45, 45, 0.8);
        
        /* Border Colors */
        --border-color: rgba(255, 255, 255, 0.1);
        --border-light: rgba(255, 255, 255, 0.05);
        --border-dark: rgba(255, 255, 255, 0.2);
        
        /* Shadow Colors */
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    }
}

/* ===== DARK MODE PRINT STYLES ===== */

@media print {
    [data-theme="dark"] {
        --text-primary: #000000;
        --text-secondary: #333333;
        --text-muted: #666666;
        --bg-primary: #ffffff;
        --bg-secondary: #f8f9fa;
        --border-color: #e9ecef;
    }
}