/* Joshua Lillywhite — shared light/dark theme Tokens + intentional light remaps for existing Tailwind arbitrary colors. data-theme on is set by the head boot script before paint. */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #0A0A0A; --bg-elevated: #121212; --surface: #121212; --surface-2: #1A1A1A; --text: #F5F2E9; --text-soft: #EDE9E0; --text-muted: #A8A29E; --text-quote: #CFC9B8; --accent: #BFA46F; --accent-link: #BFA46F; --on-accent: #0A0A0A; --border: rgba(255, 255, 255, 0.10); --border-soft: rgba(255, 255, 255, 0.05); --border-strong: rgba(255, 255, 255, 0.20); --nav-bg: rgba(10, 10, 10, 0.95); --nav-bg-scrolled: rgba(10, 10, 10, 0.96); --overlay: rgba(0, 0, 0, 0.60); --shadow-card: 0 25px 50px -12px rgb(0 0 0 / 0.40); --shadow-soft: 0 10px 15px -3px rgb(0 0 0 / 0.30), 0 4px 6px -4px rgb(0 0 0 / 0.30); --divider: linear-gradient(to right, transparent, #3F3F3F, transparent); --grid-line: rgba(191, 164, 111, 0.03); --input-bg: #121212; --hero-cta-bg: #ffffff; --hero-cta-text: #0A0A0A; } [data-theme="light"] { color-scheme: light; --bg: #F7F4EE; --bg-elevated: #FAF8F4; --surface: #FAF8F4; --surface-2: #F0EBE3; --text: #1C1917; --text-soft: #292524; --text-muted: #78716C; --text-quote: #57534E; --accent: #BFA46F; --accent-link: #9A7B3C; --on-accent: #1C1917; --border: rgba(120, 113, 108, 0.22); --border-soft: rgba(120, 113, 108, 0.14); --border-strong: rgba(120, 113, 108, 0.34); --nav-bg: rgba(247, 244, 238, 0.92); --nav-bg-scrolled: rgba(250, 248, 244, 0.96); --overlay: rgba(28, 25, 23, 0.45); --shadow-card: 0 18px 40px -18px rgba(28, 25, 23, 0.16); --shadow-soft: 0 8px 20px -10px rgba(28, 25, 23, 0.12), 0 2px 6px -2px rgba(28, 25, 23, 0.08); --divider: linear-gradient(to right, transparent, rgba(120, 113, 108, 0.35), transparent); --grid-line: rgba(154, 123, 60, 0.06); --input-bg: #FAF8F4; --hero-cta-bg: #1C1917; --hero-cta-text: #F7F4EE; } html { background-color: var(--bg); } body { background-color: var(--bg) !important; color: var(--text) !important; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; } /* Smooth theme flips on chrome + cards */ #nav, #mobile-menu, footer, .project-card, .post-card, [class*="rounded-2xl"], [class*="border-white/"], [class*="bg-[#0A0A0A]"], [class*="bg-[#121212]"], [class*="bg-[#1A1A1A]"], [class*="bg-[#1a1a1a]"] { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } /* —— Semantic helpers —— */ .theme-bg { background-color: var(--bg) !important; } .theme-surface { background-color: var(--surface) !important; } .theme-text { color: var(--text) !important; } .theme-muted { color: var(--text-muted) !important; } .theme-accent { color: var(--accent) !important; } .theme-link { color: var(--accent-link) !important; } .theme-border { border-color: var(--border) !important; } .section-header { color: var(--text-muted) !important; } .elegant-divider { background: var(--divider) !important; } .gold-accent { color: var(--accent) !important; } .architecture-grid { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important; } .nav-scrolled { background-color: var(--nav-bg-scrolled) !important; backdrop-filter: blur(12px); } .project-card:hover { box-shadow: var(--shadow-card) !important; } .luxury-shadow { box-shadow: var(--shadow-soft) !important; } /* —— Light remaps for existing dark Tailwind utilities —— */ [data-theme="light"] [class*="bg-[#0A0A0A]"], [data-theme="light"] [class*="bg-[#0a0a0a]"] { background-color: var(--bg) !important; } [data-theme="light"] [class*="bg-[#0A0A0A]/95"], [data-theme="light"] [class*="bg-[#0a0a0a]/95"] { background-color: var(--nav-bg) !important; } [data-theme="light"] [class*="bg-[#121212]"] { background-color: var(--surface) !important; } [data-theme="light"] [class*="bg-[#1A1A1A]"], [data-theme="light"] [class*="bg-[#1a1a1a]"] { background-color: var(--surface-2) !important; } [data-theme="light"] [class^="text-[#F5F2E9]"], [data-theme="light"] [class*=" text-[#F5F2E9]"], [data-theme="light"] [class^="text-[#f5f2e9]"], [data-theme="light"] [class*=" text-[#f5f2e9]"] { color: var(--text) !important; } [data-theme="light"] [class^="text-[#EDE9E0]"], [data-theme="light"] [class*=" text-[#EDE9E0]"], [data-theme="light"] [class^="text-[#ede9e0]"], [data-theme="light"] [class*=" text-[#ede9e0]"] { color: var(--text-soft) !important; } [data-theme="light"] [class^="text-[#A8A29E]"], [data-theme="light"] [class*=" text-[#A8A29E]"], [data-theme="light"] [class^="text-[#a8a29e]"], [data-theme="light"] [class*=" text-[#a8a29e]"] { color: var(--text-muted) !important; } [data-theme="light"] [class*="text-[#CFC9B8]"], [data-theme="light"] [class*="text-[#cfc9b8]"], [data-theme="light"] [class*="text-[#D9D3C7]"] { color: var(--text-quote) !important; } /* Exact utility token only — do not match hover:text-[#BFA46F] */ [data-theme="light"] [class^="text-[#BFA46F]"], [data-theme="light"] [class*=" text-[#BFA46F]"] { color: var(--accent-link) !important; } [data-theme="light"] a.nav-link[class^="text-[#BFA46F]"], [data-theme="light"] a.nav-link[class*=" text-[#BFA46F]"] { color: var(--accent-link) !important; } [data-theme="light"] [class*="hover:text-white"]:hover, [data-theme="light"] [class*="hover:text-[#F5F2E9]"]:hover { color: var(--text) !important; } [data-theme="light"] [class*="hover:text-[#BFA46F]"]:hover, [data-theme="light"] [class*="group-hover:text-[#BFA46F]"]:hover, [data-theme="light"] .group:hover [class*="group-hover:text-[#BFA46F]"] { color: var(--accent-link) !important; } [data-theme="light"] [class*="hover:bg-white/5"]:hover { background-color: rgba(28, 25, 23, 0.04) !important; } [data-theme="light"] [class*="border-white/5"] { border-color: var(--border-soft) !important; } [data-theme="light"] [class*="border-white/10"], [data-theme="light"] [class*="divide-white/10"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; } [data-theme="light"] [class*="border-white/20"], [data-theme="light"] [class*="border-white/30"], [data-theme="light"] [class*="border-white/60"] { border-color: var(--border-strong) !important; } [data-theme="light"] [class*="bg-white/20"], [data-theme="light"] [class*="bg-white/30"] { background-color: rgba(120, 113, 108, 0.22) !important; } [data-theme="light"] [class*="text-white/50"] { color: rgba(28, 25, 23, 0.45) !important; } /* Cards: soft stone + gentle daylight shadow */ [data-theme="light"] a.group.block[class*="rounded-2xl"], [data-theme="light"] .post-card, [data-theme="light"] .project-card { box-shadow: var(--shadow-soft); } /* Article body (posts often hardcode dark in