/* ==========================================================================
   RUPAK BISWAS PORTFOLIO - COLOR PALETTE SYSTEM (LIGHT & DARK MODE)
   Based on ux-designer-portfolio-color-palette.md
   - Minimal, Premium, Editorial Product-Design aesthetic
   - Warm-neutral foundation
   - Electric Violet (#6D4AFF in Light, #8B75FF in Dark) as brand accent
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT / DARK MODE VARIABLES (Default Dark Foundation)
   Token: Deep Charcoal (#0D0D0F), Surface Dark Gray (#151518), Border (#2A2A31)
   -------------------------------------------------------------------------- */
:root, html.dark {
    --bg-main: #0D0D0F;
    --surface-main: #151518;
    --surface-elevated: #1C1C21;
    --surface-alt: #222228;
    --text-primary: #F5F5F5;
    --text-secondary: #B8B8BE;
    --text-muted: #85858E;
    --border-color: #2A2A31;
    --primary-brand: #8B75FF;
    --primary-hover: #A394FF;
    --primary-soft: #211A3D;
    --success-color: #4ADE80;
    --warning-color: #FBBF24;
    --error-color: #F87171;

    /* Legacy mapping helpers */
    --bg-dark: var(--bg-main);
    --card-glass-bg: rgba(21, 21, 24, 0.7);
    --card-glass-border: rgba(42, 42, 49, 0.8);
    --card-glass-hover-border: rgba(139, 117, 255, 0.5);
    --neon-cyan: var(--primary-brand);
}

/* --------------------------------------------------------------------------
   2. LIGHT MODE VARIABLES
   Token: Soft White (#FAFAF9), Surface White (#FFFFFF), Surface Alt (#F4F4F2)
   Border (#E5E5E5), Primary Electric Violet (#6D4AFF)
   -------------------------------------------------------------------------- */
html.light {
    --bg-main: #FAFAF9;
    --surface-main: #FFFFFF;
    --surface-elevated: #FFFFFF;
    --surface-alt: #F4F4F2;
    --text-primary: #171717;
    --text-secondary: #525252;
    --text-muted: #737373;
    --border-color: #E5E5E5;
    --primary-brand: #6D4AFF;
    --primary-hover: #5935E8;
    --primary-soft: #EEE9FF;
    --success-color: #16A34A;
    --warning-color: #D97706;
    --error-color: #DC2626;

    /* Legacy mapping helpers */
    --bg-dark: var(--bg-main);
    --card-glass-bg: rgba(255, 255, 255, 0.9);
    --card-glass-border: #E5E5E5;
    --card-glass-hover-border: rgba(109, 74, 255, 0.5);
    --neon-cyan: var(--primary-brand);
}

/* Base Body Styles */
body {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* --------------------------------------------------------------------------
   3. LIGHT MODE SPECIFIC OVERRIDES FOR PORTFOLIO CHROME
   -------------------------------------------------------------------------- */
html.light body {
    background-color: #FAFAF9 !important;
    color: #171717 !important;
}

/* Header & Panels */
html.light .glass-panel, html.light header.glass-panel, html.light nav.glass-panel {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px);
    border-color: #E5E5E5 !important;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05) !important;
}

/* Cards & Bento Grid */
html.light .glass-card, html.light .project-card {
    background: #FFFFFF !important;
    border-color: #E5E5E5 !important;
    box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.04) !important;
}

html.light .glass-card:hover, html.light .project-card:hover {
    background: #FFFFFF !important;
    border-color: rgba(109, 74, 255, 0.4) !important;
    box-shadow: 0 16px 32px -8px rgba(109, 74, 255, 0.12) !important;
}

/* Filter Chips & Interactive Badges */
html.light .glass-chip, html.light .chip-btn {
    background: #F4F4F2 !important;
    border-color: #E5E5E5 !important;
    color: #525252 !important;
}

html.light .glass-chip:hover, html.light .glass-chip.active, html.light .chip-btn:hover {
    background: #EEE9FF !important;
    border-color: #6D4AFF !important;
    color: #5935E8 !important;
}

/* Typography Hierarchy */
html.light .text-white {
    color: #171717 !important;
}

html.light .text-gray-200 {
    color: #262626 !important;
}

html.light .text-gray-300 {
    color: #525252 !important;
}

html.light .text-gray-400 {
    color: #737373 !important;
}

html.light .text-gray-500 {
    color: #8C8C8C !important;
}

