/**
 * Dark Mode Styles
 * Comprehensive CSS variables and theme definitions
 */

/* Root CSS Variables - Light Theme (Default) */
:root {
    /* Primary Colors */
    --primary-color: #FF4C60;
    --secondary-color: #6C6CE5;
    --accent-color: #FFD15C;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9f9ff;
    --bg-tertiary: #f5f5f5;
    --bg-card: #ffffff;
    --bg-hover: rgba(108, 108, 229, 0.08);
    
    /* Text Colors */
    --text-primary: #353353;
    --text-secondary: #5e5c7f;
    --text-tertiary: #8b88a2;
    --text-light: #9C9AB6;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-primary: #e8e8e8;
    --border-secondary: #ddd;
    --border-light: rgba(0, 0, 0, 0.05);
    
    /* Shadow Colors */
    --shadow-primary: rgba(0, 0, 0, 0.08);
    --shadow-secondary: rgba(0, 0, 0, 0.12);
    --shadow-card: 0 5px 20px 0 rgba(69, 67, 96, 0.1);
    --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.15);
    
    /* Special Elements */
    --preloader-bg: #f9f9ff;
    --code-bg: #f4f4f4;
    --code-text: #383a42;
    --terminal-bg: #1e1e1e;
    --terminal-text: #d4d4d4;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-success: linear-gradient(135deg, #13e2a1 0%, #0fb478 100%);
    
    /* Transitions */
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-fast: 0.2s ease;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Primary Colors */
    --primary-color: #FF6B7A;
    --secondary-color: #7C7EF0;
    --accent-color: #FFD876;
    
    /* Background Colors - Purple-bluish tones */
    --bg-primary: #0a0a14; /* Deep purple-blue background */
    --bg-secondary: #11111f; /* Slightly lighter purple-blue */
    --bg-tertiary: #191928; /* Purple-blue tertiary */
    --bg-card: #151524; /* Card background with purple tint */
    --bg-hover: rgba(124, 126, 240, 0.12);
    
    /* Text Colors */
    --text-primary: #e4e4e9;
    --text-secondary: #a8a8b8;
    --text-tertiary: #7a7a8e;
    --text-light: #5a5a6e;
    --text-inverse: #0a0a0f;
    
    /* Border Colors */
    --border-primary: #2a2a3e;
    --border-secondary: #35354a;
    --border-light: rgba(255, 255, 255, 0.05);
    
    /* Shadow Colors */
    --shadow-primary: rgba(0, 0, 0, 0.3);
    --shadow-secondary: rgba(0, 0, 0, 0.5);
    --shadow-card: 0 5px 20px 0 rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.6);
    
    /* Special Elements */
    --preloader-bg: #12121a;
    --code-bg: #1e1e2e;
    --code-text: #abb2bf;
    --terminal-bg: #0a0a12;
    --terminal-text: #e4e4e9;
    
    /* Adjusted Gradients for Dark Mode */
    --gradient-primary: linear-gradient(135deg, #7c7ef0 0%, #9b59b6 100%);
    --gradient-secondary: linear-gradient(135deg, #ff6b7a 0%, #f5576c 100%);
    --gradient-success: linear-gradient(135deg, #13e2a1 0%, #0fb478 100%);
}

/* Theme Transition Animation - More controlled transitions */
.theme-transitioning {
    transition: none !important;
}

.theme-transitioning body,
.theme-transitioning main,
.theme-transitioning section,
.theme-transitioning header,
.theme-transitioning nav,
.theme-transitioning footer,
.theme-transitioning .desktop-header-1,
.theme-transitioning .mobile-header-1,
.theme-transitioning .vertical-menu,
.theme-transitioning .content {
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
                color 300ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Prevent transitions on complex elements during theme change */
.theme-transitioning .parallax,
.theme-transitioning .Terminal,
.theme-transitioning .bg-terminal,
.theme-transitioning canvas,
.theme-transitioning svg,
.theme-transitioning img,
.theme-transitioning video,
.theme-transitioning iframe {
    transition: none !important;
}

/* Base Element Styling with CSS Variables */
html {
    background-color: var(--bg-secondary);
}

body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Light mode specific */
body:not([data-theme="dark"]),
body.light {
    background-color: #f9f9ff;
}

/* Dark mode specific */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
}

.light {
    background-color: var(--bg-secondary);
}

.shadow-dark {
    box-shadow: var(--shadow-card);
}

/* Header & Navigation - Force dark mode colors with will-change for smoother transitions */
[data-theme="dark"] .desktop-header-1,
[data-theme="dark"] .mobile-header-1,
[data-theme="dark"] header.desktop-header-1,
[data-theme="dark"] header.mobile-header-1,
[data-theme="dark"] header.desktop-header-1.light,
[data-theme="dark"] header.mobile-header-1.light {
    background: #16161f !important;
    background-color: #16161f !important;
    border-right: solid 1px #2a2a3e !important;
    will-change: background-color, border-color;
    border-right-color: #2a2a3e !important;
}

[data-theme="dark"] .desktop-header-1 .vertical-menu li a,
[data-theme="dark"] .mobile-header-1 .vertical-menu li a {
    color: #e4e4e9 !important;  /* Light gray/white for all navbar items */
    text-shadow: none !important;
}

[data-theme="dark"] .desktop-header-1 .vertical-menu li a:hover,
[data-theme="dark"] .desktop-header-1 .vertical-menu li a:hover span,
[data-theme="dark"] .mobile-header-1 .vertical-menu li a:hover,
[data-theme="dark"] .mobile-header-1 .vertical-menu li a:hover span {
    color: #FFD15C !important;
}

[data-theme="dark"] .desktop-header-1 .vertical-menu li.active a,
[data-theme="dark"] .desktop-header-1 .vertical-menu li.active a span {
    color: #e4e4e9 !important;  /* Light gray for active items, not yellow */
}

[data-theme="dark"] .desktop-header-1 .vertical-menu li i {
    color: #6C6CE5 !important;
}

[data-theme="dark"] .desktop-header-1 .vertical-menu li a:hover i {
    color: #FFD15C !important;
}

[data-theme="dark"] .desktop-header-1 .vertical-menu li.active a i {
    color: #6C6CE5 !important;  /* Keep icon purple for active items */
}

/* Footer in navbar - transparent background for both modes */
.desktop-header-1 .footer,
.desktop-header-2 .footer {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* Ensure flag container has no background */
.footer ul.light,
.footer .list-inline.light {
    background: transparent !important;
    background-color: transparent !important;
}

/* Footer text in header */
[data-theme="dark"] .desktop-header-1 .footer {
    color: #7a7a8e !important;
    background-color: transparent !important;
}

[data-theme="dark"] .desktop-header-1 .copyright {
    color: #5a5a6e !important;
}

/* Section backgrounds - Clean and efficient */
/* Dark mode - single rule for all sections */
[data-theme="dark"] section {
    background-color: #0a0a14 !important; /* Deep purple-blue background */
}

/* Ensure service cards are visible in dark mode */
[data-theme="dark"] .services-grid {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
}

[data-theme="dark"] .service-card {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #1e1e2e !important;
    border: 2px solid #3a3a4e !important;
    color: #ffffff !important;
}

[data-theme="dark"] .service-card * {
    opacity: 1 !important;
    visibility: visible !important;
}

[data-theme="dark"] .service-card h3,
[data-theme="dark"] .service-card h3 * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] .service-card p,
[data-theme="dark"] .service-card p * {
    color: #d4d4d9 !important;
    -webkit-text-fill-color: #d4d4d9 !important;
}

[data-theme="dark"] .service-card li,
[data-theme="dark"] .service-features li {
    color: #a8a8b8 !important;
    -webkit-text-fill-color: #a8a8b8 !important;
}

/* Main content area */
main.content {
    background-color: #f9f9ff;
}

[data-theme="dark"] main.content,
[data-theme="dark"] .main-content,
[data-theme="dark"] body {
    background: linear-gradient(135deg, #0a0a14 0%, #0d0c18 50%, #0f0e1a 100%) !important; /* Subtle purple-blue gradient */
    background-attachment: fixed !important;
}

/* Main content area dark mode */
[data-theme="dark"] main.content {
    background-color: var(--bg-primary) !important;
}

/* Section titles - keep gray as navbar */
.section-title,
h1, h2 {
    color: #353353 !important;  /* Same as light mode navbar text */
}

[data-theme="dark"] .section-title,
[data-theme="dark"] h2 {
    color: #ffffff !important;  /* White section titles in dark mode */
}

/* Ensure all section titles are white in dark mode, including specific ones */
[data-theme="dark"] #big_my_works_philosophy,
[data-theme="dark"] #get_in_touch_trans,
[data-theme="dark"] #big_my_works_philosophy span,
[data-theme="dark"] #get_in_touch_trans span {
    color: #ffffff !important;  /* White for all section titles */
}

/* Make h1 (name) white in dark mode */
[data-theme="dark"] h1 {
    color: #ffffff !important;  /* White for name in dark mode */
}

/* Social icons container - force transparent background */
[data-theme="dark"] .social-icons,
[data-theme="dark"] ul.social-icons,
[data-theme="dark"] .social-icons.light,
[data-theme="dark"] ul.list-inline.social-icons {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Make all other text white in dark mode */
[data-theme="dark"] p,
[data-theme="dark"] span:not(.section-title),
[data-theme="dark"] li,
[data-theme="dark"] div:not(.section-title),
[data-theme="dark"] .text-muted,
[data-theme="dark"] .timeline-container .content,
[data-theme="dark"] .service-box p,
[data-theme="dark"] .portfolio-info span,
[data-theme="dark"] body {
    color: #ffffff !important;  /* White text for content */
}

/* Keep specific elements their original colors */
[data-theme="dark"] .vertical-menu li a,
[data-theme="dark"] .copyright,
[data-theme="dark"] .hovertext {
    color: inherit;  /* Keep their assigned colors */
}

/* Cards & Containers */
.timeline-container .content,
.service-box,
.blog-item,
.contact-info {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-card);
}

/* Portfolio items and iOS cards specific dark background */
[data-theme="dark"] .portfolio-item,
[data-theme="dark"] .work-item,
[data-theme="dark"] .ios-card {
    background-color: #1e1e2e !important;
    border: 1px solid #2a2a3e !important;
}

/* iOS card specific styles in dark mode */
[data-theme="dark"] .ios-card .card-content {
    background-color: #1e1e2e !important;
}

[data-theme="dark"] .ios-card .card-title {
    color: #ffffff !important;
}

[data-theme="dark"] .ios-card .card-description {
    color: #d4d4d9 !important;
}

/* Tech badges keep their original brand colors in both modes */
/* Only adjust text color for light-background badges in dark mode */
[data-theme="dark"] .ios-card .tech-badge.javascript,
[data-theme="dark"] .ios-card .tech-badge.huggingface {
    color: #333 !important; /* Dark text on yellow backgrounds */
}

/* Terminal Styling for Dark Mode */
[data-theme="dark"] .Terminal__Toolbar {
    background: linear-gradient(180deg, #2a2a3e 0%, #1e1e2e 100%);
}

[data-theme="dark"] .bg-terminal {
    background-color: var(--terminal-bg);
    color: var(--terminal-text);
}

[data-theme="dark"] .Terminal__body {
    background-color: var(--terminal-bg);
}

[data-theme="dark"] .highlight-keyword {
    color: var(--accent-color);
}

/* Form Elements */
input,
textarea,
select {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

input:focus,
textarea:focus,
select:focus {
    background-color: var(--bg-card);
    border-color: var(--primary-color);
}

/* iOS Form Elements Dark Mode */
[data-theme="dark"] .ios-form-control {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .ios-form-control:focus {
    background-color: var(--bg-card);
    border-color: var(--secondary-color);
}

/* Buttons */
.btn-default {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.btn-default:hover {
    background-color: var(--primary-color);
    color: var(--text-inverse);
    border-color: var(--primary-color);
}

/* Special Dark Mode Adjustments */
/* Keep collaborator logos in original colors in dark mode */
[data-theme="dark"] .collaborator-logo {
    filter: grayscale(30%);
    opacity: 1;
    transition: all 0.4s ease;
}

/* Make ETH Zurich and Accenture logos white in dark mode */
[data-theme="dark"] .collaborator-item:nth-child(5) .collaborator-logo, /* ETH Zurich */
[data-theme="dark"] .collaborator-item:nth-child(4) .collaborator-logo { /* Accenture */
    filter: invert(1) brightness(1);
    opacity: 1;
}

/* Make Rolex logo fully white (remove blue/green elements) in dark mode */
[data-theme="dark"] .collaborator-item:nth-child(6) .collaborator-logo { /* Rolex */
    filter: grayscale(100%) invert(1) brightness(1);
    opacity: 1;
}

/* Collaborator cards with purple glow matching service cards */
[data-theme="dark"] .collaborator-item {
    background: linear-gradient(135deg, #1e1e2e 0%, #16161f 100%) !important;
    border: 1px solid #2a2a3e;
    border-radius: 20px;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
    z-index: 1;
    opacity: 1 !important;
}

[data-theme="dark"] .collaborator-item::before {
    background: transparent !important;
}

/* On hover, purple glow effect matching service cards */
[data-theme="dark"] .collaborator-item:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(108, 108, 229, 0.4) !important;
    border-color: rgba(108, 108, 229, 0.6) !important;
}

[data-theme="dark"] .collaborator-item:hover .collaborator-logo {
    filter: grayscale(0%) brightness(1.3);
    opacity: 1;
    transform: scale(1.05);
}

/* Keep ETH Zurich and Accenture logos white on hover in dark mode */
[data-theme="dark"] .collaborator-item:nth-child(5):hover .collaborator-logo, /* ETH Zurich */
[data-theme="dark"] .collaborator-item:nth-child(4):hover .collaborator-logo { /* Accenture */
    filter: invert(1);
    opacity: 1;
    transform: scale(1.05);
}

/* Keep Rolex logo fully white on hover in dark mode */
[data-theme="dark"] .collaborator-item:nth-child(6):hover .collaborator-logo { /* Rolex */
    filter: grayscale(100%) invert(1) brightness(1);
    opacity: 1;
    transform: scale(1.05);
}

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

[data-theme="dark"] .service-card {
    background-color: var(--bg-card);
    border-color: var(--border-primary);
}

[data-theme="dark"] .service-card.featured {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
    border-color: var(--secondary-color);
}

/* Code Blocks */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background-color: var(--code-bg);
    color: var(--code-text);
}

/* Scrollbar Styling */
[data-theme="dark"]::-webkit-scrollbar {
    width: 10px;
    background-color: var(--bg-primary);
}

[data-theme="dark"]::-webkit-scrollbar-thumb {
    background-color: var(--border-secondary);
    border-radius: 5px;
}

[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-light);
}

/* Floating Theme Toggle Button */
.theme-toggle-float {
    position: fixed;
    top: -20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient-primary);
    border: none;
    cursor: pointer;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-base);
    overflow: hidden;
}

.theme-toggle-float:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.theme-toggle-float:active {
    transform: scale(0.95);
}

.theme-toggle-icon {
    position: relative;
    width: 24px;
    height: 24px;
}

.theme-toggle-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.moon-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

.theme-toggle-float.is-dark .sun-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

.theme-toggle-float.is-dark .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Ripple Effect for Theme Toggle */
.theme-toggle-float::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.theme-toggle-float:active::before {
    width: 100px;
    height: 100px;
}

/* Smooth Color Transitions for Icons */
[data-theme="dark"] .app-icon-parallax {
    filter: brightness(0.8);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-card) 100%);
}

[data-theme="dark"] .app-icon-parallax i {
    color: var(--text-secondary);
}

/* Globe Container Dark Mode */
[data-theme="dark"] #globe-container canvas {
    filter: brightness(0.8) contrast(1.2);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .theme-toggle-float {
        width: 45px;
        height: 45px;
        top: -15px;
        right: 15px;
    }
    
    .theme-toggle-icon {
        width: 20px;
        height: 20px;
    }
}

/* Accessibility - Respect User Preferences for Motion */
@media (prefers-reduced-motion: reduce) {
    .theme-transitioning,
    .theme-transitioning *,
    .theme-transitioning *::before,
    .theme-transitioning *::after {
        transition-duration: 0.01ms !important;
    }
    
    .theme-toggle-float:hover {
        transform: scale(1.1);
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    [data-theme="dark"] {
        --text-primary: #ffffff;
        --text-secondary: #e0e0e0;
        --bg-primary: #000000;
        --bg-secondary: #0a0a0a;
        --border-primary: #444444;
    }
}