/* ============================================================ THEMES — loaded last so these win over the base :root tokens. Applied by setting (see js/theme.js). 'default' needs no block — it's the base palette in tokens.css. Each theme only re-points design tokens (+ the few themeable chrome surfaces added to tokens.css). Because every component reads from tokens, the whole app re-skins from here without touching component CSS. ============================================================ */ /* ---------------- NIGHT (dark) ---------------- */ html[data-theme="dark"]{ color-scheme: dark; --paper: #14171F; --paper-raised: #1C212C; --paper-sunken: #0F131A; --ink: #E7EAF1; --ink-soft: #A9B0BF; --ink-faint: #6E7686; --line: #2A3040; --line-strong: #3A4152; --stamp-green: #4FB07A; --stamp-green-bg: #16281F; --stamp-red: #E06A5B; --stamp-red-bg: #2E1A18; --stamp-amber: #E0A64A; --stamp-amber-bg: #2C2415; --stamp-navy: #6E9BE0; --stamp-navy-bg: #182339; --accent: #5B8DEF; --accent-hover: #6E9BF2; --accent-soft: #1E2C46; --glass-bg: rgba(20,23,31,0.63); --glass-bg-dark: rgba(10,12,18,0.63); --glass-border: rgba(255,255,255,0.08); /* chrome surfaces */ --sidebar-bg: #0C0F16; --topbar-bg: rgba(20,23,31,0.82); --mobile-topbar-bg: rgba(20,23,31,0.90); --nav-indicator-bg: rgba(255,255,255,0.14); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 14px rgba(0,0,0,0.45); --shadow-lg: 0 12px 32px rgba(0,0,0,0.55); /* In dark, --ink is a light color — so the default ink-backed toast would be a near-white pill with white text. Give it a real dark surface instead. */ --toast-bg: #2B3242; --toast-fg: #EDEFF4; } html[data-theme="dark"] #toast{ border: 1px solid var(--line-strong); } /* overpaid "blue" reads too dark on the night background — lift it */ html[data-theme="dark"] .info-row .val.blue, html[data-theme="dark"] .stat-card .value.blue, html[data-theme="dark"] .calc-total-value.blue{ color: #5B8DEF; } /* the splash + status bar hint should read dark too */ html[data-theme="dark"] #app-splash{ background: var(--paper); } html[data-theme="dark"] .status-dot.overpaid{ background: #5B8DEF; } /* ---------------- PASTEL (mid) ---------------- Warm-lilac paper with a soft violet accent. --ink stays a deep plum, so the sidebar (which reads --ink via --sidebar-bg) becomes an elegant dark-plum without any extra overrides. */ html[data-theme="pastel"]{ color-scheme: light; --paper: #F3EEF7; --paper-raised: #FCFAFE; --paper-sunken: #E9E0F1; --ink: #3B3252; --ink-soft: #6C6382; --ink-faint: #A79FB6; --line: #E4DAEF; --line-strong: #D2C6E1; --stamp-green: #3E9E6E; --stamp-green-bg: #E3F1E9; --stamp-red: #C85A5A; --stamp-red-bg: #F7E6E6; --stamp-amber: #C08A3E; --stamp-amber-bg: #F5ECDA; --stamp-navy: #6A5BC0; --stamp-navy-bg: #E9E4F7; --accent: #8B6FCB; --accent-hover: #765AB8; --accent-soft: #EBE2F7; --glass-bg: rgba(252,250,254,0.63); --glass-border: rgba(255,255,255,0.6); --topbar-bg: rgba(243,238,247,0.86); --mobile-topbar-bg: rgba(243,238,247,0.92); --nav-indicator-bg: rgba(225,225,225,0.92); } /* ---------------- Theme picker swatches (Preferences) ---------------- */ .theme-swatch{ width: 18px; height: 18px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle; flex-shrink: 0; border: 1.5px solid rgba(0,0,0,0.30); overflow: hidden; } /* Left half = paper, right half = accent, split by a hairline so both read clearly even when one half is close to the chip's own background colour. */ .theme-swatch[data-sw="default"]{ background: linear-gradient(90deg,#EFF1EE 0 calc(50% - 0.5px), #C9CEC4 calc(50% - 0.5px) calc(50% + 0.5px), #2A4C7A calc(50% + 0.5px) 100%); } .theme-swatch[data-sw="dark"]{ background: linear-gradient(90deg,#1B1F29 0 calc(50% - 0.5px), #454B58 calc(50% - 0.5px) calc(50% + 0.5px), #5B8DEF calc(50% + 0.5px) 100%); } .theme-swatch[data-sw="pastel"]{ background: linear-gradient(90deg,#F3EEF7 0 calc(50% - 0.5px), #D6CBE2 calc(50% - 0.5px) calc(50% + 0.5px), #8B6FCB calc(50% + 0.5px) 100%); } .chip.active .theme-swatch{ border-color: rgba(255,255,255,0.9); } /* ---------------- SHOW / HIDE DOTS ---------------- When off, the little colored circles (payment status + side/type dots) are hidden everywhere. Status is still conveyed by the colored status text and name color, so nothing is actually lost — it's a quieter look. */ body.dots-hidden .status-dot, body.dots-hidden .type-dot, body.dots-hidden .team-chip-dot, body.dots-hidden .cal-today-dot{ display: none !important; }