/* Theme toggle styles */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    margin-left: 16px;
    position: relative;
    overflow: hidden;
    color: var(--text-primary);
    transition: color 0.3s ease, background-color 0.3s ease;
}

.theme-toggle:hover {
    background-color: var(--soft-gray);
}

.dark-mode .theme-toggle {
    color: var(--dark-text-primary);
}

.dark-mode .theme-toggle:hover {
    background-color: var(--dark-hover);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    position: absolute;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.theme-toggle .sun-icon {
    opacity: 1;
    transform: translateY(0);
}

.theme-toggle .moon-icon {
    opacity: 0;
    transform: translateY(20px);
}

.dark-mode .theme-toggle .sun-icon {
    opacity: 0;
    transform: translateY(-20px);
}

.dark-mode .theme-toggle .moon-icon {
    opacity: 1;
    transform: translateY(0);
}

/* Light mode specific styles */
.light-mode .theme-toggle .sun-icon {
    opacity: 1;
    transform: translateY(0);
}

.light-mode .theme-toggle .moon-icon {
    opacity: 0;
    transform: translateY(20px);
}

/* Light mode styling - 60-30-10 color distribution */
.light-mode {
    --text-primary: var(--neutral-800);     /* Primary text (60% neutral) */
    --text-secondary: var(--neutral-600);   /* Secondary text (60% neutral) */
    --text-tertiary: var(--neutral-400);    /* Tertiary text (60% neutral) */
    --bg-color: var(--neutral-100);         /* Background (60% neutral) */
    --bg-white: #FFFFFF;                   /* Surface background (60% neutral) */
}

/* Text colors */
.light-mode .text-primary { color: var(--neutral-800); }
.light-mode .text-secondary { color: var(--neutral-600); }
.light-mode .text-tertiary { color: var(--neutral-400); }

/* Background colors */
.light-mode .bg-soft { background-color: var(--neutral-200); }
.light-mode .skill-tag { 
    background-color: var(--neutral-200);
    color: var(--primary-600); 
}
.light-mode .bg-white { background-color: var(--bg-white); }
.light-mode .skill-category { background-color: var(--bg-white); }
.light-mode .project-card { 
    background-color: var(--bg-white);
    border-color: rgba(30, 58, 138, 0.1);
}
.light-mode .project-tag {
    background: rgba(30, 58, 138, 0.1);
    color: var(--primary-600);
}

/* Dark mode styling - following the 60-30-10 color distribution */
.dark-mode {
    /* Dark neutral colors (60%) */
    --dark-neutral-100: #2a2a2a; /* Dark border */
    --dark-neutral-200: #1e1e1e; /* Dark surface */
    --dark-neutral-300: #121212; /* Dark background */
    --dark-neutral-700: #a0a0a0; /* Medium text */
    --dark-neutral-800: #e0e0e0; /* Light text */
    
    /* Use the same primary (30%) and accent (10%) colors as light mode */
    
    /* Set theme variables */
    --text-primary: var(--dark-neutral-800);
    --text-secondary: var(--dark-neutral-700);
    --text-tertiary: var(--dark-neutral-100);
    --bg-color: var(--dark-neutral-300);
}

.dark-mode .text-primary { color: var(--dark-neutral-800); }
.dark-mode .text-secondary { color: var(--dark-neutral-700); }
.dark-mode .text-tertiary { color: var(--dark-neutral-100); }

.dark-mode .bg-soft { background-color: var(--dark-neutral-200); }
.dark-mode .bg-white { background-color: var(--dark-neutral-200); }

.dark-mode .project-card,
.dark-mode .skill-category,
.dark-mode .testimonial-card,
.dark-mode .contact-form {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

.dark-mode .btn-outline {
    border-color: var(--dark-text-tertiary);
    color: var(--dark-text-primary);
}

/* Navigation styles - using the primary brand color (30%) */
.light-mode .nav {
    background: rgba(250, 250, 251, 0.95) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(30, 58, 138, 0.1);
}

.light-mode .nav-logo,
.light-mode .nav-link {
    color: var(--neutral-800);
}

.light-mode .nav-link:hover {
    color: var(--primary-400);
}

.dark-mode .nav {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .nav-logo,
.dark-mode .nav-link {
    color: var(--dark-neutral-800);
}

.dark-mode .nav-link:hover {
    color: var(--primary-400);
}

/* Form inputs */
.dark-mode input,
.dark-mode textarea {
    background-color: var(--dark-bg);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--dark-text-tertiary);
}

/* Mobile menu dark mode styling */
.dark-mode .mobile-menu {
    color: var(--dark-text-primary);
}

.dark-mode .mobile-menu:hover {
    color: var(--warm-gold);
}