/* ============================================================================ EstateVault themes Every color the UI uses is a token here. styles.css references ONLY these tokens, so switching [data-theme] on re-skins every page and element (cards, tags, charts, modal, engine log, etc.) with no exceptions. Token groups: surfaces --bg --bg2 --panel --panel2 --line --hero-glow text --ink --muted accents --brand --brand-ink --brand2 --gold --danger overlays --overlay --shadow --log-bg --log-ink --lv-info/success/error tags --tag-*-bg/--tag-*-ink (type, status + 5 availabilities) ============================================================================ */ /* ---- DARK BASE / default (Midnight) -------------------------------------- */ :root, [data-theme="midnight"] { --bg: #0b1220; --bg2: #111a2e; --panel: #16203a; --panel2: #1d2a48; --line: #283656; --hero-glow: #1a2b4d; --ink: #e9eefb; --muted: #93a1c4; --brand: #4f8cff; --brand-ink: #ffffff; --brand2: #38d39f; --gold: #f5b942; --danger: #ff6b6b; --overlay: rgba(4,8,16,.7); --shadow: 0 10px 30px rgba(0,0,0,.35); --log-bg: #060a14; --log-ink: #b9c6e6; --lv-info: #9cc0ff; --lv-success: #79e7c4; --lv-error: #ff9d9d; --tag-type-bg: rgba(79,140,255,.16); --tag-type-ink: #9cc0ff; --tag-status-bg: rgba(56,211,159,.16); --tag-status-ink: #79e7c4; --av-active-bg: rgba(56,211,159,.16); --av-active-ink: #79e7c4; --av-sold-bg: rgba(255,107,107,.16); --av-sold-ink: #ff9d9d; --av-expired-bg: rgba(245,185,66,.16); --av-expired-ink: #ffd27a; --av-removed-bg: rgba(147,161,196,.18); --av-removed-ink: #c2cce4; --av-unavail-bg: rgba(186,120,255,.16); --av-unavail-ink: #d3b3ff; --radius: 14px; color-scheme: dark; } /* ---- Slate (dark, cooler gray) ------------------------------------------- */ [data-theme="slate"] { --bg: #1a1f2b; --bg2: #222936; --panel: #283040; --panel2: #313b4d; --line: #3a4456; --hero-glow: #2b3550; --ink: #e7ebf3; --muted: #9aa6bd; --brand: #6ea8fe; --brand-ink: #0b1220; --brand2: #4fd3a8; --gold: #f3c45a; --danger: #ff7a7a; --log-bg: #11151f; color-scheme: dark; } /* ---- Forest (dark green) ------------------------------------------------- */ [data-theme="forest"] { --bg: #0e1a14; --bg2: #132520; --panel: #173026; --panel2: #1d3b2e; --line: #284a3a; --hero-glow: #16352a; --ink: #e6f2ea; --muted: #8fb3a1; --brand: #46bd84; --brand-ink: #07150d; --brand2: #7fd6a0; --gold: #f0c24f; --danger: #ff8a7a; --log-bg: #08130d; --log-ink: #bfe0cf; --tag-type-bg: rgba(70,189,132,.16); --tag-type-ink: #8fe0b4; --tag-status-bg: rgba(240,194,79,.16); --tag-status-ink: #f0d089; color-scheme: dark; } /* =========================================================================== LIGHT FAMILY — shared overlay / log / tag tokens tuned for light surfaces. Per-theme blocks below only change surfaces + accents. =========================================================================== */ [data-theme="white"], [data-theme="offwhite"], [data-theme="cream"], [data-theme="blue"] { --brand-ink: #ffffff; --overlay: rgba(28,38,58,.45); --shadow: 0 12px 34px rgba(23,38,72,.14); --log-bg: #f3f5fb; --log-ink: #33405e; --lv-info: #2563c9; --lv-success: #0f8a61; --lv-error: #c0392b; --tag-type-bg: #e7efff; --tag-type-ink: #2358c4; --tag-status-bg: #def3ea; --tag-status-ink: #0f8a61; --av-active-bg: #def3ea; --av-active-ink: #0f8a61; --av-sold-bg: #fde2e2; --av-sold-ink: #c0392b; --av-expired-bg: #fbedd1; --av-expired-ink: #8a5e00; --av-removed-bg: #e9edf5; --av-removed-ink: #45567a; --av-unavail-bg: #efe4fc; --av-unavail-ink: #6f37bd; color-scheme: light; } /* ---- White --------------------------------------------------------------- */ [data-theme="white"] { --bg: #ffffff; --bg2: #f6f8fb; --panel: #ffffff; --panel2: #f3f6fa; --line: #e6e9ef; --hero-glow: #eef3ff; --ink: #1f2733; --muted: #6b7280; --brand: #2f6bff; --brand2: #0f9e6f; --gold: #d99a2b; --danger: #d23b3b; } /* ---- Off White ----------------------------------------------------------- */ [data-theme="offwhite"] { --bg: #f4f4f1; --bg2: #ecece8; --panel: #ffffff; --panel2: #f1f1ec; --line: #e2e2db; --hero-glow: #e9e9e2; --ink: #2f3130; --muted: #79807a; --brand: #4f7cff; --brand2: #1f9e72; --gold: #cf9326; --danger: #c83b3b; } /* ---- Cream --------------------------------------------------------------- */ [data-theme="cream"] { --bg: #f6efe0; --bg2: #efe6d3; --panel: #fffaf0; --panel2: #f3ead6; --line: #e4d7bd; --hero-glow: #f3e4c4; --ink: #3b3426; --muted: #897c61; --brand: #c0843a; --brand2: #2f9e6f; --gold: #d99a2b; --danger: #bd3b2c; --av-expired-bg: #f6e6c4; --av-expired-ink: #845200; } /* ---- Blue (light, airy) -------------------------------------------------- */ [data-theme="blue"] { --bg: #eef4fc; --bg2: #e1edf8; --panel: #ffffff; --panel2: #e9f2fc; --line: #cfe0f3; --hero-glow: #d3e6fb; --ink: #15243b; --muted: #5b6f8c; --brand: #1f6fe0; --brand2: #0e9e8f; --gold: #c98a1f; --danger: #cf3b3b; }