/* Theme variables */
:root {
    /* Dark theme colors (default) */
    --bg-color: #0a0a0a;
    --text-color: #f0f0f0;
    --text-secondary: #aaa;
    --text-tertiary: #666;
    --border-color: #333;
    --border-hover: #666;
    --panel-bg: rgba(10, 10, 10, 0.7);
    --element-bg: rgba(30, 30, 30, 0.6);
    --element-hover: rgba(40, 40, 40, 0.6);
    --terminal-header: rgba(15, 15, 15, 0.8);
    --success-color: #28c840;
    --control-close: #ff5f57;
    --control-minimize: #febc2e;
    --control-maximize: #28c840;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --shadow-hover: rgba(0, 0, 0, 0.25);
    --selection-bg: rgba(10, 10, 10, 0.7);
    --selection-color: #f0f0f0;
    --grid-color: #222;
    --particle-color: #444;
    --matrix-char-color: #333;
    --scanline-color: #333;
 }
 
 /* Light theme */
 [data-theme="light"] {
    /* Base colors */
    --bg-color: #eef2f7;
    --text-color: #1a2530;
    --text-secondary: #394c5f;
    --text-tertiary: #536b84;
    --border-color: #c1d1e0;
    --border-hover: #6d8caa;
 
    /* Panel backgrounds */
    --panel-bg: rgba(240, 247, 253, 0.75);
    --element-bg: rgba(226, 238, 248, 0.6);
    --element-hover: rgba(213, 230, 245, 0.7);
    --terminal-header: rgba(225, 235, 245, 0.8);
 
    /* Terminal accent colors */
    --success-color: #0ca678;
    --control-close: #ff5f57;
    --control-minimize: #febc2e;
    --control-maximize: #28c840;
 
    /* Effects */
    --shadow-color: rgba(26, 54, 93, 0.1);
    --shadow-hover: rgba(26, 54, 93, 0.18);
    --selection-bg: rgba(213, 226, 240, 0.7);
    --selection-color: #1a2530;
 
    /* Background elements */
    --grid-color: #cad7e3;
    --particle-color: #a8bfd0;
    --matrix-char-color: #8babc0;
    --scanline-color: #9db6c7;
 }
 
 /* Apply cursor:none to ALL interactive elements to prevent default cursor */
 body,
 a,
 button,
 input,
 select,
 textarea,
 .nav-dot,
 .project-link,
 .window-control,
 .terminal-link,
 [role="button"],
 .navigation div,
 * {
    cursor: none !important;
 }
 
 /* Custom selection styling */
 ::selection {
    background-color: var(--selection-bg);
    color: var(--selection-color);
 }
 
 /* Custom cursor element */
 .custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 10001;
    transform: translate(-50%, -50%);
    will-change: transform;
    mix-blend-mode: difference; /* Makes cursor visible on all backgrounds */
 }
 
 /* Cursor afterimage (phosphor effect) */
 .cursor-trail {
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.3;
    transform: translate(-50%, -50%);
    transition: opacity 0.8s ease;
    mix-blend-mode: difference;
 }
 
 /* Enhanced selection box with terminal aesthetics - FIXED */
 .selection-box {
    position: fixed;
    border: 1px solid rgba(240, 240, 240, 0.8);
    background-color: rgba(10, 10, 10, 0.3);
    pointer-events: none;
    z-index: 10000;
    display: none;
    box-shadow: 0 0 10px rgba(240, 240, 240, 0.15);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* For scan lines */
 }
 
 /* Light mode selection box fix */
 [data-theme="light"] .selection-box {
    border: 1px solid rgba(100, 125, 160, 0.4);
    background-color: rgba(213, 226, 240, 0.15);
    box-shadow: 0 0 10px rgba(100, 125, 160, 0.2);
 }
 
 /* Terminal scan lines in selection box */
 .selection-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
       to bottom,
       rgba(240, 240, 240, 0.03) 0%,
       rgba(240, 240, 240, 0.03) 50%,
       transparent 50%,
       transparent 100%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 1;
 }
 
 /* Light mode scanlines in selection box */
 [data-theme="light"] .selection-box::before {
    background: linear-gradient(
       to bottom,
       rgba(92, 137, 176, 0.03) 0%,
       rgba(92, 137, 176, 0.03) 50%,
       transparent 50%,
       transparent 100%
    );
    background-size: 100% 4px;
 }
 
 /* Selection coordinates display */
 .selection-coords {
    position: fixed;
    font-family: "IBMPlexMono", monospace;
    font-size: 10px;
    color: #f0f0f0;
    background-color: rgba(10, 10, 10, 0.8);
    padding: 2px 5px;
    border-left: 1px solid rgba(240, 240, 240, 0.8);
    pointer-events: none;
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.2s ease;
 }
 
 /* Light mode selection coordinates */
 [data-theme="light"] .selection-coords {
    color: #1a2530;
    background-color: rgba(240, 247, 253, 0.8);
    border-left: 1px solid rgba(100, 125, 160, 0.4);
 }
 
 /* Base styling */
 body {
    color: var(--text-color);
    background: var(--bg-color);
    transition: color 0.3s ease, background 0.3s ease;
 }
 
 /* Sections & Headers */
 .hero-container,
 .about-container,
 .projects-container,
 .contact-container {
    color: var(--text-color);
    transition: color 0.3s ease;
 }
 
 .header,
 .prompt,
 .page-number,
 .scroll-indicator,
 .footer-hint {
    color: var(--text-tertiary);
    transition: color 0.3s ease;
 }
 
 .scroll-line {
    background-color: var(--text-tertiary);
    transition: background-color 0.3s ease;
 }
 
 /* Terminal elements */
 .terminal {
    background-color: var(--panel-bg);
    border-left: 2px solid var(--border-color);
    box-shadow: 0 10px 30px var(--shadow-color);
    transition: all 0.3s ease;
 }
 
 .terminal:hover {
    border-left-color: var(--border-hover);
    box-shadow: 0 15px 35px var(--shadow-hover);
    transform: translateY(-2px);
 }
 
 /* Light mode terminal header enhancement */
 [data-theme="light"] .terminal-header {
    background: linear-gradient(to right, rgba(225, 235, 245, 0.9), rgba(215, 230, 242, 0.8));
    border-bottom: 1px solid var(--border-color);
 }
 
 .terminal-title {
    color: var(--text-tertiary);
    transition: color 0.3s ease;
 }
 
 .terminal-content,
 .terminal-output,
 .terminal-line {
    color: var(--text-secondary);
    transition: color 0.3s ease;
 }
 
 .terminal-cursor {
    background-color: var(--text-tertiary);
    transition: background-color 0.3s ease;
 }
 
 /* File listing */
 .file-listing td {
    color: var(--text-secondary);
    transition: color 0.3s ease;
 }
 
 .file-permissions,
 .file-date {
    color: var(--text-tertiary);
    transition: color 0.3s ease;
 }
 
 .directory-name,
 .file-name {
    color: var(--text-secondary);
    transition: color 0.3s ease;
 }
 
 /* Terminal slides */
 .terminal-slides {
    border-top: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
 }
 
 .experience-slide .slide-title {
    color: var(--text-color);
    transition: color 0.3s ease;
 }
 
 .experience-slide .slide-title::before {
    color: var(--text-tertiary);
    transition: color 0.3s ease;
 }
 
 .experience-slide .slide-description {
    color: var(--text-secondary);
    transition: color 0.3s ease;
 }
 
 /* Enhanced skill tags for light mode */
 .experience-slide .skill-tag {
    background-color: var(--element-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
 }
 
 .experience-slide .skill-tag:hover {
    background-color: var(--element-hover);
    color: var(--text-color);
    border-color: var(--border-hover);
    transform: translateY(-2px);
 }
 
 /* Navigation */
 .navigation div,
 .fixed-navigation div {
    color: var(--text-tertiary);
    transition: color 0.3s ease;
 }
 
 .navigation div:hover,
 .fixed-navigation div:hover,
 .navigation div.active,
 .fixed-navigation div.active {
    color: var(--text-color);
 }
 
 .navigation div::after,
 .fixed-navigation div::after {
    background-color: var(--text-tertiary);
    transition: background-color 0.3s ease, width 0.3s ease;
 }
 
 .navigation div:hover::after,
 .fixed-navigation div:hover::after,
 .navigation div.active::after,
 .fixed-navigation div.active::after {
    background-color: var(--text-color);
 }
 
 /* Projects */
 .projects-title,
 .contact-title,
 .project-name,
 .panel-title {
    color: var(--text-color);
    transition: color 0.3s ease;
 }
 
 .project-description,
 .terminal-slide {
    color: var(--text-secondary);
    transition: color 0.3s ease;
 }
 
 /* Enhanced project cards for light mode */
 [data-theme="light"] .project-card,
 [data-theme="light"] .contact-panel {
    background: linear-gradient(145deg, #f0f5fa, #e6ebf0);
    border-left: 2px solid var(--border-color);
    box-shadow: 0 8px 20px var(--shadow-color);
    transition: all 0.3s ease;
 }
 
 [data-theme="light"] .project-card:hover,
 [data-theme="light"] .contact-panel:hover {
    background: linear-gradient(145deg, #f5f8fc, #edf1f6);
    border-left-color: var(--border-hover);
    box-shadow: 0 12px 28px var(--shadow-hover);
    transform: translateY(-4px);
 }
 
 .see-more-button {
    background-color: var(--panel-bg);
    border-left: 2px solid var(--border-color);
    box-shadow: 0 10px 30px var(--shadow-color);
    color: var(--text-secondary);
    transition: all 0.3s ease;
 }
 
 .see-more-button:hover {
    border-left-color: var(--border-hover);
    box-shadow: 0 15px 35px var(--shadow-hover);
    color: var(--text-color);
    transform: translateY(-4px);
 }
 
 .prompt-symbol {
    color: var(--text-tertiary);
    transition: color 0.3s ease;
 }
 
 .panel-line {
    background-color: var(--border-color);
    transition: background-color 0.3s ease;
 }
 
 /* Form elements */
 .contact-input,
 .contact-textarea,
 .terminal-input {
    background-color: var(--element-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all 0.2s ease;
 }
 
 .contact-input:focus,
 .contact-textarea:focus,
 .terminal-input:focus {
    border-color: var(--border-hover);
    color: var(--text-color);
    box-shadow: 0 0 8px rgba(92, 137, 176, 0.2);
    outline: none;
 }
 
 /* Enhanced light mode buttons */
 [data-theme="light"] .contact-submit,
 [data-theme="light"] .social-link,
 [data-theme="light"] .project-link,
 [data-theme="light"] .project-tech {
    background-color: var(--element-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
 }
 
 [data-theme="light"] .contact-submit:hover,
 [data-theme="light"] .social-link:hover,
 [data-theme="light"] .project-link:hover,
 [data-theme="light"] .project-tech:hover {
    background-color: var(--element-hover);
    color: var(--text-color);
    border-color: var(--border-hover);
    transform: translateY(-2px);
 }
 
 .form-success {
    color: var(--success-color);
 }
 
 /* Theme toggle - fixed position and styling */
 .theme-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: var(--element-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-left: 2px solid var(--border-color);
    padding: 8px 12px;
    font-family: "IBMPlexMono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 5px 15px var(--shadow-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    align-items: center;
    gap: 8px;
 }
 
 /* Enhanced light mode toggle button */
 [data-theme="light"] .theme-toggle {
    background-color: rgba(226, 236, 246, 0.7);
    box-shadow: 0 4px 12px var(--shadow-color);
 }
 
 .theme-toggle:hover {
    border-left-color: var(--border-hover);
    color: var(--text-color);
    background-color: var(--element-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--shadow-hover);
 }
 
 .theme-toggle-icon,
 .theme-label {
    position: relative;
    z-index: 1;
 }
 
 .theme-toggle-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 
 /* Light mode scrollbar styling */
 [data-theme="light"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
 }
 
 [data-theme="light"] ::-webkit-scrollbar-track {
    background-color: rgba(240, 247, 253, 0.5);
 }
 
 [data-theme="light"] ::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 0;
 }
 
 [data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-hover);
 }
 
 /* Theme transition effect */
 .theme-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
 }
 
 /* Enhanced terminal links for light mode */
 [data-theme="light"] .terminal-link {
    color: #4d7ea8;
    border-bottom: 1px dotted rgba(92, 137, 176, 0.3);
    transition: all 0.2s ease;
 }
 
 [data-theme="light"] .terminal-link:hover {
    color: #366a9f;
 }
 
 /* Enhanced highlight colors for light mode */
 [data-theme="light"] [class^="highlight-"] {
    font-weight: 600;
    color: #4d7ea8;
    transition: all 0.2s ease;
 }
 
 [data-theme="light"] [class^="highlight-"]:hover {
    color: #366a9f;
 }
 
 /* Responsive styles for mobile */
 @media (max-width: 768px) {
    .theme-toggle {
       top: 10px !important;
       right: 10px !important;
       padding: 6px 10px;
       font-size: 10px;
    }
 
    .theme-label {
       display: none;
    }
 
    [data-theme="light"] .fixed-navigation {
       background-color: rgba(240, 247, 253, 0.85);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       border-top: 1px solid var(--border-color);
    }
 }