@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
    --tech-bg: #06070B;
    --tech-bg-card: rgba(11, 13, 20, 0.7);
    --tech-border: rgba(255, 255, 255, 0.07);
    --tech-border-active: rgba(91, 120, 246, 0.45);
    --tech-accent: #5B78F6;
    --tech-cyan: #00F0FF;
    --tech-green: #00FF66;
    --tech-orange: #FF7700;
    --tech-text: #9f9f9f;
    --tech-text-muted: #8E9BAE;
    --tech-title: #ffffff;
    --font-mono: 'JetBrains Mono', monospace;
    --font-sans: 'Space Grotesk', sans-serif;
    
    /* Blueprint/HUD variables */
    --blueprint-line: rgba(255, 255, 255, 0.007);
    --blueprint-border: rgba(255, 255, 255, 0.05);
    --shadow-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --header-bg: rgba(6, 7, 11, 0.8);
    --btn-bg: rgba(255, 255, 255, 0.02);
    --btn-img-filter: brightness(0) invert(1);
    
    /* Terminal variables */
    --terminal-bg: #020203;
    --terminal-text: #55FF55;
    --terminal-header-text: #8E9BAE;
    
    /* Logo / Preloader variables */
    --logo-filter: none;
    --preloader-bg: #111;
    --preloader-bar-bg: #444444;
    
    /* Cursor blend mode */
    --cursor-blend: difference;
    
    /* Scrollbar variables */
    --scrollbar-track: var(--tech-bg);
    --scrollbar-thumb: rgba(255, 255, 255, 0.1);
    
    /* Telemetry variables */
    --telemetry-bg: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] {
    --tech-bg: #F4F6FA;
    --tech-bg-card: rgba(255, 255, 255, 0.85);
    --tech-border: rgba(0, 0, 0, 0.08);
    --tech-border-active: rgba(91, 120, 246, 0.65);
    --tech-accent: #3F5EFB;
    --tech-cyan: #007799;
    --tech-green: #008833;
    --tech-orange: #D35400;
    --tech-text: #4A5568;
    --tech-text-muted: #718096;
    --tech-title: #1A202C;
    
    /* Blueprint/HUD variables */
    --blueprint-line: rgba(0, 0, 0, 0.015);
    --blueprint-border: rgba(0, 0, 0, 0.05);
    --shadow-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    --header-bg: rgba(244, 246, 250, 0.85);
    --btn-bg: rgba(0, 0, 0, 0.03);
    --btn-img-filter: brightness(0) opacity(0.7);
    
    /* Terminal variables */
    --terminal-bg: #F8FAFC;
    --terminal-text: #0F172A;
    --terminal-header-text: #64748B;
    
    /* Logo / Preloader variables */
    --logo-filter: invert(1) hue-rotate(180deg) brightness(0.2);
    --preloader-bg: #F4F6FA;
    --preloader-bar-bg: #E2E8F0;
    
    /* Cursor blend mode */
    --cursor-blend: normal;
    
    /* Scrollbar variables */
    --scrollbar-thumb: rgba(0, 0, 0, 0.15);
    
    /* Telemetry variables */
    --telemetry-bg: rgba(0, 0, 0, 0.03);
}

/* Global Transitions for smooth theme switching */
body, .shadow-box, .header-area, .terminal-window, h1, h2, h3, h4, h5, h6, a, p, span, i, button, .tech-telemetry-panel, .telemetry-row {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

/* Base Body Redesign */
body {
    background-color: var(--tech-bg) !important;
    font-family: var(--font-sans) !important;
    letter-spacing: -0.2px;
    color: var(--tech-text) !important;
}

/* Subtle Blueprint Schematic Grid Overlay */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(var(--blueprint-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 9999;
}

/* Horizontal Scanning Line (extremely subtle CRT feel) */
.scanline-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.15) 50%
    );
    background-size: 100% 4px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0.4;
}

