/* Dark Mode Variables */
[data-theme="dark"] {
    --primary-color: #818cf8;
    --primary-dark: #6366f1;
    --secondary-color: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: rgba(30, 41, 59, 0.8);
    --border-color: #334155;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* Glassmorphism Effects */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .glass {
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Apply glassmorphism to cards in dark mode */
[data-theme="dark"] .service-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .project-card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
}

/* Navigation in dark mode */
[data-theme="dark"] .navbar {
    background: rgba(15, 23, 42, 0.8);
    border-bottom-color: var(--border-color);
}

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

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