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

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Prevent transitions during theme initialization */
html:not(.theme-transitions-enabled) *,
html:not(.theme-transitions-enabled) *::before,
html:not(.theme-transitions-enabled) *::after {
    transition: none !important;
}

/* Ensure smooth transitions after theme is loaded */
html.theme-transitions-enabled {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.theme-transitions-enabled body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode as default */
html {
    color-scheme: dark;
}

html.light {
    color-scheme: light;
}

/* Ensure proper theme inheritance */
body {
    transition: none;
}

html.theme-transitions-enabled body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom color variables */
:root {
    /* Light theme colors */
    --light-bg: #ffffff;
    --light-card: #f8fafc;
    --light-text: #1e293b;
    --light-muted: #64748b;
    --light-border: #e2e8f0;
    --light-accent: #3b82f6;
    --light-accent-hover: #2563eb;
    
    /* Dark theme colors */
    --dark-bg: #0f172a;
    --dark-card: #1e293b;
    --dark-text: #f1f5f9;
    --dark-muted: #94a3b8;
    --dark-border: #334155;
    --dark-accent: #60a5fa;
    --dark-accent-hover: #3b82f6;
    
    /* Semantic colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
}

/* Smooth transitions for theme switching - only enabled after page load */
.theme-transitions-enabled * {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent transitions during initial load */
*:not(.theme-transitions-enabled *) {
    transition: none !important;
}

/* Focus styles */
button:focus,
a:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* Ensure header is sticky on all pages */
#site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
}