/* Main Grid Layout Blueprint Ticks */
.tech-blueprint-frame {
    border-left: 1px dashed var(--blueprint-border);
    border-right: 1px dashed var(--blueprint-border);
    position: relative;
}

/* Custom High-Tech Typography overrides */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--tech-title) !important;
}

.mono-label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--tech-accent) !important;
}

/* Rebuilding cards into HUD Blueprint Cards */
.shadow-box {
    background: var(--tech-bg-card) !important;
    border: 1px solid var(--tech-border) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-box-shadow) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.shadow-box::after, .shadow-box::before {
    display: none !important; /* Remove legacy gradients */
}

/* Corner HUD crosshairs for tech vibe */
.shadow-box::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 6px !important;
    height: 6px !important;
    border-top: 1px solid var(--blueprint-border) !important;
    border-left: 1px solid var(--blueprint-border) !important;
    background: none !important;
    opacity: 0.5 !important;
    z-index: 10;
}

.shadow-box-corners::after {
    display: block !important;
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-bottom: 1px solid var(--blueprint-border);
    border-right: 1px solid var(--blueprint-border);
    opacity: 0.5;
    z-index: 10;
}

.shadow-box:hover {
    border-color: var(--tech-border-active) !important;
    box-shadow: 0 0 25px rgba(91, 120, 246, 0.12) !important;
    transform: translateY(-2px);
}

/* Blinking Status Dot */
.status-blip {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--tech-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--tech-green);
    vertical-align: middle;
    margin-right: 6px;
    animation: blip-pulse 1.8s infinite alternate;
}

.status-blip.amber {
    background-color: var(--tech-orange);
    box-shadow: 0 0 8px var(--tech-orange);
}

.status-blip.cyan {
    background-color: var(--tech-cyan);
    box-shadow: 0 0 8px var(--tech-cyan);
}

@keyframes blip-pulse {
    0% { opacity: 0.3; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.1); }
}

/* Navbar redone for tech vibes */
.header-area {
    border-bottom: 1px solid var(--tech-border);
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    margin-top: 0 !important;
    padding: 10px 0;
}

.header-area .navbar .menu li a {
    font-family: var(--font-mono);
    font-size: 13px !important;
    letter-spacing: -0.2px;
    text-transform: lowercase;
    color: var(--tech-text-muted) !important;
}

.header-area .navbar .menu li a::before {
    content: '[0' attr(data-index) '] ';
    color: var(--tech-text-muted);
    opacity: 0.6;
    margin-right: 4px;
}

.header-area .navbar .menu li.active a,
.header-area .navbar .menu li a:hover {
    color: var(--tech-title) !important;
}

.header-area .show-menu span {
    background: var(--tech-title) !important;
}

.new-project-indicator {
    background: var(--tech-cyan) !important;
    box-shadow: 0 0 6px var(--tech-cyan) !important;
}

/* Tech Stats and telemetry inside cards */
.tech-telemetry-panel {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tech-text-muted);
    background: var(--telemetry-bg) !important;
    border: 1px solid var(--tech-border);
    border-radius: 8px;
    padding: 12px;
    margin-top: 15px;
}

.telemetry-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed var(--tech-border);
}

.telemetry-row:last-child {
    border-bottom: none;
}

.telemetry-val {
    color: var(--tech-title);
    font-weight: 500;
}