/* Borders & Dividers */
html.light .border-white\/10, 
html.light .border-white\/15, 
html.light .border-white\/20, 
html.light .border-white\/5 {
    border-color: #E5E5E5 !important;
}

html.light .bg-white\/5, html.light .bg-white\/10 {
    background-color: #F4F4F2 !important;
}

/* Terminal & Chat Backgrounds in Light Mode */
html.light #chat-messages {
    background: #FAFAF9 !important;
    color: #171717 !important;
}

html.light .bg-black\/70, 
html.light .bg-black\/50, 
html.light .bg-black\/60, 
html.light .bg-black\/40, 
html.light .bg-black\/30 {
    background-color: #F4F4F2 !important;
}

/* Electric Violet Accents & Gradients */
html.light .text-brand-cyan, 
html.light .text-brand-accent {
    color: #6D4AFF !important;
}

html.light .bg-brand-cyan {
    background-color: #6D4AFF !important;
    color: #FFFFFF !important;
}

html.light .bg-brand-cyan\/10 {
    background-color: #EEE9FF !important;
}

html.light .bg-brand-cyan\/20 {
    background-color: #EEE9FF !important;
    color: #5935E8 !important;
}

html.light .border-brand-cyan, 
html.light .border-brand-cyan\/20, 
html.light .border-brand-cyan\/30, 
html.light .border-brand-cyan\/40 {
    border-color: rgba(109, 74, 255, 0.3) !important;
}

/* Editorial Solid Accent - Strictly No Gradients */
.text-gradient,
html.light .text-gradient {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #6D4AFF !important;
    color: #6D4AFF !important;
}

html.dark .text-gradient {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #8B75FF !important;
    color: #8B75FF !important;
}

/* Modals & Popovers */
html.light #gemini-modal > div, 
html.light #guide-popover, 
html.light #case-modal > div {
    background-color: #FFFFFF !important;
    border-color: #E5E5E5 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12) !important;
}

/* Custom Interactive Cursor Colors */
html.light #cursor-dot {
    background-color: #6D4AFF !important;
    box-shadow: 0 0 10px rgba(109, 74, 255, 0.4) !important;
}

html.light #cursor-glow {
    border-color: rgba(109, 74, 255, 0.4) !important;
    background: rgba(109, 74, 255, 0.05) !important;
}

/* Scrollbar */
html.light ::-webkit-scrollbar-track {
    background: #FAFAF9 !important;
}

html.light ::-webkit-scrollbar-thumb {
    background: #E5E5E5 !important;
}

html.light ::-webkit-scrollbar-thumb:hover {
    background: #6D4AFF !important;
}

/* --------------------------------------------------------------------------
   4. DARK MODE SPECIFIC OVERRIDES (Deep Charcoal & Bright Violet)
   -------------------------------------------------------------------------- */
html.dark body {
    background-color: #0D0D0F !important;
    color: #F5F5F5 !important;
}

html.dark .glass-panel, html.dark header.glass-panel, html.dark nav.glass-panel {
    background: rgba(21, 21, 24, 0.85) !important;
    border-color: #2A2A31 !important;
}

html.dark .glass-card, html.dark .project-card {
    background: #151518 !important;
    border-color: #2A2A31 !important;
}

html.dark .glass-card:hover, html.dark .project-card:hover {
    background: #1C1C21 !important;
    border-color: rgba(139, 117, 255, 0.4) !important;
    box-shadow: 0 16px 32px -8px rgba(139, 117, 255, 0.15) !important;
}

html.dark .glass-chip, html.dark .chip-btn {
    background: #222228 !important;
    border-color: #2A2A31 !important;
    color: #B8B8BE !important;
}

html.dark .glass-chip:hover, html.dark .glass-chip.active, html.dark .chip-btn:hover {
    background: #211A3D !important;
    border-color: #8B75FF !important;
    color: #A394FF !important;
}

html.dark .text-brand-cyan, 
html.dark .text-brand-accent {
    color: #8B75FF !important;
}

html.dark .bg-brand-cyan {
    background-color: #8B75FF !important;
    color: #FFFFFF !important;
}

html.dark .bg-brand-cyan\/10 {
    background-color: #211A3D !important;
}

html.dark .border-brand-cyan, 
html.dark .border-brand-cyan\/20, 
html.dark .border-brand-cyan\/30 {
    border-color: rgba(139, 117, 255, 0.35) !important;
}

