@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Theme variables - defaults for light mode */
:root {
    --bg: #ffffff;
    --text: #0f172a; /* gray-900 */
    --muted: #6b7280; /* gray-500 */
    --card: #ffffff;
    --border: #e5e7eb; /* gray-200 */
    --primary: #4f46e5; /* indigo-600 */
    --primary-contrast: #ffffff;
    --muted-2: #9ca3af;
    --overlay-bg: rgba(79,70,229,0.9);
    --ripple-light: rgba(0,0,0,0.08);
    --ripple-dark: rgba(255,255,255,0.18);
}

/* Dark theme overrides */
.dark {
    --bg: #0b1220; /* near-black */
    --text: #f8fafc; /* brighter white for better contrast */
    --muted: #e2e8f0; /* brighter muted text */
    --card: #0f1724; /* dark card */
    --border: #374151; /* gray-700 */
    --primary: #6366f1; /* indigo-500 */
    --primary-contrast: #ffffff;
    --muted-2: #cbd5e1;
    --overlay-bg: rgba(55,65,81,0.95);
}

/* Base styles with forced inheritance */
* {
    color: inherit;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    background-color: var(--bg);
    color: var(--text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure all text elements use theme variables */
a { 
    color: var(--primary); 
    transition: color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 { 
    color: var(--text); 
    font-weight: 700;
    line-height: 1.2;
}

p, li, span, div { 
    color: var(--muted); 
}

/* Comprehensive color class overrides */
/* Gray scale */
.text-gray-50 { color: var(--bg) !important; }
.text-gray-100 { color: var(--bg) !important; }
.text-gray-200 { color: var(--border) !important; }
.text-gray-300 { color: var(--muted-2) !important; }
.text-gray-400 { color: var(--muted-2) !important; }
.text-gray-500 { color: var(--muted) !important; }
.text-gray-600 { color: var(--muted) !important; }
.text-gray-700 { color: var(--text) !important; }
.text-gray-800 { color: var(--text) !important; }
.text-gray-900 { color: var(--text) !important; }

/* Slate scale */
.text-slate-50 { color: var(--bg) !important; }
.text-slate-100 { color: var(--bg) !important; }
.text-slate-200 { color: var(--border) !important; }
.text-slate-300 { color: var(--muted-2) !important; }
.text-slate-400 { color: var(--muted-2) !important; }
.text-slate-500 { color: var(--muted) !important; }
.text-slate-600 { color: var(--muted) !important; }
.text-slate-700 { color: var(--text) !important; }
.text-slate-800 { color: var(--text) !important; }
.text-slate-900 { color: var(--text) !important; }

/* White text - special handling */
.text-white { 
    color: #ffffff !important; 
}
.dark .text-white {
    color: #ffffff !important;
}

/* Special text-white variants */
.text-white-300 { color: rgba(255,255,255,0.7) !important; }
.text-white-900 { color: #ffffff !important; }

/* Background overrides */
.bg-white { background-color: var(--card) !important; }
.bg-gray-50 { background-color: var(--card) !important; }
.bg-gray-100 { background-color: var(--bg) !important; }
.bg-gray-200 { background-color: var(--border) !important; }
.bg-gray-900 { background-color: #071026 !important; }

.bg-slate-50 { background-color: var(--card) !important; }
.bg-slate-100 { background-color: var(--bg) !important; }
.bg-slate-200 { background-color: var(--border) !important; }

/* Border overrides */
.border-gray-100 { border-color: var(--border) !important; }
.border-gray-200 { border-color: var(--border) !important; }
.border-gray-300 { border-color: var(--border) !important; }
.border-gray-700 { border-color: var(--border) !important; }

.border-slate-100 { border-color: var(--border) !important; }
.border-slate-200 { border-color: var(--border) !important; }
.border-slate-300 { border-color: var(--border) !important; }

/* Special background utilities */
.bg-indigo-50 { background-color: rgba(99,102,241,0.06) !important; }
.bg-indigo-100 { background-color: rgba(99,102,241,0.08) !important; }
.dark .bg-indigo-900 { background-color: rgba(79,70,229,0.12) !important; }

.bg-purple-100 { background-color: rgba(206,147,255,0.06) !important; }
.dark .bg-purple-900 { background-color: rgba(139,92,246,0.08) !important; }

/* Hero background */
.hero-bg {
    background-image: radial-gradient(circle at 25% 50%, rgba(255,255,255,0.05) 0%, rgba(0,0,0,1) 70%);
}

/* Project overlay */
.project-card:hover .project-overlay {
    opacity: 1;
    transform: translateY(0);
}

.project-overlay { 
    background: var(--overlay-bg) !important; 
    color: #ffffff !important; 
}

/* Navigation underline */
.nav-link {
    position: relative;
}
.nav-link:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--primary);
    transition: width 0.3s ease;
}
.nav-link:hover:after {
    width: 100%;
}

/* Skill bars */
.skill-bar {
    position: relative;
    overflow: hidden;
}
.skill-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--primary);
    transition: width 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Timeline connector */
.timeline-item:not(:last-child):after {
    content: '';
    position: absolute;
    left: 24px;
    top: 32px;
    height: calc(100% - 32px);
    width: 2px;
    background-color: var(--border);
}

/* Buttons and interactive elements */
.btn-primary {
    background-color: var(--primary);
    color: var(--primary-contrast);
    border: 1px solid transparent;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 6px 18px rgba(79,70,229,0.12);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.btn-primary:hover {
    transform: translateY(-3px) scale(1.01);
    filter: brightness(0.98);
    box-shadow: 0 10px 30px rgba(79,70,229,0.16);
}
.btn-primary:active { transform: translateY(0) scale(0.995); }
.btn-primary:focus { outline: 3px solid rgba(99,102,241,0.18); outline-offset: 2px; }

.btn-secondary {
    background-color: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.65rem 1rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 160ms ease, transform 160ms ease, color 160ms ease;
}
.btn-secondary:hover { 
    background-color: rgba(0,0,0,0.04); 
    color: var(--primary); 
    transform: translateY(-2px); 
}
.dark .btn-secondary:hover { 
    background-color: rgba(255,255,255,0.04); 
}
.btn-secondary:active { transform: translateY(0); }
.btn-secondary:focus { outline: 3px solid rgba(99,102,241,0.12); outline-offset: 2px; }

/* Icon motion inside buttons */
.btn-primary i, .btn-secondary i { transition: transform 180ms ease; }
.btn-primary:hover i, .btn-secondary:hover i { transform: translateX(6px); }

/* Small accessibility improvement for icon-only or packed icons */
.btn-primary .icon-left { transform: translateX(0); }
.btn-primary .icon-right { transition: transform 180ms ease; }
.btn-primary:hover .icon-right { transform: translateX(6px); }

/* Inputs and form elements */
input, textarea, select {
    background-color: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s ease;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
::placeholder { 
    color: var(--muted); 
    opacity: 0.8; 
}

/* Ripple effect for buttons */
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}
.ripple { background-color: var(--ripple-light); }
.dark .ripple { background-color: var(--ripple-dark); }

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

/* Hover utilities */
.hover\:text-indigo-600:hover { color: var(--primary) !important; }
.hover\:bg-white:hover { background-color: rgba(0,0,0,0.03) !important; }
.dark .hover\:bg-white:hover { background-color: rgba(255,255,255,0.04) !important; }

/* Case study hero specific fixes */
.case-study-hero h1, 
.case-study-hero h2, 
.case-study-hero h3 {
    color: var(--text) !important;
}
.dark .case-study-hero h1,
.dark .case-study-hero h2,
.dark .case-study-hero h3 {
    color: #ffffff !important;
    text-shadow: 0 6px 18px rgba(2,6,23,0.45);
}

/* Border white handling */
.border-white { 
    border-color: rgba(255,255,255,0.12) !important; 
}

/* Card utility */
.card-bg { 
    background-color: var(--card) !important; 
    border-color: var(--border) !important; 
    color: var(--text) !important; 
}

/* Force inheritance for all elements in dark mode */
.dark * {
    color: inherit;
}

/* Additional safety for any missed elements */
.dark h1, 
.dark h2, 
.dark h3, 
.dark h4, 
.dark h5, 
.dark h6 {
    color: #ffffff !important;
}

/* Ensure proper contrast for small text */
.text-sm { 
    color: var(--muted) !important; 
}

/* Debug helper - remove in production */
.debug-dark * {
    outline: 1px solid #ff0000 !important;
}