/* Clinical-day theme, toggled via data-theme="light" on . */ :root[data-theme="light"] { --bg: #f2f3f0; --surface: #ffffff; --surface-2: #e9ebe6; --glass: rgba(255, 255, 255, .72); --glass-border: rgba(10, 14, 20, .1); --text: #0a0e14; --text-dim: rgba(16, 20, 27, .58); /* Ink itself flips to near-black so every component using --ink directly (and all its alpha steps below) reads dark-on-light. */ --ink: #0a0e14; --line: rgba(16, 20, 27, .14); --ink-70: rgba(16, 20, 27, .7); --ink-50: rgba(16, 20, 27, .5); --ink-35: rgba(16, 20, 27, .38); --ink-15: rgba(16, 20, 27, .1); --bio: #0c9488; --bio-soft: rgba(12, 148, 136, .12); --helix: #6d5fd6; --helix-soft: rgba(109, 95, 214, .12); --marker: #a97b12; --shadow: 0 14px 40px rgba(20, 24, 32, .16); } :root[data-theme="light"] #grain { opacity: .028; } /* Only solid gradient buttons get white text; ghost buttons keep dark ink. */ :root[data-theme="light"] .btn:not(.btn-ghost) { color: #fff; } :root[data-theme="light"] .btn-ghost { color: var(--text); } :root[data-theme="light"] select.input option { background: #ffffff; color: #0a0e14; } :root[data-theme="light"] ::selection { background: var(--helix); color: #ffffff; } :root[data-theme="light"] .sidebar { background: rgba(255, 255, 255, .82); } :root[data-theme="light"] .bubble.mine { border-color: rgba(12, 148, 136, .35); }