/* Theme Configuration - Light Mode (Default) */
:root {
    --color-primary: #6B21A8;
    --color-primary-hover: #581C87;
    --color-background: #FFFFFF;
    --color-background-alt: #F9FAFB;
    --color-text: #111827;
    --color-text-muted: #4B5563;
    --color-border: #E5E7EB;
}

/* Dark Mode Colors - Match Tailwind's html.dark selector */
html.dark {
    --color-primary: #7C3AED;
    --color-primary-hover: #6D28D9;
    --color-background: #111827;
    --color-background-alt: #1F2937;
    --color-text: #F9FAFB;
    --color-text-muted: #9CA3AF;
    --color-border: #374151;
}

/* Global Styles */
:root {
    color-scheme: light dark;
}

html {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Body styles are now handled by Tailwind classes */

/* Navigation Styles */
.nav-btn {
    background-color: transparent;
    color: var(--color-text-muted);
    transition: all 0.2s;
}

.nav-btn:hover {
    background-color: var(--color-background);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-btn.active {
    background-color: var(--color-primary);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-btn.active .nav-icon {
    color: white;
}

/* Theme Toggle Button - No Active State */
.theme-toggle-btn {
    background-color: transparent;
    color: var(--color-text-muted);
    transition: all 0.2s;
}

.theme-toggle-btn:hover {
    background-color: var(--color-background);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Button Styles */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    transition: all 0.3s;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--color-border);
    color: var(--color-text);
    transition: all 0.3s;
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: scale(1.05);
}

/* Form Elements */
input, textarea {
    background-color: var(--color-background);
    border: 2px solid var(--color-border);
    color: var(--color-text);
    transition: all 0.3s;
}

input:focus, textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* Card Styles */
.card {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    transition: all 0.3s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Animation Keyframes */
@keyframes fadeInUp {
    0% { 
        opacity: 0;
        transform: translateY(30px);
    }
    100% { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUpDelay {
    0% { 
        opacity: 0;
        transform: translateY(30px);
    }
    100% { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float1 {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
    }
    50% { 
        transform: translateY(-20px) rotate(180deg);
    }
}

@keyframes float2 {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
    }
    50% { 
        transform: translateY(-30px) rotate(-180deg);
    }
}

@keyframes float3 {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
    }
    50% { 
        transform: translateY(-15px) rotate(90deg);
    }
}

@keyframes typewriter {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes blink {
    0%, 50% { border-color: transparent; }
    51%, 100% { border-color: currentColor; }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes ripple {
    to { 
        transform: scale(4);
        opacity: 0;
    }
}

/* Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-up-delay {
    animation: fadeInUpDelay 0.8s ease-out 0.2s forwards;
}

.animate-float-1 {
    animation: float1 6s ease-in-out infinite;
}

.animate-float-2 {
    animation: float2 8s ease-in-out infinite;
}

.animate-float-3 {
    animation: float3 7s ease-in-out infinite;
}

.animate-typewriter {
    animation: typewriter 3s steps(20, end), blink 0.75s step-end infinite;
}

.animate-gradient-shift {
    animation: gradientShift 15s ease infinite;
}

.animate-ripple {
    animation: ripple 0.6s linear;
}

/* Mobile Font Size Adjustments */
/* Only affects screens smaller than 1024px (mobile and tablet) */
@media (max-width: 1023px) {
    /* Project titles - reduce from 48px to 36px on mobile */
    h1[style*="font-size: 48px"] {
        font-size: 36px !important;
    }
    
    /* Section headings - reduce from 32px to 24px on mobile */
    h2[style*="font-size: 32px"] {
        font-size: 24px !important;
    }
    
    /* Body text - reduce from 18px to 16px on mobile */
    p[style*="font-size: 18px"] {
        font-size: 16px !important;
    }
    
    /* Caption text - reduce from 16px to 14px on mobile */
    p[style*="font-size: 16px"] {
        font-size: 14px !important;
    }
    
    /* Card titles - reduce from 16px to 14px on mobile */
    h3[style*="font-size: 16px"] {
        font-size: 14px !important;
    }
    
    /* Metadata text - reduce from 12px to 11px on mobile */
    div[style*="font-size: 12px"] {
        font-size: 11px !important;
    }
}

/* Extra small mobile screens (below 480px) */
@media (max-width: 479px) {
    /* Further reduce project titles for very small screens */
    h1[style*="font-size: 48px"] {
        font-size: 28px !important;
    }
    
    /* Further reduce section headings */
    h2[style*="font-size: 32px"] {
        font-size: 20px !important;
    }
    
    /* Further reduce body text */
    p[style*="font-size: 18px"] {
        font-size: 14px !important;
    }
    
    /* Further reduce caption text */
    p[style*="font-size: 16px"] {
        font-size: 12px !important;
    }
}

/* Mobile Navigation Spacing Fix */
/* Add extra top padding for main content on mobile to prevent overlap with fixed nav */
@media (max-width: 1023px) {
    /* Add extra top padding to main content sections on mobile */
    main section:first-child {
        padding-top: 120px !important; /* Increased from py-20 (80px) to 120px */
    }
    
    /* Ensure about section has proper spacing */
    #about {
        padding-top: 120px !important;
    }
    
    /* Add extra spacing for work section if it exists */
    #work {
        padding-top: 120px !important;
    }
    
    /* Add extra spacing for home section if it exists */
    #home {
        padding-top: 120px !important;
    }
}

/* Comprehensive Mobile Spacing Adjustments */
@media (max-width: 1023px) {
    /* Reduce large margins and padding for mobile */
    .mb-16 {
        margin-bottom: 2rem !important; /* Reduced from 4rem to 2rem */
    }
    
    .mb-12 {
        margin-bottom: 1.5rem !important; /* Reduced from 3rem to 1.5rem */
    }
    
    .mb-8 {
        margin-bottom: 1rem !important; /* Reduced from 2rem to 1rem */
    }
    
    .mb-6 {
        margin-bottom: 0.75rem !important; /* Reduced from 1.5rem to 0.75rem */
    }
    
    .mb-4 {
        margin-bottom: 0.5rem !important; /* Reduced from 1rem to 0.5rem */
    }
    
    /* Reduce large padding for mobile */
    .py-20 {
        padding-top: 3rem !important; /* Reduced from 5rem to 3rem */
        padding-bottom: 3rem !important;
    }
    
    .py-16 {
        padding-top: 2rem !important; /* Reduced from 4rem to 2rem */
        padding-bottom: 2rem !important;
    }
    
    .py-12 {
        padding-top: 1.5rem !important; /* Reduced from 3rem to 1.5rem */
        padding-bottom: 1.5rem !important;
    }
    
    .py-8 {
        padding-top: 1rem !important; /* Reduced from 2rem to 1rem */
        padding-bottom: 1rem !important;
    }
    
    /* Reduce horizontal padding for mobile */
    .px-6 {
        padding-left: 1rem !important; /* Reduced from 1.5rem to 1rem */
        padding-right: 1rem !important;
    }
    
    .px-8 {
        padding-left: 1rem !important; /* Reduced from 2rem to 1rem */
        padding-right: 1rem !important;
    }
    
    /* Reduce gaps in flex layouts */
    .gap-8 {
        gap: 1rem !important; /* Reduced from 2rem to 1rem */
    }
    
    .gap-6 {
        gap: 0.75rem !important; /* Reduced from 1.5rem to 0.75rem */
    }
    
    .gap-4 {
        gap: 0.5rem !important; /* Reduced from 1rem to 0.5rem */
    }
    
    /* Reduce space between elements */
    .space-y-8 > * + * {
        margin-top: 1rem !important; /* Reduced from 2rem to 1rem */
    }
    
    .space-y-6 > * + * {
        margin-top: 0.75rem !important; /* Reduced from 1.5rem to 0.75rem */
    }
    
    .space-y-4 > * + * {
        margin-top: 0.5rem !important; /* Reduced from 1rem to 0.5rem */
    }
    
    .space-x-6 > * + * {
        margin-left: 0.75rem !important; /* Reduced from 1.5rem to 0.75rem */
    }
    
    .space-x-4 > * + * {
        margin-left: 0.5rem !important; /* Reduced from 1rem to 0.5rem */
    }
    
    /* Adjust specific component spacing */
    .max-w-3xl {
        max-width: 100% !important; /* Use full width on mobile */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .max-w-4xl {
        max-width: 100% !important; /* Use full width on mobile */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Reduce card spacing */
    .card {
        margin-bottom: 1rem !important; /* Reduced card spacing */
    }
    
    /* Adjust hero section spacing */
    .hero-content {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .hero-text {
        margin-bottom: 1.5rem !important; /* Reduced from larger spacing */
    }
    
    /* Adjust grid and flex layouts for mobile */
    .grid-cols-3 {
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: 1rem !important;
    }
    
    .grid-cols-2 {
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: 1rem !important;
    }
    
    /* Adjust related projects spacing */
    .related-projects {
        margin-top: 2rem !important; /* Reduced spacing */
    }
    
    .project-card {
        margin-bottom: 1rem !important; /* Reduced card spacing */
        padding: 1rem !important; /* Reduced internal padding */
    }
}

/* Extra small mobile screens (below 480px) */
@media (max-width: 479px) {
    /* Further reduce spacing for very small screens */
    .mb-16 {
        margin-bottom: 1.5rem !important; /* Further reduced */
    }
    
    .mb-12 {
        margin-bottom: 1rem !important; /* Further reduced */
    }
    
    .py-20 {
        padding-top: 2rem !important; /* Further reduced */
        padding-bottom: 2rem !important;
    }
    
    .py-16 {
        padding-top: 1.5rem !important; /* Further reduced */
        padding-bottom: 1.5rem !important;
    }
    
    .px-6 {
        padding-left: 0.75rem !important; /* Further reduced */
        padding-right: 0.75rem !important;
    }
    
    .gap-4 {
        gap: 0.25rem !important; /* Further reduced */
    }
    
    .space-y-4 > * + * {
        margin-top: 0.25rem !important; /* Further reduced */
    }
    
    .space-x-4 > * + * {
        margin-left: 0.25rem !important; /* Further reduced */
    }
}