/* Dark Mode Theme */
:root[data-theme="dark"] {
    /* Background Colors */
    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #1a1a1a;
    --color-bg-tertiary: #2a2a2a;

    /* Text Colors */
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #b0b0b0;
    --color-text-tertiary: #808080;

    /* Accent Colors */
    --color-accent: #ff4444;
    --color-accent-hover: #ff6666;

    /* Border Colors */
    --color-border: #333333;
    --color-border-light: #404040;

    /* Card/Surface Colors */
    --color-card-bg: #1a1a1a;
    --color-card-hover: #252525;

    /* Header */
    --header-bg: rgba(10, 10, 10, 0.95);
    --header-shadow: rgba(255, 255, 255, 0.1);
}

/* Dark mode specific adjustments */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
}

/* Hero Section Dark Mode */
[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%) !important;
}

[data-theme="dark"] .hero-quote {
    color: #ffffff !important;
}

[data-theme="dark"] .hero-name {
    color: #ffffff !important;
}

/* Header Dark Mode */
[data-theme="dark"] header {
    background: rgba(10, 10, 10, 0.95) !important;
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .project-card,
[data-theme="dark"] .blog-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .blog-card:hover {
    background: var(--color-card-hover);
    border-color: var(--color-accent);
}

[data-theme="dark"] .stat-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="dark"] .calculator-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] code {
    background: var(--color-bg-tertiary);
    color: #ff6b6b;
}

/* Smooth theme transition */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}