/* ── Light mode defaults ── */ :root { --bg-body: #fbf8f5; --bg-surface: #ffffff; --bg-subtle: #f1f8f5; --bg-header: #ffffff; --text-base: #1f2937; --text-muted: #6b7280; --text-heading: #111827; --border: #e5e7eb; --shadow: rgba(0,0,0,0.08); --hero-overlay: rgba(0,0,0,0.50); } /* ── Dark mode overrides (Filament adds .dark to ) ── */ html.dark { --bg-body: #0f172a; --bg-surface: #1e293b; --bg-subtle: #162032; --bg-header: #1e293b; --text-base: #e2e8f0; --text-muted: #94a3b8; --text-heading: #f1f5f9; --border: #334155; --shadow: rgba(0,0,0,0.35); --hero-overlay: rgba(0,0,0,0.65); } /* ── Base ── */ html, body { background-color: var(--bg-body) !important; color: var(--text-base) !important; transition: background-color 0.25s, color 0.25s; } /* ── Header ── */ html.dark header { background-color: var(--bg-header) !important; border-bottom: 1px solid var(--border); } html.dark header a:not(.btn), html.dark header span { color: var(--text-base) !important; } /* ── Header buttons keep their own colours in dark mode ── */ html.dark header .btn-primary { background: #ffffff !important; color: var(--brand-brown) !important; } html.dark header .btn-secondary { background: var(--brand-brown) !important; color: #ffffff !important; } /* ── Nav active/hover underline keeps brand colours ── */ html.dark .nav-link { color: var(--text-muted) !important; } html.dark .nav-link.active, html.dark .nav-link:hover { color: #86efac !important; } /* ── White surfaces → dark card ── */ html.dark .bg-white, html.dark [class*="bg-white"] { background-color: var(--bg-surface) !important; color: var(--text-base) !important; } /* ── Contact / About info cards (inline background: white) ── */ html.dark .info-card { background: var(--bg-surface) !important; border-color: #4ade80 !important; } html.dark .info-card h3 { color: #86efac !important; } html.dark .info-card p, html.dark .info-card .text-gray-700 { color: var(--text-muted) !important; } /* ── Light grey sections ── */ html.dark .bg-\[\#fbf8f5\], html.dark .bg-\[\#f1f8f5\] { background-color: var(--bg-subtle) !important; } /* ── Tailwind gray backgrounds ── */ html.dark .bg-gray-50 { background-color: #1e293b !important; } html.dark .bg-gray-100 { background-color: #243044 !important; } html.dark .bg-gray-200 { background-color: #2d3f57 !important; } /* ── Text overrides ── */ html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700 { color: var(--text-base) !important; } html.dark .text-gray-600, html.dark .text-gray-500 { color: var(--text-muted) !important; } html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color: var(--text-heading) !important; } /* ── Cards / shadows ── */ html.dark .shadow, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl { box-shadow: 0 4px 24px var(--shadow) !important; } html.dark .rounded-xl, html.dark .rounded-lg, html.dark .rounded-2xl { border-color: var(--border) !important; } /* ── Inputs ── */ html.dark input, html.dark textarea, html.dark select { background-color: #243044 !important; color: var(--text-base) !important; border-color: var(--border) !important; } /* ── Footer stays dark in both modes ── */ footer { background-color: #1e293b !important; } html.dark footer { background-color: #0f172a !important; } /* ── Hero overlay ── */ html.dark .absolute.inset-0.bg-black\/50 { background: var(--hero-overlay) !important; } /* ── Border colors ── */ html.dark .border, html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300 { border-color: var(--border) !important; } /* ── Dark mode toggle button ── */ #theme-toggle { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 1rem; color: var(--text-base); transition: background 0.2s; display: flex; align-items: center; } #theme-toggle:hover { background: var(--bg-subtle); }