/* Theme tokens as CSS custom properties, switched via data-theme on . */ html[data-theme='dark'] { color-scheme:dark; --bg:#1a1a1d; --surface:#222226; --inset:#161618; --border:rgba(255,255,255,.10); --hair:rgba(255,255,255,.06); --t1:#f1f1f3; --t2:rgba(255,255,255,.60); --t3:rgba(255,255,255,.38); --blue:#5e8bef; --bluesoft:rgba(94,139,239,.16); --green:#4fb98a; --greensoft:rgba(79,185,138,.15); --amber:#d6a44a; --ambersoft:rgba(214,164,74,.16); --red:#e0705f; --redsoft:rgba(224,112,95,.15); --greenglow:rgba(79,185,138,.42); } html[data-theme='light'] { color-scheme:light; --bg:#f6f5f2; --surface:#ffffff; --inset:#f1efea; --border:rgba(0,0,0,.10); --hair:rgba(0,0,0,.06); --t1:#1b1b1e; --t2:rgba(0,0,0,.56); --t3:rgba(0,0,0,.40); --blue:#2f6fe0; --bluesoft:rgba(47,111,224,.10); --green:#1f9d6b; --greensoft:rgba(31,157,107,.10); --amber:#b9842a; --ambersoft:rgba(185,132,42,.12); --red:#d35a47; --redsoft:rgba(211,90,71,.10); --greenglow:rgba(31,157,107,.26); } /* Default before JS applies the saved preference. */ html:not([data-theme]) { color-scheme:dark; --bg:#1a1a1d; --surface:#222226; --inset:#161618; --border:rgba(255,255,255,.10); --hair:rgba(255,255,255,.06); --t1:#f1f1f3; --t2:rgba(255,255,255,.60); --t3:rgba(255,255,255,.38); --blue:#5e8bef; --bluesoft:rgba(94,139,239,.16); --green:#4fb98a; --greensoft:rgba(79,185,138,.15); --amber:#d6a44a; --ambersoft:rgba(214,164,74,.16); --red:#e0705f; --redsoft:rgba(224,112,95,.15); --greenglow:rgba(79,185,138,.42); } .t2c{color:var(--t2)} .t3c{color:var(--t3)} /* Only green (earnings) carries a soft glow, so paid/earned figures read as "lit". Other accents stay flat. */ .green{color:var(--green);text-shadow:0 0 10px var(--greenglow)} .amber{color:var(--amber)} .red{color:var(--red)} .blue{color:var(--blue)}