/* GaugeWorks — light theme. Dark is the default (no attribute needed on ); this file only takes effect under [data-theme="light"], so the existing dark theme is completely untouched. Every hardcoded (non-variable) dark-tuned color in base/layout/components.css gets an explicit light-appropriate pair here — redefining the :root custom properties alone isn't enough because several status/badge classes pair a variable background with a hardcoded light-on-dark text color that would be unreadable on a light background. */ :root[data-theme="light"]{ --bg:#F3F5F7; --panel:#FFFFFF; --panel2:#EEF1F4; --line:#DEE4EA; --line2:#C9D2DA; --text:#182027; --muted:#576775; --faint:#8792A0; --low:#1C7ED6; --low-dim:#D7EAFA; --high:#D8402A; --high-dim:#FBDFD9; --amber:#9C6A0A; --ok:#1E9E5A; --ok-dim:#D6F3E3; } [data-theme="light"] body{ background-image:radial-gradient(ellipse 1200px 600px at 70% -10%,rgba(28,126,214,.05),transparent), radial-gradient(ellipse 900px 500px at 10% 110%,rgba(216,64,42,.04),transparent); } [data-theme="light"] .sidebar,[data-theme="light"] .mobilebar{background:var(--panel)} [data-theme="light"] .sidebar{border-right:1px solid var(--line)} /* buttons: hover fills solid instead of white-on-white */ [data-theme="light"] .btn:hover{background:var(--low);border-color:var(--low);color:#fff} [data-theme="light"] .btn.ghost:hover{background:none;color:var(--text);border-color:var(--line2)} [data-theme="light"] .btn.pri:hover{background:#3D96E0} [data-theme="light"] .btn.hot:hover{background:#E35A44} /* status pills — pale fill, saturated-dark text (inverse of the dark theme's dark-fill/light-text) */ [data-theme="light"] .st.scheduled,[data-theme="light"] .st.sent,[data-theme="light"] .st.converted{background:var(--low-dim);color:#0F5B96} [data-theme="light"] .st.enroute{background:#FBE9C7;color:#7A4E0A} [data-theme="light"] .st.onsite,[data-theme="light"] .st.paid,[data-theme="light"] .st.approved{background:var(--ok-dim);color:#0F7A46} [data-theme="light"] .st.complete,[data-theme="light"] .st.draft,[data-theme="light"] .st.expired{background:#E7EBEF;color:#4A5A68} [data-theme="light"] .st.overdue,[data-theme="light"] .st.declined{background:var(--high-dim);color:#A82E1B} [data-theme="light"] .chip.fail{color:#C43D28} [data-theme="light"] .chip.warn{border-color:#E8C98A} [data-theme="light"] .chip.mut{background:rgba(0,0,0,.035)} [data-theme="light"] .sidetag.red{color:#C43D28} [data-theme="light"] .pri-high{color:#C43D28} [data-theme="light"] .gauge.high .gv{color:#C43D28} [data-theme="light"] .readout.fail .rv{color:#C43D28} [data-theme="light"] .pill-off{border-color:#E8C98A} [data-theme="light"] .pill-clock{color:#A82E1B} [data-theme="light"] .authcard .autherr{color:#A82E1B;background:rgba(216,64,42,.07)} [data-theme="light"] .banner{background:rgba(156,106,10,.09);border-color:#E8C98A;color:#7A4E0A} /* subtle hover/highlight tints: light-on-dark tints read wrong on a light background */ [data-theme="light"] tr:hover td{background:rgba(0,0,0,.03)} [data-theme="light"] .nav button:hover{background:rgba(0,0,0,.035)} [data-theme="light"] .nav button.on{background:linear-gradient(90deg,rgba(28,126,214,.1),transparent)} [data-theme="light"] .cal-job{background:rgba(0,0,0,.05)} [data-theme="light"] .cal-job:hover{background:rgba(0,0,0,.09)} /* the modal backdrop and signature pad stay dark/white respectively in both themes on purpose */