/* =================================================================== notrack.ai — light/dark theme (prototype) Mechanism: [data-theme="dark"] on . Every color used on the landing (Tailwind utilities) and in the content/Trends custom CSS is mapped deliberately so nothing loses contrast in either theme. =================================================================== */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* base page */ [data-theme="dark"] body { background:#0e0e10; color:#e4e4e7; } [data-theme="dark"] ::selection { background:rgba(16,185,129,.30); } /* ---------- Tailwind color utilities (landing + content chrome) ---------- */ [data-theme="dark"] .bg-white { background-color:#151517 !important; } [data-theme="dark"] .bg-zinc-50 { background-color:#1a1a1d !important; } [data-theme="dark"] .bg-zinc-100 { background-color:#232327 !important; } [data-theme="dark"] .text-zinc-900 { color:#f4f4f5 !important; } [data-theme="dark"] .text-zinc-800 { color:#e9e9ec !important; } [data-theme="dark"] .text-zinc-700 { color:#d4d4d8 !important; } [data-theme="dark"] .text-zinc-600 { color:#c1c1c8 !important; } [data-theme="dark"] .text-zinc-500 { color:#a1a1aa !important; } [data-theme="dark"] .text-zinc-400 { color:#8c8c95 !important; } [data-theme="dark"] .text-zinc-300 { color:#71717a !important; } [data-theme="dark"] .border-zinc-200 { border-color:#2a2a2e !important; } [data-theme="dark"] .border-zinc-300 { border-color:#34343a !important; } [data-theme="dark"] .border-zinc-400 { border-color:#3c3c44 !important; } /* emerald accent — brighten so it reads on dark */ [data-theme="dark"] .text-emerald-600 { color:#34d399 !important; } [data-theme="dark"] .text-emerald-700 { color:#6ee7b7 !important; } [data-theme="dark"] .bg-emerald-50 { background-color:rgba(16,185,129,.12) !important; } [data-theme="dark"] .border-emerald-200 { border-color:rgba(16,185,129,.30) !important; } /* .bg-emerald-500 (dot/buttons) and .text-white stay — correct on dark */ /* red (error box / destructive button) */ [data-theme="dark"] .bg-red-50 { background-color:rgba(239,68,68,.12) !important; } [data-theme="dark"] .text-red-700 { color:#fca5a5 !important; } [data-theme="dark"] .border-red-200{ border-color:rgba(239,68,68,.30) !important; } /* .bg-red-600/.bg-red-700 stay — visible on dark */ /* translucent sticky header (backdrop-blur) */ [data-theme="dark"] .bg-white\/85 { background-color:rgba(14,14,16,.82) !important; } [data-theme="dark"] .bg-white\/90 { background-color:rgba(14,14,16,.88) !important; } /* dark pill BUTTONS (/