/* Dark Theme CSS for the portfolio website */

/* Dark theme variables override */
body.dark-theme {
    /* Main colors */
    --primary-color: #4dabf7;
    --secondary-color: #51cf66;
    --accent-color: #ff6b6b;
    --dark-color: #ced4da;
    --light-color: #212529;
    --gray-color: #adb5bd;
    
    /* Backgrounds */
    background-color: #212529;
    color: #ced4da;
}

/* Header styles for dark theme */
body.dark-theme .header {
    background-color: rgba(33, 37, 41, 0.95);
    box-shadow: var(--shadow-sm);
}

body.dark-theme .header.scrolled {
    background-color: #212529;
    box-shadow: var(--shadow-md);
}

body.dark-theme .logo {
    color: #ced4da;
}

body.dark-theme .nav-links li a {
    color: #ced4da;
}

body.dark-theme .nav-links li a::after {
    background-color: var(--primary-color);
}

/* Hero section dark theme */
body.dark-theme .hero {
    background-color: #212529;
}

body.dark-theme .hero::before {
    background: linear-gradient(135deg, rgba(77, 171, 247, 0.1) 0%, rgba(81, 207, 102, 0.1) 100%);
}

/* About section dark theme */
body.dark-theme .about {
    background-color: #343a40;
}

/* Portfolio section dark theme */
body.dark-theme .portfolio {
    background-color: #212529;
}

body.dark-theme .portfolio-item {
    background-color: #343a40;
}

body.dark-theme .portfolio-tech span {
    background-color: rgba(77, 171, 247, 0.2);
    color: var(--primary-color);
}

/* Vlog section dark theme */
body.dark-theme .vlog {
    background-color: #343a40;
}

body.dark-theme .vlog-item {
    background-color: #212529;
}

body.dark-theme .vlog-tag {
    background-color: rgba(77, 171, 247, 0.2);
    color: var(--primary-color);
}

/* Newsletter section dark theme */
body.dark-theme .newsletter {
    background-color: #4dabf7;
}

/* Contact section dark theme */
body.dark-theme .contact {
    background-color: #212529;
}

body.dark-theme .contact-form {
    background-color: #343a40;
}

body.dark-theme .form-control {
    background-color: #495057;
    border-color: #495057;
    color: #ced4da;
}

body.dark-theme .form-control:focus {
    border-color: var(--primary-color);
}

/* Footer dark theme */
body.dark-theme .footer {
    background-color: #343a40;
}

/* Auth pages dark theme */
body.dark-theme .auth-section {
    background-color: #212529;
}

body.dark-theme .auth-container {
    background-color: #343a40;
}

body.dark-theme .password-toggle {
    color: #adb5bd;
}

body.dark-theme .form-control {
    background-color: #495057;
    border-color: #495057;
    color: #ced4da;
}

/* Profile section dark theme */
body.dark-theme .profile-section {
    background-color: #212529;
}

body.dark-theme .profile-container {
    background-color: #343a40;
}

body.dark-theme .profile-tab {
    color: #adb5bd;
    border-bottom-color: #495057;
}

body.dark-theme .profile-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

body.dark-theme .settings-item {
    border-bottom-color: #495057;
}

/* Dark theme toggle */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-left: 20px;
    transition: background-color 0.3s;
    background-color: transparent;
}

.theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

body.dark-theme .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle i {
    font-size: 20px;
    color: var(--dark-color);
    transition: transform 0.5s ease;
}

body.dark-theme .theme-toggle i {
    color: var(--light-color);
}

.theme-toggle:hover i {
    transform: rotate(20deg);
}