/* ============================================================ Dara Oladapo — Website kit · LIGHT THEME Remaps the cinematic token stack to warm light surfaces. Apply with or any [data-theme="light"] scope. ============================================================ */ [data-theme="light"] { --bg-0: #E4E4DD; /* deepest light — page void */ --bg-1: #F4F3EE; /* canvas — warm paper */ --bg-2: #FFFFFF; /* card */ --bg-3: #ECEBE4; /* raised / hovered */ --bg-4: #E2E1D8; /* input / popover */ --bg-inverse: #111114; /* dark surfaces (inversions) */ --fg-1: #16161A; /* primary text */ --fg-2: #45453E; /* secondary */ --fg-3: #76766E; /* tertiary / meta */ --fg-4: #A6A69D; /* disabled / ghost */ --fg-on-accent:#16161A; /* text on amber */ --accent: #B6831F; /* amber, darkened for AA on light */ --accent-hover: #9C6F15; --accent-press: #845E10; --accent-soft: rgba(182, 131, 31, 0.10); --accent-line: rgba(182, 131, 31, 0.30); --success: #2E9A63; --success-soft: rgba(46,154,99,0.10); --warning: #B6831F; --warning-soft: rgba(182,131,31,0.10); --danger: #C84A38; --danger-soft: rgba(200,74,56,0.10); --info: #3D6FB8; --info-soft: rgba(61,111,184,0.10); --status-running: #2E9A63; --status-pending: #B6831F; --status-failed: #C84A38; --status-idle: #76766E; --status-queued: #3D6FB8; --border-1: rgba(20,20,15,0.08); --border-2: rgba(20,20,15,0.14); --border-3: rgba(20,20,15,0.22); --shadow-1: 0 1px 2px rgba(20,20,15,0.06); --shadow-2: 0 8px 24px rgba(20,20,15,0.08); --shadow-3: 0 24px 64px rgba(20,20,15,0.12); --shadow-glow: 0 0 0 1px var(--accent-line), 0 0 28px rgba(182,131,31,0.14); } /* Scoped panels can also flip via class for side-by-side comparison */ .theme-light { color-scheme: light; } .theme-dark { color-scheme: dark; }