html.dark #gemini-modal > div, 
html.dark #guide-popover, 
html.dark #case-modal > div {
    background-color: #151518 !important;
    border-color: #2A2A31 !important;
}

html.dark #cursor-dot {
    background-color: #8B75FF !important;
    box-shadow: 0 0 10px rgba(139, 117, 255, 0.6) !important;
}

html.dark #cursor-glow {
    border-color: rgba(139, 117, 255, 0.45) !important;
    background: rgba(139, 117, 255, 0.08) !important;
}

/* --------------------------------------------------------------------------
   5. THEME-ADAPTIVE AVATAR & CONCIERGE GUIDE STYLES (Strictly No Gradients)
   -------------------------------------------------------------------------- */

/* Base Transitions */
.guide-avatar-frame,
.guide-avatar-status-dot,
#guide-badge-hint,
#guide-popover,
.guide-route-link,
.guide-headshot-frame,
.profile-avatar-frame {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* --- LIGHT MODE AVATAR & CONCIERGE --- */
html.light .guide-avatar-frame {
    background-color: #FFFFFF !important;
    border-color: #E5E5E5 !important;
    box-shadow: 0 12px 28px -6px rgba(109, 74, 255, 0.18), 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

html.light .guide-avatar-frame:hover {
    border-color: #6D4AFF !important;
    box-shadow: 0 16px 36px -6px rgba(109, 74, 255, 0.3) !important;
}

html.light .guide-avatar-status-dot {
    border-color: #FFFFFF !important;
    background-color: #16A34A !important;
}

html.light .pulse-ring {
    background-color: rgba(109, 74, 255, 0.15) !important;
}

html.light #guide-badge-hint {
    background-color: #FFFFFF !important;
    border-color: #E5E5E5 !important;
    color: #171717 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
}

html.light #guide-badge-hint span {
    color: #171717 !important;
}

html.light #guide-popover {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border-color: #E5E5E5 !important;
    color: #171717 !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html.light .guide-divider {
    border-color: #E5E5E5 !important;
}

html.light .guide-headshot-frame {
    background-color: #F4F4F2 !important;
    border-color: #E5E5E5 !important;
}

html.light .guide-title {
    color: #171717 !important;
}

html.light .guide-subtitle {
    color: #6D4AFF !important;
}

html.light .guide-close-btn {
    color: #737373 !important;
    background-color: transparent !important;
}
html.light .guide-close-btn:hover {
    color: #171717 !important;
    background-color: #F4F4F2 !important;
}

html.light .guide-bubble-box {
    background-color: #F4F4F2 !important;
    border-color: #E5E5E5 !important;
}

html.light #guide-speech-bubble {
    color: #525252 !important;
}
html.light #guide-speech-bubble strong {
    color: #171717 !important;
}

html.light .guide-section-label {
    color: #737373 !important;
}

html.light .guide-route-link {
    background-color: #FAFAF9 !important;
    border-color: #E5E5E5 !important;
    color: #171717 !important;
}
html.light .guide-route-link:hover {
    background-color: #EEE9FF !important;
    border-color: #6D4AFF !important;
    color: #5935E8 !important;
}
html.light .guide-route-link .guide-route-metric {
    color: #737373 !important;
}

html.light .guide-btn-primary {
    background-color: #EEE9FF !important;
    border-color: #6D4AFF !important;
    color: #5935E8 !important;
}
html.light .guide-btn-primary:hover {
    background-color: #6D4AFF !important;
    color: #FFFFFF !important;
}

html.light .guide-btn-secondary {
    background-color: #F4F4F2 !important;
    border-color: #E5E5E5 !important;
    color: #525252 !important;
}
html.light .guide-btn-secondary:hover {
    background-color: #E5E5E5 !important;
    color: #171717 !important;
}

/* Light Mode Walkthrough Elements */
html.light .guide-screen-tag {
    color: #6D4AFF !important;
}
html.light .guide-screen-title {
    color: #171717 !important;
}
html.light .guide-screen-role {
    color: #737373 !important;
}
html.light .guide-screen-breakdown {
    color: #525252 !important;
}
html.light .guide-screen-count {
    color: #737373 !important;
}

/* Light Mode Profile Avatar */
html.light .profile-avatar-frame {
    background-color: #F4F4F2 !important;
    border-color: #E5E5E5 !important;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.06) !important;
}


