/* Dark mode color overrides — apply when has the .dark class.
Maps the project's light Material/Tailwind tokens to dark equivalents
so existing utility classes flip without per-element dark: variants. */
html.dark body {
background-color: #2D2D2D;
color: #F5F1E8;
}
/* Page-level surfaces */
html.dark .bg-surface,
html.dark .bg-background,
html.dark .bg-sand-stone {
background-color: #2D2D2D;
}
html.dark .bg-surface\/95 {
background-color: rgba(45, 45, 45, 0.95);
}
/* Cards / containers */
html.dark .bg-white {
background-color: rgba(255, 255, 255, 0.05);
}
html.dark .bg-white\/50 {
background-color: rgba(255, 255, 255, 0.05);
}
html.dark .bg-surface-container,
html.dark .bg-surface-container-low,
html.dark .bg-surface-container-lowest {
background-color: rgba(255, 255, 255, 0.03);
}
html.dark .bg-surface-container-high,
html.dark .bg-surface-container-highest {
background-color: rgba(255, 255, 255, 0.06);
}
html.dark .bg-surface-variant {
background-color: rgba(255, 255, 255, 0.05);
}
/* Text colors */
html.dark .text-on-surface,
html.dark .text-on-background {
color: #F5F1E8;
}
html.dark .text-on-surface-variant {
color: rgba(245, 241, 232, 0.72);
}
html.dark .text-primary {
color: #9acee1;
}
html.dark .text-outline {
color: rgba(245, 241, 232, 0.5);
}
/* Borders */
html.dark .border-outline,
html.dark .border-outline-variant {
border-color: rgba(245, 241, 232, 0.18);
}
html.dark .border-outline\/10,
html.dark .border-on-surface\/10 {
border-color: rgba(245, 241, 232, 0.12);
}
html.dark .border-outline-variant\/30,
html.dark .border-outline-variant\/20,
html.dark .border-outline-variant\/10 {
border-color: rgba(245, 241, 232, 0.15);
}
html.dark .border-primary {
border-color: #9acee1;
}
/* The hero pattern SVG uses a dark fill that disappears on a dark bg;
hide it so it doesn't fight the dark surface. */
html.dark .hero-pattern {
background-image: none;
}
/* Icon button hover */
html.dark .hover\:bg-surface-container-high:hover {
background-color: rgba(255, 255, 255, 0.08);
}