/* theme-light.css — Light mode через prefers-color-scheme */ /* Можно переопределить data-theme="light"/"dark"/"auto" на для manual toggle */ @media (prefers-color-scheme: light) { html:not([data-theme="dark"]) { --bg: #ffffff; --bg-2: #f5f5f7; --bg-3: #eeeef1; --panel: #ffffff; --panel-2: #f9f9fb; --line: rgba(0, 0, 0, 0.08); --line-2: rgba(0, 0, 0, 0.14); --fg: #1d1d1f; --fg-dim: rgba(0, 0, 0, 0.64); --fg-mute: rgba(0, 0, 0, 0.42); } } html[data-theme="light"] { --bg: #ffffff; --bg-2: #f5f5f7; --bg-3: #eeeef1; --panel: #ffffff; --panel-2: #f9f9fb; --line: rgba(0, 0, 0, 0.08); --line-2: rgba(0, 0, 0, 0.14); --fg: #1d1d1f; --fg-dim: rgba(0, 0, 0, 0.64); --fg-mute: rgba(0, 0, 0, 0.42); } /* В light mode сделать KPI более контрастными */ html[data-theme="light"] .kpi-tile, html:not([data-theme="dark"]) .kpi-tile { background: var(--panel-2); border: 1px solid var(--line); } /* Emergency stop всегда чёрный (IP: design bundle rule) */ html[data-theme="light"] .modal-danger, html[data-theme="light"] .modal-stop { background: #0a0a0b !important; color: #f4f4f5 !important; } /* Hero всегда чёрный (brand) */ html[data-theme="light"] .hero, html[data-theme="light"] .ap-hero { background: #0a0a0b !important; color: #f4f4f5 !important; }