@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..700;1,14..32,300..700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html {
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                text-rendering: optimizeLegibility;
                font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
                overflow-x: hidden;
                max-width: 100vw;
        }

        body {
                font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
                background: #ffffff;
                color: #0a0a0a;
                overflow-x: hidden;
                max-width: 100vw;
                transition: background-color 0.2s ease, color 0.2s ease;
        }

        html.dark body {
                background: #0d0d0d;
                color: #fafafa;
        }

        ::selection {
                background: #0a0a0a;
                color: #ffffff;
        }

        html.dark ::selection {
                background: #ffffff;
                color: #0a0a0a;
        }

        input, button, textarea {
                font-family: inherit;
        }

        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #e3e3e3; border-radius: 99px; }
        html.dark ::-webkit-scrollbar-thumb { background: #333; }
}

@layer utilities {
        .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
                display: none;
        }
}

/* ── Global dark-mode overrides for hardcoded colors ── */

/* Borders */
html.dark [class*="border-[#e5e5e5]"] { border-color: #262626; }
html.dark [class*="border-[#f0f0f0]"] { border-color: #1e1e1e; }
html.dark [class*="border-[#f4f4f4]"] { border-color: #1e1e1e; }
html.dark [class*="divide-[#f0f0f0]"] > * + * { border-color: #1e1e1e; }

/* Backgrounds */
html.dark [class*="bg-white"] { background-color: #0d0d0d; }
html.dark [class*="bg-[#f9f9f9]"] { background-color: #171717; }
html.dark [class*="bg-[#fafafa]"] { background-color: #151515; }
html.dark [class*="bg-[#fdfdfd]"] { background-color: #111111; }
html.dark [class*="bg-[#f4f4f4]"] { background-color: #1e1e1e; }

/* Text */
html.dark [class*="text-[#0f0f0f]"] { color: #fafafa; }
html.dark [class*="text-[#0a0a0a]"] { color: #fafafa; }
html.dark [class*="text-[#111]"],
html.dark [class*="text-[#111111]"] { color: #ebebeb; }
html.dark [class*="text-[#222]"],
html.dark [class*="text-[#222222]"] { color: #e3e3e3; }
html.dark [class*="text-[#333]"] { color: #cdcdcd; }
html.dark [class*="text-[#444]"],
html.dark [class*="text-[#444444]"] { color: #b4b4b4; }
html.dark [class*="text-[#555]"],
html.dark [class*="text-[#555555]"] { color: #9b9b9b; }
html.dark [class*="text-[#666]"],
html.dark [class*="text-[#666666]"] { color: #9b9b9b; }
html.dark [class*="text-[#888]"],
html.dark [class*="text-[#888888]"] { color: #676767; }
html.dark [class*="text-[#aaa]"],
html.dark [class*="text-[#aaaaaa]"] { color: #4e4e4e; }
html.dark [class*="text-[#bbb]"],
html.dark [class*="text-[#bbbbbb]"] { color: #4e4e4e; }
html.dark [class*="text-[#ccc]"],
html.dark [class*="text-[#cccccc]"] { color: #4e4e4e; }
html.dark [class*="text-[#d2d2d2]"] { color: #333; }
html.dark [class*="text-[#1e293b]"] { color: #e2e8f0; }

/* Code/pre backgrounds */
html.dark code[class*="bg-[#f4f4f4]"] { background-color: #1e1e1e; }
html.dark code[class*="bg-[#e5e5e5]"] { background-color: #262626; }

/* Hover bg overrides */
html.dark [class*="hover:bg-[#f9f9f9]"]:hover { background-color: #1e1e1e; }
html.dark [class*="hover:bg-[#fafafa]"]:hover { background-color: #1e1e1e; }
html.dark [class*="hover:bg-[#f4f4f4]"]:hover { background-color: #262626; }
html.dark [class*="hover:bg-[#eaeaea]"]:hover { background-color: #262626; }
html.dark [class*="hover:bg-[#e5e5e5]"]:hover { background-color: #1e1e1e; }
html.dark [class*="hover:text-[#0f0f0f]"]:hover { color: #fafafa; }
html.dark [class*="hover:border-[#ccc]"]:hover { border-color: #333; }
html.dark [class*="hover:border-[#cccccc]"]:hover { border-color: #333; }

/* Spinner in dark mode */
html.dark [class*="border-black/10"] { border-color: rgba(255,255,255,0.1); }
html.dark [class*="border-t-black"] { border-top-color: #fafafa; }


/* Named Tailwind gray hover states */
html.dark [class*="hover:bg-gray-50"]:hover { background-color: #171717; }
html.dark [class*="hover:bg-gray-100"]:hover { background-color: #1e1e1e; }

/* bg-white/95 for glassmorphism header */
html.dark .dark\:bg-gray-950\/95 { background-color: rgba(13, 13, 13, 0.95); }