/* theme.css - Consolidated & Optimized for High Contrast */

/* --- 1. Global Transitions --- */
* { 
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; 
}

/* --- 2. Light Mode Base Overrides --- */
html.light-mode body {
    background-color: #fafaf9 !important; /* Stone-50 */
    color: #292524 !important;            /* Stone-800: Deep gray-black for readability */
}

/* --- 3. Typography & Contrast Logic --- */

/* High-priority text (Titles, Bold highlights, spans) */
html.light-mode .text-white,
html.light-mode .text-stone-100,
html.light-mode .text-stone-200,
html.light-mode .text-stone-300,
html.light-mode font-medium {
    color: #0c0a09 !important;            /* Stone-950: Almost pure black */
    font-weight: 500;
}

/* Standard Body/Intro text */
html.light-mode .text-stone-400 {
    color: #292524 !important;            /* Stone-800: Much darker than default */
}

/* Secondary/Muted text (Dates, footers) */
html.light-mode .text-stone-500 {
    color: #57534e !important;            /* Stone-600 */
}

/* --- 4. Navigation & Interactive Elements --- */
html.light-mode nav a,
html.light-mode #menu-btn,
html.light-mode #theme-toggle {
    color: #44403c !important;            /* Stone-700 */
}

html.light-mode nav a:hover,
html.light-mode #menu-btn:hover {
    color: #0c0a09 !important;            /* Stone-950 */
}

/* Navbar/Link Underlines */
html.light-mode .nav-link::after,
html.light-mode nav a span,
html.light-mode .group-hover\:w-full {
    background-color: #0c0a09 !important; /* Black underline */
}

/* --- 5. UI Components --- */

/* Borders and Dividers */
html.light-mode .border-stone-800,
html.light-mode .border-b,
html.light-mode .border-t,
html.light-mode .border-b-2 {
    border-color: #d6d3d1 !important;     /* Stone-300: Visible but soft */
}

/* Hover Backgrounds (Cards/List Items) */
html.light-mode .hover\:bg-stone-800\/80:hover {
    background-color: #f5f5f4 !important; /* Stone-100 */
}

/* Mobile Menu */
html.light-mode #mobile-menu {
    background-color: #ffffff !important;
    border: 1px solid #e7e5e4 !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

html.light-mode #mobile-menu a {
    color: #292524 !important;
}

/* SVG Icons */
html.light-mode svg {
    color: #44403c !important;
}

/* --- 6. Blog & Markdown Content (Prose) --- */
html.light-mode .prose {
    --tw-prose-body: #292524 !important;
    --tw-prose-headings: #0c0a09 !important;
    --tw-prose-links: #0c0a09 !important;
    --tw-prose-bold: #0c0a09 !important;
    --tw-prose-counters: #57534e !important;
    --tw-prose-bullets: #a8a29e !important;
    --tw-prose-quotes: #44403c !important;
    --tw-prose-code: #0c0a09 !important;
    --tw-prose-pre-bg: #f5f5f4 !important;
    --tw-prose-pre-code: #292524 !important;
    --tw-prose-hr: #d6d3d1 !important;
}

/* Inline Code Snippets */
html.light-mode .prose :not(pre) > code {
    background-color: #e7e5e4 !important; 
    color: #0c0a09 !important;
    padding: 0.2em 0.4em !important;
    border-radius: 0.25rem !important;
}

/* --- 7. Tags & Badges --- */
html.light-mode .prose span.text-stone-400,
html.light-mode #blog-list-container span,
html.light-mode #view-blog-detail .rounded-full {
    background-color: #6b705c !important; /* Earthy Olive Green */
    color: #ffffff !important;
    border: none !important;
    padding: 2px 8px !important;
}

html.light-mode a:hover span {
    background-color: #4a4e3f !important; /* Darker Olive on hover */
}