/* Design tokens — the app's complete color system (design source: design/prototype.html). Light = :root, dark = [data-theme="dark"] on (Render keeps it in sync with the stored dark-mode preference). Component CSS uses ONLY these variables — never hex. THE PERSON PALETTE: ten slots (--p1…--p10), each with -soft (badge fill) and -ink (text on soft), hand-editable per theme. Members/things pick a slot explicitly or get one assigned deterministically. To retune a color: edit its 6 values (3 light + 3 dark), bump the service-worker CACHE_NAME, push — every badge, dot, bar and ring follows. Derivation recipe used here (if you want to recompute variants from a new base): light: soft = base 11% on white · ink = base 70% on black dark: base 70% on white · soft = base 26% on #1F1F1C · ink = base 35% on white Groups: surfaces --bg (page) · --card (card) · --card2 (inset surface) ink --ink · --ink2 (secondary) · --ink3 (muted) lines --line (hairline) · --line2 (stronger/controls) people --p1…--p10 (+ -soft/-ink) status --ok/-soft/-ink (done) · --due/-soft/-ink (overdue/offline — red is ONLY for these) · --pend/-soft/-ink (pending/attention amber) effects --shadow */ :root{ --bg:#F6F5F2; --card:#FFFFFF; --card2:#FAF9F7; --ink:#1E1D1A; --ink2:#6C6A63; --ink3:#A6A49C; --line:#EAE8E2; --line2:#DBD9D1; --p1:#3465C8; --p1-soft:#E9EEF9; --p1-ink:#24478C; /* Blau */ --p2:#4C9BD8; --p2-soft:#EBF4FB; --p2-ink:#356D97; /* Himmelblau */ --p3:#1F8A99; --p3-soft:#E6F2F4; --p3-ink:#16616B; /* Türkis */ --p4:#3D9970; --p4-soft:#EAF4EF; --p4-ink:#2B6B4E; /* Jade */ --p5:#E0569E; --p5-soft:#FCECF4; --p5-ink:#9D3C6F; /* Pink */ --p6:#A8478F; --p6-soft:#F5EBF3; --p6-ink:#763264; /* Beere */ --p7:#7C56C4; --p7-soft:#F1ECF9; --p7-ink:#573C89; /* Violett */ --p8:#4A55B0; --p8-soft:#EBECF6; --p8-ink:#343B7B; /* Indigo */ --p9:#977BD6; --p9-soft:#F4F0FA; --p9-ink:#6A5696; /* Flieder */ --p10:#64748B; --p10-soft:#EEF0F2; --p10-ink:#465161; /* Schiefer */ --ok:#20705F; --ok-soft:#E6F1ED; --ok-ink:#0F4A3E; --due:#BC4A2B; --due-ink:#87331C; --due-soft:#F9E9E3; --pend:#C77E17; --pend-soft:#F9F0DE; --pend-ink:#7E4F0C; /* brand: the wordmark's "j" dot. --badge-fg is the text ON a solid --pend/--due count badge (white reads on the darker light-theme accents; the dark theme overrides it for contrast). --moon-glyph is the baby sleep-arc moon — white in BOTH themes (it sits on a coloured arc). */ --wm-dot:#C25478; --badge-fg:#FFFFFF; --moon-glyph:#FFFFFF; --shadow:0 1px 2px rgba(28,26,20,.04), 0 10px 28px rgba(28,26,20,.05); } [data-theme="dark"]{ --bg:#151513; --card:#1F1F1C; --card2:#1A1A17; --ink:#EFEEE9; --ink2:#A3A199; --ink3:#6F6E68; --line:#2D2D28; --line2:#3B3B34; --p1:#7193D9; --p1-soft:#243149; --p1-ink:#B8C9EC; --p2:#82B9E4; --p2-soft:#2B3F4D; --p2-ink:#C0DCF1; --p3:#62ADB8; --p3-soft:#1F3B3D; --p3-ink:#B1D6DB; --p4:#77B89B; --p4-soft:#273F32; --p4-ink:#BBDBCD; --p5:#E989BB; --p5-soft:#512D3E; --p5-ink:#F4C4DD; --p6:#C27EB1; --p6-soft:#43293A; --p6-ink:#E1BFD8; --p7:#A389D6; --p7-soft:#372D48; --p7-ink:#D1C4EA; --p8:#8088C8; --p8-soft:#2A2D42; --p8-ink:#C0C4E3; --p9:#B6A3E2; --p9-soft:#3E374C; --p9-ink:#DBD1F1; --p10:#939EAE; --p10-soft:#313539; --p10-ink:#C9CED6; --ok:#57AE99; --ok-soft:#1B332C; --ok-ink:#A5D8CA; --due:#DD7050; --due-ink:#F0B09C; --due-soft:#3C231A; --pend:#DCA23F; --pend-soft:#3A2D14; --pend-ink:#EFCF97; /* dark theme's --pend/--due are LIGHT, so white count-badge text drops to ~2:1 — flip to a near-black. --wm-dot brightens for the dark surface; --moon-glyph stays white (inherited). */ --wm-dot:#DA7C9D; --badge-fg:#201810; --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.4); }