/* ============================================================ MEXHICKENS — Theme (Light / Dark) Applied via [data-theme] on . Inline script in sets this before first paint. ============================================================ */ /* ─── Light theme ─── */ [data-theme="light"] { --bg-base: #FDF6EC; --bg-surface: #FFFFFF; --bg-raised: #F5EDD8; --bg-overlay: rgba(253, 246, 236, 0.95); --bg-nav: rgba(253, 246, 236, 0.88); --text-primary: #1A0F00; --text-secondary:#5C4A30; --text-muted: #8C7355; --text-on-accent:#FFFFFF; --border-subtle: rgba(92, 74, 48, 0.15); --border-mid: rgba(92, 74, 48, 0.25); --border-strong: rgba(92, 74, 48, 0.40); --nav-border: rgba(245, 166, 35, 0.30); --card-shadow: 0 4px 20px rgba(26, 15, 0, 0.10); --skeleton-from: #EDE5D4; --skeleton-to: #F8F2E8; color-scheme: light; } /* ─── Dark theme ─── */ [data-theme="dark"] { --bg-base: #0D0A14; --bg-surface: #16101F; --bg-raised: #1E1530; --bg-overlay: rgba(13, 10, 20, 0.95); --bg-nav: rgba(13, 10, 20, 0.88); --text-primary: #F5EDD8; --text-secondary:#C4A882; --text-muted: #7A6550; --text-on-accent:#0D0A14; --border-subtle: rgba(245, 237, 216, 0.08); --border-mid: rgba(245, 237, 216, 0.15); --border-strong: rgba(245, 237, 216, 0.28); --nav-border: rgba(10, 191, 188, 0.20); --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.50); --skeleton-from: #1E1530; --skeleton-to: #241A38; color-scheme: dark; } /* ─── Smooth theme transition (after initial load) ─── */ html.theme-ready * { transition: background-color var(--dur-med) var(--ease-smooth), border-color var(--dur-med) var(--ease-smooth), color var(--dur-med) var(--ease-smooth), box-shadow var(--dur-med) var(--ease-smooth); }