@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* --- GLOBAL RESETS & BASICS --- */
/* Fix 1: Set background on HTML to match theme immediately */
html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    background-color: #F0EFEA; /* Match bg-cream */
}

html.dark {
    background-color: #18181B; /* Match bg-dark-bg */
}

body { 
    margin: 0;
    padding: 0;
    width: 100%;
    /* Keep transitions for smooth toggling later */
    transition: background-color 0.5s ease, color 0.5s ease; 
}

/* Fix 2: Disable transitions while page is loading */
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

div, section, main, header, footer {
    max-width: 100%;
    box-sizing: border-box;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

p, h1, h2, h3, h4, h5, h6, li, span, a {
    overflow-wrap: break-word;
}

/* --- CUSTOM SCROLLBAR --- */
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 10px; border: 2px solid #F0EFEA; }
.dark ::-webkit-scrollbar-thumb { background: #3F3F46; border: 2px solid #18181B; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- COMPONENT STYLES --- */
.glass-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.glass-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.1); }

/* --- SYNTAX HIGHLIGHTING --- */
.token-func { color: #61afef; } 
.token-str { color: #98c379; }  
.token-kw { color: #c678dd; }   
.token-num { color: #d19a66; } 
.token-comment { color: #7f848e; font-style: italic; }
.token-tag { color: #e06c75; } 
.token-attr { color: #d19a66; } 

/* --- PRINT STYLES --- */
@media print {
    @page { margin: 0; size: letter; }
    html { font-size: 12px !important; }
    body, html {
        background-color: white !important;
        background: white !important;
        color: black !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    nav, button, footer { display: none !important; }
    main { padding: 0 !important; margin: 0 !important; width: 100% !important; }
    .print-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0.5in !important;
        background-color: white !important;
        box-shadow: none !important;
        border: none !important;
        color: black !important;
    }
    * { color: black !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .border-gray-700, .dark\:border-gray-700 { border-color: #e5e7eb !important; }
    a { text-decoration: none; color: black !important; }
}