/* Smooth transitions */
html {
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Light mode variables */
:root {
--bg: #f3f4f6;
--text: #111111;
--border: #e2e2e2;
--hover: #f3f3f3;
--button-bg: #f7f7f7;
--input-bg: #fafafa;
}
/* Dark mode variables (JS toggles .dark on ) */
html.dark {
--bg: #0f172a;
--text: #e2e8f0;
--border: #334155;
--hover: #1e293b;
--button-bg: #1e293b;
--input-bg: #1e293b;
}
/* Light mode background */
html:not(.dark) body {
background-color: #f3f4f6; /* Tailwind gray-100 */
}
/* Global background + text */
body {
background: var(--bg);
color: var(--text);
}
/* Logo swapping */
.hh-logo-light { display: block; }
.hh-logo-dark { display: none; }
html.dark .hh-logo-light { display: none; }
html.dark .hh-logo-dark { display: block; }