/* * SmartShop light theme overrides. * Activated by adding `light` class to . See /static/js/theme.js. * * Strategy: remap the dark-mode stone-* utility classes (and a few accent * tints) to warm-light equivalents so we don't need `dark:` variants on * every template. Higher specificity (html.light .xxx) beats Tailwind's * default single-class rules — no !important needed. * * Light palette (warm tan / cream / ivory): * surface-bg #faf8f3 (app body) * surface-card #ffffff (cards, sidebar) * surface-input #f5f1e8 (inputs, hovers) * surface-muted #ece6d5 (secondary hover) * border #e7e2d4 * text-strong #0c0a09 * text-normal #1c1917 * text-muted #57534e * text-subtle #78716c * text-faint #a8a29e */ /* Smooth transitions when toggling */ html { transition: background-color 180ms ease, color 180ms ease; } html *, html *::before, html *::after { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; } /* ======================================================================== */ /* LIGHT THEME */ /* ======================================================================== */ html.light body { background-color: #faf8f3; color: #1c1917; } /* ---- Backgrounds: solid stone ---- */ html.light .bg-stone-950 { background-color: #faf8f3; } html.light .bg-stone-900 { background-color: #ffffff; } html.light .bg-stone-800 { background-color: #f5f1e8; } html.light .bg-stone-700 { background-color: #ece6d5; } html.light .bg-stone-600 { background-color: #ddd6c2; } /* ---- Backgrounds: stone with opacity ---- */ html.light .bg-stone-950\/80 { background-color: rgba(250, 248, 243, 0.85); } html.light .bg-stone-900\/50 { background-color: rgba(255, 255, 255, 0.70); } html.light .bg-stone-800\/60 { background-color: rgba(245, 241, 232, 0.75); } html.light .bg-stone-800\/50 { background-color: rgba(245, 241, 232, 0.65); } html.light .bg-stone-700\/50 { background-color: rgba(236, 230, 213, 0.65); } /* ---- Hover backgrounds ---- */ html.light .hover\:bg-stone-800:hover { background-color: #ece6d5; } html.light .hover\:bg-stone-700:hover { background-color: #ddd6c2; } /* ---- Text colors (CRITICAL for readability) ---- */ html.light .text-white { color: #ffffff; } /* keep white on dark buttons */ html.light .text-stone-100 { color: #0c0a09; } /* was near-white → now near-black */ html.light .text-stone-200 { color: #1c1917; } /* primary body text */ html.light .text-stone-300 { color: #292524; } /* headings */ html.light .text-stone-400 { color: #44403c; } /* labels — readable mid-dark */ html.light .text-stone-500 { color: #57534e; } /* muted but readable */ html.light .text-stone-600 { color: #78716c; } /* subtle (was nearly invisible!) */ html.light .text-stone-700 { color: #292524; } /* strong — flip to near-black */ html.light .hover\:text-stone-200:hover { color: #0c0a09; } html.light .hover\:text-stone-300:hover { color: #0c0a09; } html.light .placeholder-stone-600::placeholder { color: #a8a29e; } /* ---- Borders ---- */ html.light .border-stone-600 { border-color: #d6d3d1; } html.light .border-stone-700 { border-color: #e7e2d4; } html.light .border-stone-800 { border-color: #e7e2d4; } html.light .border-stone-900 { border-color: #e7e2d4; } html.light .border-stone-700\/50 { border-color: rgba(231, 226, 212, 0.5); } html.light .border-stone-800\/50 { border-color: rgba(231, 226, 212, 0.5); } html.light .divide-stone-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e7e2d4; } /* ---- Hover borders ---- */ html.light .hover\:border-stone-600:hover { border-color: #a8a29e; } html.light .hover\:border-stone-700:hover { border-color: #a8a29e; } html.light .hover\:border-emerald-700:hover { border-color: #059669; } /* ---- Scrollbar ---- */ html.light ::-webkit-scrollbar-thumb { background: #d6d3d1; } html.light ::-webkit-scrollbar-thumb:hover { background: #a8a29e; } html.light ::-webkit-scrollbar-track { background: #faf8f3; } /* ======================================================================== */ /* ACCENT TINTS — soften dark-mode translucent backgrounds for light surfaces*/ /* ======================================================================== */ /* Emerald */ html.light .bg-emerald-900 { background-color: #065f46; } html.light .bg-emerald-900\/30 { background-color: rgba(16, 185, 129, 0.12); } html.light .bg-emerald-900\/20 { background-color: rgba(16, 185, 129, 0.10); } html.light .bg-emerald-600\/30 { background-color: rgba(16, 185, 129, 0.18); } html.light .bg-emerald-600\/20 { background-color: rgba(16, 185, 129, 0.12); } html.light .border-emerald-800\/50, html.light .border-emerald-800 { border-color: rgba(5, 150, 105, 0.35); } html.light .border-emerald-600 { border-color: #059669; } html.light .border-emerald-700 { border-color: #047857; } html.light .text-emerald-300 { color: #047857; } html.light .text-emerald-400 { color: #059669; } html.light .text-emerald-500 { color: #10b981; } html.light .text-emerald-400\/80 { color: rgba(5, 150, 105, 0.85); } /* Amber */ html.light .bg-amber-900 { background-color: #92400e; } html.light .bg-amber-900\/30 { background-color: rgba(245, 158, 11, 0.14); } html.light .bg-amber-900\/20 { background-color: rgba(245, 158, 11, 0.10); } html.light .text-amber-400 { color: #b45309; } html.light .text-amber-500 { color: #d97706; } /* Red */ html.light .bg-red-900 { background-color: #991b1b; } html.light .bg-red-900\/40 { background-color: rgba(239, 68, 68, 0.14); } html.light .bg-red-900\/30 { background-color: rgba(239, 68, 68, 0.12); } html.light .bg-red-900\/20 { background-color: rgba(239, 68, 68, 0.10); } html.light .bg-red-900\/10 { background-color: rgba(239, 68, 68, 0.07); } html.light .border-red-800 { border-color: rgba(220, 38, 38, 0.35); } html.light .text-red-300 { color: #b91c1c; } html.light .text-red-400 { color: #dc2626; } html.light .text-red-500 { color: #dc2626; } html.light .hover\:text-red-400:hover { color: #b91c1c; } /* Purple */ html.light .bg-purple-900 { background-color: #6b21a8; } html.light .bg-purple-900\/30 { background-color: rgba(168, 85, 247, 0.12); } html.light .bg-purple-900\/20 { background-color: rgba(168, 85, 247, 0.10); } html.light .text-purple-400 { color: #9333ea; } html.light .text-purple-500 { color: #a855f7; } /* Blue */ html.light .bg-blue-900 { background-color: #1e3a8a; } html.light .bg-blue-900\/30 { background-color: rgba(59, 130, 246, 0.12); } html.light .bg-blue-900\/20 { background-color: rgba(59, 130, 246, 0.10); } html.light .bg-blue-900\/10 { background-color: rgba(59, 130, 246, 0.07); } html.light .bg-blue-600\/30 { background-color: rgba(37, 99, 235, 0.18); } html.light .bg-blue-600\/20 { background-color: rgba(37, 99, 235, 0.12); } html.light .border-blue-900 { border-color: rgba(37, 99, 235, 0.35); } html.light .border-blue-900\/20 { border-color: rgba(37, 99, 235, 0.22); } html.light .text-blue-400 { color: #2563eb; } html.light .text-blue-500 { color: #2563eb; } /* Indigo */ html.light .bg-indigo-900 { background-color: #312e81; } html.light .bg-indigo-900\/30 { background-color: rgba(99, 102, 241, 0.12); } html.light .text-indigo-400 { color: #4f46e5; } /* Orange / yellow */ html.light .text-orange-400 { color: #ea580c; } html.light .text-yellow-500 { color: #ca8a04; } /* ======================================================================== */ /* COMPONENT-LEVEL FIXES */ /* ======================================================================== */ /* Assistant prose — code blocks, tables, hr in light mode */ html.light .assistant-prose { color: #1c1917; } html.light .assistant-prose h1, html.light .assistant-prose h2, html.light .assistant-prose h3, html.light .assistant-prose h4, html.light .assistant-prose strong { color: #0c0a09; } html.light .assistant-prose em { color: #44403c; } html.light .assistant-prose code { background: #f5f1e8; color: #92400e; border: 1px solid #ece6d5; } html.light .assistant-prose pre { background: #faf8f3; border-color: #e7e2d4; } html.light .assistant-prose pre code{ background: transparent; color: #1c1917; border: 0; } html.light .assistant-prose th { background: #f5f1e8; color: #1c1917; } html.light .assistant-prose th, html.light .assistant-prose td { border-color: #e7e2d4; } html.light .assistant-prose hr { border-color: #e7e2d4; } html.light .assistant-prose blockquote { color: #44403c; border-left-color: #059669; } html.light .assistant-prose a { color: #059669; } html.light .assistant-prose a:hover { color: #047857; } /* Legacy markdown-body class (used in base.html