/* Professional Dark Mode - Silicon Valley Theme */
:root {
    --transition-time: 200ms;
}

body.dark-mode {
    /* Dark Mode Color Palette */
    --primary-900: #DBEAFE;
    --primary-800: #93C5FD;
    --primary-700: #60A5FA;
    --primary-600: #3B82F6;
    --primary-500: #3B82F6;
    --primary-400: #60A5FA;
    --primary-300: #93C5FD;
    --primary-200: #2C5282;
    --primary-100: #1A3A5C;
    
    /* Dark Neutral Palette */
    --neutral-950: #F8FAFC;
    --neutral-900: #F1F5F9;
    --neutral-800: #E2E8F0;
    --neutral-700: #CBD5E1;
    --neutral-600: #94A3B8;
    --neutral-500: #64748B;
    --neutral-400: #475569;
    --neutral-300: #334155;
    --neutral-200: #1E293B;
    --neutral-100: #0F172A;
    --neutral-50: #020617;
    
    /* Dark Background System */
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-tertiary: #334155;
    --bg-elevated: #1E293B;
    --bg-overlay: rgba(248, 250, 252, 0.1);
    
    /* Dark Text Colors */
    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;
    --text-inverse: #0F172A;
    --text-brand: #60A5FA;
    
    /* Dark Border System */
    --border-light: #334155;
    --border-medium: #475569;
    --border-strong: #64748B;
    --border-brand: #3B82F6;
    
    /* Dark Shadows - More Subtle */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* ================================
   NAVIGATION - DARK MODE
   ================================ */
body.dark-mode .navbar {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--border-light);
}

body.dark-mode .nav-logo {
    color: var(--text-primary);
}

body.dark-mode .logo-dot {
    background: var(--primary-500);
}

body.dark-mode .nav-link {
    color: var(--text-secondary);
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
    color: var(--text-primary);
}

body.dark-mode .bar {
    background: var(--text-primary);
}

/* ================================
   HERO - DARK MODE
   ================================ */
body.dark-mode .hero {
    background: linear-gradient(to bottom, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

body.dark-mode .hero::before {
    background: 
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
}

body.dark-mode .greeting-text {
    color: var(--primary-400);
}

body.dark-mode .typing-text {
    color: var(--accent-cyan);
}

body.dark-mode .cursor {
    color: var(--accent-cyan);
}

body.dark-mode .hero-name {
    color: var(--text-primary);
}

body.dark-mode .title-main {
    color: var(--text-primary);
}

body.dark-mode .title-sub {
    color: var(--text-secondary);
}

body.dark-mode .hero-description {
    color: var(--text-secondary);
}

body.dark-mode .profile-img {
    border-color: var(--border-light);
    box-shadow: var(--shadow-xl);
}

/* ================================
   BUTTONS - DARK MODE
   ================================ */
body.dark-mode .btn-primary {
    background: var(--primary-500);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .btn-primary:hover {
    background: var(--primary-600);
    box-shadow: var(--shadow-md);
}

body.dark-mode .btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-medium);
}

body.dark-mode .btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-strong);
}

/* ================================
   SECTIONS - DARK MODE
   ================================ */
body.dark-mode .about {
    background: var(--bg-secondary);
}

body.dark-mode .experience {
    background: var(--bg-primary);
}

body.dark-mode .projects {
    background: var(--bg-secondary);
}

body.dark-mode .skills {
    background: var(--bg-primary);
}

body.dark-mode .contact {
    background: var(--bg-secondary);
}

body.dark-mode .section-tag {
    background: var(--primary-200);
    color: var(--primary-700);
}

body.dark-mode .section-title {
    color: var(--text-primary);
}

/* ================================
   ABOUT - DARK MODE
   ================================ */
body.dark-mode .about-img-compact {
    border-color: var(--border-light);
    box-shadow: var(--shadow-xl);
}

body.dark-mode .about-text h2 {
    color: var(--text-primary);
}

body.dark-mode .about-description {
    color: var(--text-secondary);
}

body.dark-mode .skill-item {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

body.dark-mode .skill-item:hover {
    border-color: var(--primary-400);
    box-shadow: var(--shadow-md);
}

body.dark-mode .skill-item i {
    color: var(--primary-400);
}

body.dark-mode .skill-item span {
    color: var(--text-primary);
}

/* ================================
   EXPERIENCE - DARK MODE
   ================================ */
body.dark-mode .exp-card-large {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

body.dark-mode .exp-card-large:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-lg);
}

