/* Dark mode styles */
:root {
    /* Light mode variables (default) */
    --theme-transition: var(--transition-speed) ease;
}

/* Dark mode color scheme */
[data-theme="dark"] {
    --primary-color: #fff;
    --background-color: #121212;
    --background-color-rgb: 18, 18, 18;
    --text-color: #fff;
    --link-color: #66b3ff;
    --hover-color: #99ccff;
    --social-link-bg: rgba(255, 255, 255, 0.08);
    --social-heading-color: rgba(255, 255, 255, 0.9);
    --social-link-text: rgba(255, 255, 255, 0.9);
}

/* Dark mode specific styles */
[data-theme="dark"] .app-bar {
    background-color: #121212;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .social-link {
    background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .social-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] footer {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Smooth icon transition */
#theme-toggle {
    transition: transform var(--theme-transition);
}

#theme-toggle:hover {
    transform: rotate(15deg);
}