/* --- DARK MODE AVATAR & CONCIERGE --- */
html.dark .guide-avatar-frame {
    background-color: #151518 !important;
    border-color: #2A2A31 !important;
    box-shadow: 0 12px 30px -8px rgba(139, 117, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html.dark .guide-avatar-frame:hover {
    border-color: #8B75FF !important;
    box-shadow: 0 16px 36px -6px rgba(139, 117, 255, 0.4) !important;
}

html.dark .guide-avatar-status-dot {
    border-color: #151518 !important;
    background-color: #4ADE80 !important;
}

html.dark .pulse-ring {
    background-color: rgba(139, 117, 255, 0.25) !important;
}

html.dark #guide-badge-hint {
    background-color: #151518 !important;
    border-color: #2A2A31 !important;
    color: #F5F5F5 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

html.dark #guide-badge-hint span {
    color: #F5F5F5 !important;
}

html.dark #guide-popover {
    background: #151518 !important;
    background-color: #151518 !important;
    border-color: #2A2A31 !important;
    color: #F5F5F5 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

html.dark .guide-divider {
    border-color: #2A2A31 !important;
}

html.dark .guide-headshot-frame {
    background-color: #1C1C21 !important;
    border-color: #2A2A31 !important;
}

html.dark .guide-title {
    color: #F5F5F5 !important;
}

html.dark .guide-subtitle {
    color: #8B75FF !important;
}

html.dark .guide-close-btn {
    color: #85858E !important;
    background-color: transparent !important;
}
html.dark .guide-close-btn:hover {
    color: #FFFFFF !important;
    background-color: #222228 !important;
}

html.dark .guide-bubble-box {
    background-color: #1C1C21 !important;
    border-color: #2A2A31 !important;
}

html.dark #guide-speech-bubble {
    color: #B8B8BE !important;
}
html.dark #guide-speech-bubble strong {
    color: #F5F5F5 !important;
}

html.dark .guide-section-label {
    color: #85858E !important;
}

html.dark .guide-route-link {
    background-color: #1C1C21 !important;
    border-color: #2A2A31 !important;
    color: #F5F5F5 !important;
}
html.dark .guide-route-link:hover {
    background-color: #211A3D !important;
    border-color: #8B75FF !important;
    color: #A394FF !important;
}
html.dark .guide-route-link .guide-route-metric {
    color: #85858E !important;
}

html.dark .guide-btn-primary {
    background-color: #211A3D !important;
    border-color: #8B75FF !important;
    color: #A394FF !important;
}
html.dark .guide-btn-primary:hover {
    background-color: #8B75FF !important;
    color: #FFFFFF !important;
}

html.dark .guide-btn-secondary {
    background-color: #222228 !important;
    border-color: #2A2A31 !important;
    color: #B8B8BE !important;
}
html.dark .guide-btn-secondary:hover {
    background-color: #2A2A31 !important;
    color: #FFFFFF !important;
}

/* Dark Mode Walkthrough Elements */
html.dark .guide-screen-tag {
    color: #8B75FF !important;
}
html.dark .guide-screen-title {
    color: #F5F5F5 !important;
}
html.dark .guide-screen-role {
    color: #85858E !important;
}
html.dark .guide-screen-breakdown {
    color: #B8B8BE !important;
}
html.dark .guide-screen-count {
    color: #85858E !important;
}

/* Dark Mode Profile Avatar */
html.dark .profile-avatar-frame {
    background-color: #1C1C21 !important;
    border-color: #2A2A31 !important;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.4) !important;
}

/* Micro animations */
.avatar-float {
    animation: avatarFloat 4.5s ease-in-out infinite;
}

@keyframes avatarFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-7px); }
}