body.dark-mode .exp-icon {
    background: linear-gradient(135deg, var(--primary-500), var(--accent-cyan));
}

body.dark-mode .exp-icon i {
    color: var(--text-inverse);
}

body.dark-mode .exp-info h3 {
    color: var(--text-primary);
}

body.dark-mode .exp-info p {
    color: var(--text-secondary);
}

body.dark-mode .exp-info span {
    color: var(--primary-400);
}

body.dark-mode .exp-content p {
    color: var(--text-secondary);
}

body.dark-mode .exp-tech span {
    background: var(--primary-200);
    color: var(--primary-700);
}

/* ================================
   PROJECTS - DARK MODE
   ================================ */
body.dark-mode .project-card {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

body.dark-mode .project-card:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-lg);
}

body.dark-mode .project-icon {
    border-color: var(--border-light);
}

body.dark-mode .project-content h3 {
    color: var(--text-primary);
}

body.dark-mode .project-description {
    color: var(--text-secondary);
}

body.dark-mode .project-metrics {
    background: var(--bg-tertiary);
}

body.dark-mode .metric-label {
    color: var(--text-tertiary);
}

body.dark-mode .metric-value {
    color: var(--primary-400);
}

body.dark-mode .tech-tag {
    background: var(--neutral-300);
    color: var(--neutral-700);
    border-color: var(--border-light);
}

body.dark-mode .tech-tag:hover {
    background: var(--primary-200);
    color: var(--primary-700);
    border-color: var(--primary-300);
}

body.dark-mode .project-link {
    background: var(--primary-500);
    color: var(--text-inverse);
}

body.dark-mode .project-link:hover {
    background: var(--primary-600);
}

/* ================================
   SKILLS - DARK MODE
   ================================ */
body.dark-mode .skill-category-horizontal {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

body.dark-mode .skill-category-horizontal:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-lg);
}

body.dark-mode .skill-category-horizontal i {
    color: var(--primary-400);
}

body.dark-mode .skill-category-horizontal h3 {
    color: var(--text-primary);
}

body.dark-mode .skill-tags-horizontal .skill-tag {
    background: var(--neutral-300);
    color: var(--neutral-700);
    border-color: var(--border-light);
}

body.dark-mode .skill-tags-horizontal .skill-tag:hover {
    background: var(--primary-200);
    color: var(--primary-700);
    border-color: var(--primary-300);
}

/* ================================
   CONTACT - DARK MODE
   ================================ */
body.dark-mode .contact-quote {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

body.dark-mode .quote-icon {
    color: var(--primary-400);
}

body.dark-mode .quote-text {
    color: var(--text-primary);
}

body.dark-mode .quote-author {
    color: var(--primary-400);
}

body.dark-mode .contact-item {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

body.dark-mode .contact-item:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-md);
}

body.dark-mode .contact-item i {
    color: var(--primary-400);
}

body.dark-mode .contact-item span {
    color: var(--text-secondary);
}

body.dark-mode .social-link-simple {
    background: var(--bg-elevated);
    border-color: var(--border-light);
    color: var(--primary-400);
}

body.dark-mode .social-link-simple:hover {
    background: var(--primary-500);
    color: var(--text-inverse);
    border-color: var(--primary-500);
}

/* ================================
   FOOTER - DARK MODE
   ================================ */
body.dark-mode .footer {
    background: var(--bg-primary);
    border-top-color: var(--border-light);
}

body.dark-mode .footer-content p {
    color: var(--text-tertiary);
}

/* ================================
   SMOOTH TRANSITIONS
   ================================ */
body,
body * {
    transition: background-color var(--transition-time) ease,
                color var(--transition-time) ease,
                border-color var(--transition-time) ease,
                box-shadow var(--transition-time) ease;
}

/* Exclude transitions for specific elements */
.btn,
.nav-link,
.project-card,
.exp-card-large,
.skill-category-horizontal,
.contact-item,
.social-link-simple {
    transition: all var(--transition-base);
}

/* ================================
   MOBILE MENU - DARK MODE
   ================================ */
@media (max-width: 768px) {
    body.dark-mode .nav-menu {
        background: var(--bg-primary);
        border-top-color: var(--border-light);
    }
}