/* Design tokens — the app's complete color system (CI: design/DESIGN.md + design/styleguide.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 · --scrim/--scrim-strong (backdrops) · --scroll-shadow (strip edges) color-scheme tells the UA which native palette to draw scrollbars, form controls and pickers in — keyed on the same data-theme switch as the tokens, so native UI follows the app theme (not just the OS scheme). */ :root{ color-scheme:light; --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; /* weather --wx-*: ruhige Zustandsfarben NUR für die Wetter-Karte (Familie der aktuellen Stunde; night = Klar/Leicht-bewölkt nach Sonnenuntergang). Ableitung nach dem Rezept oben; nie für Status oder Personen — color = meaning. sun ist bewusst gelber als --pend. */ --wx-sun:#C29237; --wx-sun-soft:#F8F3E9; --wx-sun-ink:#886627; --wx-suncloud:#A98F53; --wx-suncloud-soft:#F6F3EC; --wx-suncloud-ink:#76643A; --wx-cloud:#857F72; --wx-cloud-soft:#F2F1EF; --wx-cloud-ink:#5D5950; --wx-fog:#8A8894; --wx-fog-soft:#F2F2F3; --wx-fog-ink:#615F68; --wx-rain:#567B9B; --wx-rain-soft:#ECF0F4; --wx-rain-ink:#3C566D; --wx-snow:#6E9CAE; --wx-snow-soft:#EFF4F6; --wx-snow-ink:#4D6D7A; --wx-thunder:#6A6191; --wx-thunder-soft:#EFEEF3; --wx-thunder-ink:#4A4466; --wx-night:#46517A; --wx-night-soft:#EBECF0; --wx-night-ink:#313955; /* 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; /* --pdf-paper: the ground behind a rendered PDF page (pdf.js fallback viewer) — real paper white in BOTH themes, because the document's own ink assumes it. */ --pdf-paper:#FFFFFF; --shadow:0 1px 2px rgba(28,26,20,.04), 0 10px 28px rgba(28,26,20,.05); --scrim:rgba(20,18,14,.4); /* drawer / popup / sheet backdrop */ --scrim-strong:rgba(20,18,14,.82); /* file-viewer lightbox backdrop */ --scroll-shadow:rgba(0,0,0,.07); /* edge shadow on scrollable strips */ } [data-theme="dark"]{ color-scheme: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; --wx-sun:#D4B373; --wx-sun-soft:#493D23; --wx-sun-ink:#EAD9B9; --wx-suncloud:#C3B187; --wx-suncloud-soft:#433C2A; --wx-suncloud-ink:#E1D8C3; --wx-cloud:#AAA59C; --wx-cloud-soft:#3A3832; --wx-cloud-ink:#D4D2CE; --wx-fog:#ADACB4; --wx-fog-soft:#3B3A3B; --wx-fog-ink:#D6D5DA; --wx-rain:#89A3B9; --wx-rain-soft:#2D373D; --wx-rain-ink:#C4D1DC; --wx-snow:#9ABAC6; --wx-snow-soft:#344042; --wx-snow-ink:#CCDCE3; --wx-thunder:#9790B2; --wx-thunder-soft:#33303A; --wx-thunder-ink:#CBC8D9; --wx-night:#7E85A2; --wx-night-soft:#292C34; --wx-night-ink:#BEC2D0; /* 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); --scrim:rgba(0,0,0,.55); --scrim-strong:rgba(0,0,0,.85); --scroll-shadow:rgba(255,255,255,.09); }