.pulse-ring {
    animation: pulseRing 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulseRing {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 0.2; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* --------------------------------------------------------------------------
   6. GLOBAL CTA HOVER COLOR SYSTEM
   Rule: On CTA hover, if CTA has dark colour then use white colour for CTA text.
   -------------------------------------------------------------------------- */

/* Default white text for solid brand buttons */
.bg-brand-cyan,
.bg-brand-cyan *,
html.light .bg-brand-cyan,
html.light .bg-brand-cyan *,
html.dark .bg-brand-cyan,
html.dark .bg-brand-cyan * {
    color: #FFFFFF !important;
}

/* CTA buttons & links on hover with dark / brand background */
.bg-brand-cyan:hover,
.bg-brand-cyan:hover *,
html.light .bg-brand-cyan:hover,
html.light .bg-brand-cyan:hover *,
html.dark .bg-brand-cyan:hover,
html.dark .bg-brand-cyan:hover *,
a.hover\:bg-brand-cyan:hover,
a.hover\:bg-brand-cyan:hover *,
button.hover\:bg-brand-cyan:hover,
button.hover\:bg-brand-cyan:hover *,
[class*="hover:bg-brand-cyan"]:hover,
[class*="hover:bg-brand-cyan"]:hover * {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: none;
}

/* Floating & In-page Guide CTAs */
.guide-btn-primary:hover,
.guide-btn-primary:hover *,
html.light .guide-btn-primary:hover,
html.light .guide-btn-primary:hover *,
html.dark .guide-btn-primary:hover,
html.dark .guide-btn-primary:hover * {
    color: #FFFFFF !important;
}

html.dark .guide-btn-secondary:hover,
html.dark .guide-btn-secondary:hover *,
html.dark .guide-route-link:hover,
html.dark .guide-route-link:hover * {
    color: #FFFFFF !important;
}

/* Header, Hero, and Footer Action CTAs on hover */
a[href^="mailto:"]:hover,
a[href^="mailto:"]:hover *,
a[href*="Resume"]:hover,
a[href*="Resume"]:hover *,
#chat-send-btn:hover,
#chat-send-btn:hover *,
button[onclick="saveGeminiKey()"]:hover,
button[onclick="saveGeminiKey()"]:hover *,
main a[href*="case-study-"]:hover,
main a[href*="case-study-"]:hover * {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   7. NON-SELECTABLE SECTION TEXT & DESIGN ASSET PROTECTION
   - Makes all section content, headers, cards, and UI text non-selectable
   - Prevents drag-and-drop asset extraction
   - Blocks print-based DOM scraping
   -------------------------------------------------------------------------- */
html, body, section, header, nav, main, footer, article, aside,
h1, h2, h3, h4, h5, h6, p, span, div, a, button, label, ul, li {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* Allow text selection exclusively in input and textarea fields for interactive chat */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Image protection: stop dragging and canvas cloning */
img, picture, svg {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    pointer-events: auto;
}

/* Defense against print-to-canvas headless scrapers */
@media print {
    html, body {
        display: none !important;
        visibility: hidden !important;
    }
}

/* --------------------------------------------------------------------------
   8. COMPREHENSIVE CROSS-DEVICE RESPONSIVE SYSTEM
   - Full compatibility across Mobile (320px - 480px), Tablets (768px - 1024px),
     Laptops, Desktops, and 4K Ultra-wide displays
   -------------------------------------------------------------------------- */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* Compact Mobile Screens (iPhone SE 320px to standard smartphones 430px) */
@media (max-width: 640px) {
    /* Prevent horizontal blowouts */
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Fixed Guide Widget mobile adaptation */
    #portfolio-guide-widget {
        bottom: 1rem !important;
        right: 1rem !important;
    }

    #guide-popover {
        width: calc(100vw - 2rem) !important;
        max-width: 360px !important;
        margin-bottom: 0.5rem !important;
        padding: 1rem !important;
    }

    .guide-avatar-frame {
        width: 3.75rem !important;
        height: 3.75rem !important;
    }

    /* Modals & Dialogs mobile adaptation */
    #case-modal > div,
    #gemini-modal > div {
        width: calc(100vw - 2rem) !important;
        max-height: 90vh !important;
        padding: 1.25rem !important;
        margin: 1rem !important;
    }

    /* Navigation header padding */
    header.glass-panel, nav.glass-panel {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Responsive typography scaling */
    h1 {
        font-size: clamp(2rem, 7.5vw, 2.75rem) !important;
        line-height: 1.15 !important;
    }

    h2 {
        font-size: clamp(1.5rem, 5.5vw, 2.25rem) !important;
        line-height: 1.2 !important;
    }

    /* Bottom next case study cards */
    .glass-panel .flex-col.md\:flex-row {
        gap: 1.25rem !important;
    }
}

/* Tablet & iPad Viewports (768px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
    #guide-popover {
        width: 380px !important;
        max-width: calc(100vw - 3rem) !important;
    }

    .grid-cols-12 {
        gap: 1rem !important;
    }
}

/* High-resolution and 4K displays */
@media (min-width: 1920px) {
    .max-w-7xl {
        max-width: 1440px !important;
    }
}