/* ============================================
   DARK MODE CSS
   ============================================ */

/* Dark Mode Variables */
[data-theme="dark"],
.dark-mode {
    /* Colors - Dark Mode Palette */
    --color-primary: #4A7CFF;
    --color-primary-dark: #2E5BFF;
    --color-primary-light: #6B9AFF;
    
    --color-accent: #FF4D4D;
    --color-accent-dark: #FF1A1A;
    --color-accent-light: #FF8080;
    
    --color-text: #E4E4E7;
    --color-text-secondary: #A1A1AA;
    --color-text-light: #71717A;
    
    --color-background: #18181B;
    --color-surface: #27272A;
    --color-surface-elevated: #3F3F46;
    --color-border: #3F3F46;
    
    /* Shadows adjusted for dark mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* Dark Mode Specific Styles */
[data-theme="dark"] body,
.dark-mode body {
    background-color: var(--color-background);
    color: var(--color-text);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--color-text);
}

[data-theme="dark"] a,
.dark-mode a {
    color: var(--color-primary-light);
}

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

/* Dark Mode Components */
[data-theme="dark"] .card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .project-card,
.dark-mode .card,
.dark-mode .product-card,
.dark-mode .project-card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
.dark-mode .form-control,
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
.dark-mode .form-control:focus,
.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    background-color: var(--color-surface-elevated);
    border-color: var(--color-primary);
    color: var(--color-text);
}

[data-theme="dark"] .btn-primary,
.dark-mode .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

[data-theme="dark"] .btn-primary:hover,
.dark-mode .btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

[data-theme="dark"] .btn-outline,
.dark-mode .btn-outline {
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .btn-outline:hover,
.dark-mode .btn-outline:hover {
    background-color: var(--color-surface-elevated);
    border-color: var(--color-primary);
    color: var(--color-primary-light);
}

/* Dark Mode Navigation */
[data-theme="dark"] .site-header,
[data-theme="dark"] .main-navigation,
.dark-mode .site-header,
.dark-mode .main-navigation {
    background-color: var(--color-surface);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .site-footer,
.dark-mode .site-footer {
    background-color: var(--color-surface);
    border-top-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* Dark Mode Images */
[data-theme="dark"] img,
.dark-mode img {
    opacity: 0.9;
}

[data-theme="dark"] img:hover,
.dark-mode img:hover {
    opacity: 1;
}

/* Dark Mode Alerts */
[data-theme="dark"] .alert,
.dark-mode .alert {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Dark Mode Tables */
[data-theme="dark"] table,
.dark-mode table {
    color: var(--color-text);
}

[data-theme="dark"] table th,
.dark-mode table th {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] table td,
.dark-mode table td {
    border-color: var(--color-border);
}

[data-theme="dark"] table tr:nth-child(even),
.dark-mode table tr:nth-child(even) {
    background-color: var(--color-surface);
}

/* Smooth Transition */
* {
    transition: background-color var(--transition-base), 
                color var(--transition-base),
                border-color var(--transition-base);
}