/* System Terminal feed style */
.terminal-window {
    background: var(--terminal-bg);
    border: 1px solid var(--tech-border);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 15px;
    height: 180px;
    overflow-y: auto;
    color: var(--terminal-text);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.terminal-header {
    border-bottom: 1px solid var(--tech-border);
    margin-bottom: 10px;
    padding-bottom: 5px;
    color: var(--terminal-header-text);
    display: flex;
    justify-content: space-between;
    font-size: 10px;
}

.terminal-line {
    line-height: 1.5;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.terminal-line .timestamp {
    color: var(--tech-text-muted);
    margin-right: 8px;
}

/* Button overrides */
.about-btn, .project-btn {
    border: 1px solid var(--tech-border) !important;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: var(--btn-bg) !important;
}

.about-btn img, .project-btn img {
    filter: var(--btn-img-filter) !important;
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.shadow-box:hover .about-btn, .project-item:hover .project-btn {
    border-color: var(--tech-accent) !important;
    background: var(--tech-accent) !important;
    box-shadow: 0 0 12px var(--tech-accent);
}

.shadow-box:hover .about-btn img, .project-item:hover .project-btn img {
    filter: brightness(0) invert(1) !important;
    transform: rotate(45deg);
}

/* custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--tech-accent);
}

/* Preloader custom styling overrides */
.pre-loader {
    background-color: var(--preloader-bg) !important;
}
.loading-bar {
    background-color: var(--preloader-bar-bg) !important;
}
.loading-bar::after {
    background-color: var(--tech-accent) !important;
}

/* Logo filtering */
.logo img, .preloader-image img {
    filter: var(--logo-filter);
}

/* Custom Interactive Theme Toggle Button styling */
.theme-toggle-btn {
    background: var(--btn-bg);
    border: 1px solid var(--tech-border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tech-title);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    padding: 0;
}

.theme-toggle-btn:hover {
    border-color: var(--tech-border-active);
    box-shadow: 0 0 15px rgba(91, 120, 246, 0.15);
    transform: rotate(45deg);
}

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

/* Cursor dynamic styling */
.cursor {
    background-color: var(--tech-title) !important;
    mix-blend-mode: var(--cursor-blend) !important;
}

/* Specific page element light overrides */
.escaped li {
    color: var(--tech-title) !important;
}

.ext-links h2 {
    color: var(--tech-title) !important;
}

.about-area .about-edc-exp h3,
.about-area .about-edc-exp ul li h2 {
    color: var(--tech-title) !important;
}

.about-area .about-edc-exp ul li .date,
.about-area .about-edc-exp ul li .type {
    color: var(--tech-text-muted) !important;
}

.portfolio .filtering .filter {
    border-color: var(--tech-border) !important;
    background: var(--tech-bg-card) !important;
}

.portfolio .filtering span {
    color: var(--tech-text-muted) !important;
}

.portfolio .filtering span.active,
.portfolio .filtering span:hover {
    color: var(--tech-title) !important;
}

.call-action-center h2 span.up-text {
    color: var(--tech-title) !important;
}

/* Custom layout helper to keep navbar neat */
.header-right-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
@media screen and (max-width: 768px) {
    .header-area .header-right-actions .theme-btn {
        display: none !important;
    }
}

/* Light theme text and icon overrides */
.credential-area .credential-content .credential-about p,
.credential-area .credential-edc-exp .credential-edc-exp-item p,
.about-area .about-details .about-details-inner p,
.about-area .about-me-box .infos p {
    color: var(--tech-text) !important;
    opacity: 1 !important;
}

.credential-area .credential-edc-exp .credential-edc-exp-item h4,
.credential-area .credential-edc-exp .credential-edc-exp-item h5 {
    color: var(--tech-text-muted) !important;
    opacity: 1 !important;
}

/* Contact page profile icons color and circles */
.info-box .inner-profile-icons a {
    color: var(--tech-title) !important;
    border-color: var(--tech-border) !important;
    background: transparent !important;
}

.info-box .inner-profile-icons a::before {
    background: var(--shadow-box-before) !important;
}

.telemetry-key {
    color: var(--tech-text) !important;
}

.info-box .infos h4 {
    color: var(--tech-text-muted) !important;
    opacity: 1 !important;
}

/* View Transition Theme Toggle Customization */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2147483647;
}

/* Fallback/No-transitions class helper to prevent standard CSS transitions during snapshots */
.no-transitions,
.no-transitions * {
    transition: none !important;
}