/* ================================================================ theme.css Light theme: 6am–8pm Dark theme: 8pm–6am (default / fallback) Applied via data-theme="light" or data-theme="dark" on , set automatically by theme.js based on the user's local time. ================================================================ */ /* ── Dark theme (default) ───────────────────────────────────── */ :root, [data-theme="dark"] { --bg: #0a0a0b; --surface: rgba(255,255,255,0.05); --border: rgba(255,255,255,0.1); --border-hover: rgba(255,255,255,0.3); --text: #e4e4ea; --text-muted: rgba(255,255,255,0.6); --text-subtle: rgba(255,255,255,0.3); --text-faint: rgba(255,255,255,0.15); --navbar-bg: rgba(0,0,0,0.8); --card-bg: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); --input-bg: rgba(255,255,255,0.05); --btn-primary-bg: #ffffff; --btn-primary-text: #0a0a0b; --price-color: rgba(255,255,255,0.6); } /* ── Light theme ─────────────────────────────────────────────── */ [data-theme="light"] { --bg: #f5f5f0; --surface: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.12); --border-hover: rgba(0,0,0,0.35); --text: #1a1a1e; --text-muted: rgba(0,0,0,0.55); --text-subtle: rgba(0,0,0,0.35); --text-faint: rgba(0,0,0,0.15); --navbar-bg: rgba(245,245,240,0.9); --card-bg: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01)); --input-bg: rgba(0,0,0,0.04); --btn-primary-bg: #1a1a1e; --btn-primary-text: #f5f5f0; --price-color: rgba(0,0,0,0.65); } /* ── Base styles using variables ────────────────────────────── */ html, body { background-color: var(--bg); color: var(--text); transition: background-color 0.4s ease, color 0.4s ease; } /* ── Theme-aware utility classes ────────────────────────────── */ /* Use these instead of Tailwind's hardcoded text-white/bg-white */ .t-text { color: var(--text); } .t-text-muted { color: var(--text-muted); } .t-text-subtle { color: var(--text-subtle); } .t-text-faint { color: var(--text-faint); } .t-surface { background: var(--surface); } .t-border { border-color: var(--border); } .t-heading { color: var(--text); font-weight: 700; } .t-card { background: var(--surface); border: 1px solid var(--border); } .t-card:hover { border-color: var(--border-hover); } .t-input { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); } .t-input:focus { border-color: var(--border-hover); outline: none; } .t-input::placeholder { color: var(--text-subtle); } .t-btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); font-weight: 600; cursor: pointer; transition: opacity 0.2s; } .t-btn-primary:hover { opacity: 0.85; } .t-btn-secondary { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: background 0.2s, color 0.2s; } .t-btn-secondary:hover { background: var(--input-bg); color: var(--text); } .t-nav-link { color: var(--text-subtle); text-decoration: none; transition: color 0.2s; } .t-nav-link:hover { color: var(--text); } .t-section-border-b { border-bottom: 1px solid var(--border); } .t-section-border-t { border-top: 1px solid var(--border); }