/* ================================================================================ ML Software, LLC Copyright 2026. All rights reserved. Life IQ | lifeiq.mlsoftware.com assets/css/theme.css Platform: 0.1.0 Version : 2.1.0 Created : 2026-07-22 Updated : 2026-07-24 Description: LifeIQ brand palette and the six selectable themes. Architecture: the :root block below is the DEFAULT theme (Deep Ink). Every other theme is a [data-theme="..."] block that overrides only what it needs to change. init applies the attribute to at boot from the user's stored preference, so switching is instant - no reload, no re-fetch, no component knows a theme exists. Components read tokens. Nothing in this file is referenced by a selector anywhere else; product.css and the platform CSS consume these variables and never branch on theme. The signal quad is the only palette in the app the user is meant to read as meaning rather than decoration: signal green filled circle. Money, or moves toward money. necessary yellow filled circle. Must be done, advances nothing. unclassified EMPTY circle. Not yet ruled on - a queue. noise red filled circle. Little or no long-term value. unclassified is deliberately a hollow ring rather than a fourth solid color. It has to read as visually incomplete, because a screen with unclassified items on it should look unfinished - that is the nudge to go resolve them. A grey filled dot would look like a legitimate category and stop being noticed. Text size scales the root font. Every component sizes in rem or inherits, so one variable moves the whole app. This gets read at 6am without glasses; it earns its place. Version History: 2.1.0 - 2026-07-24 - Replaced deep-forest palette with graphite (neutral near-black base, indigo accent, clean signal triad). 2.0.0 - 2026-07-22 - Six selectable themes added (deep-ink, blue-on-black, warm-slate, graphite, paper, monochrome) keyed off [data-theme] on . Fourth signal state, unclassified, added to every theme as a hollow ring. Text size scale added. Deep Ink promoted to the :root default. Previous single-palette :root retained as Deep Ink unchanged, so nothing that referenced the old tokens shifts. 1.0.0 - 2026-07-22 - Initial version. ================================================================================ */ /* ========================================================================== TEXT SIZE Scales the root font. Applied to alongside data-theme. The platform readability floors in tokens.css are minimums at medium; small never drops below them because it scales from 16px, not from the floors themselves. ========================================================================== */ html { font-size: 16px; } html[data-text-size="small"] { font-size: 15px; } html[data-text-size="medium"] { font-size: 16px; } html[data-text-size="large"] { font-size: 18px; } html[data-text-size="xlarge"] { font-size: 20px; } /* ========================================================================== DEEP INK - the default. Blue-black base, one warm accent doing brand and Dragon. Keeps the signal colors clean because nothing else on screen competes with them. ========================================================================== */ :root { --accent: #4a9eff; --accent-light: #7ab8ff; --accent-deep: #2b7fdb; --accent-dim: rgba(74, 158, 255, 0.18); --accent-bord: rgba(74, 158, 255, 0.35); --signal: #22c55e; --signal-dim: rgba(34, 197, 94, 0.16); --signal-bord: rgba(34, 197, 94, 0.32); --necessary: #eab308; --necessary-dim: rgba(234, 179, 8, 0.16); --necessary-bord: rgba(234, 179, 8, 0.32); --unclassified: transparent; --unclassified-ring: #6b7280; --unclassified-dim: rgba(107, 114, 128, 0.10); --unclassified-bord: rgba(107, 114, 128, 0.40); --noise: #ef5350; --noise-dim: rgba(239, 83, 80, 0.16); --noise-bord: rgba(239, 83, 80, 0.32); --dragon: #ff8c42; --dragon-dim: rgba(255, 140, 66, 0.14); --dragon-bord: rgba(255, 140, 66, 0.40); --tabbar-h: 56px; --tabbar-bg: rgba(18, 18, 22, 0.92); --tabbar-border: rgba(255, 255, 255, 0.08); } /* ========================================================================== BLUE ON BLACK Cool and clinical. Pure black base, electric blue accent. Reads like a dashboard. Orange Dragon pops hardest here. ========================================================================== */ [data-theme="blue-on-black"] { --bg-base: #000000; --bg-surface: #0c0c0f; --bg-raised: #141419; --bg-overlay: #1c1c22; --border: #23232c; --border-light: #2e2e3a; --accent: #3b82f6; --accent-light: #60a5fa; --accent-deep: #2563eb; --accent-dim: rgba(59, 130, 246, 0.18); --accent-bord: rgba(59, 130, 246, 0.35); --signal: #22c55e; --signal-dim: rgba(34, 197, 94, 0.16); --signal-bord: rgba(34, 197, 94, 0.32); --necessary: #eab308; --necessary-dim: rgba(234, 179, 8, 0.16); --necessary-bord: rgba(234, 179, 8, 0.32); --unclassified: transparent; --unclassified-ring: #6b7280; --unclassified-dim: rgba(107, 114, 128, 0.10); --unclassified-bord: rgba(107, 114, 128, 0.40); --noise: #ef4444; --noise-dim: rgba(239, 68, 68, 0.16); --noise-bord: rgba(239, 68, 68, 0.32); --dragon: #ff8c42; --dragon-dim: rgba(255, 140, 66, 0.14); --dragon-bord: rgba(255, 140, 66, 0.40); --tabbar-bg: rgba(0, 0, 0, 0.94); } /* ========================================================================== WARM SLATE Quiet and less software-looking. Brown-grey base, muted terracotta accent. Easy at 10pm. Signal separation is softer on purpose. ========================================================================== */ [data-theme="warm-slate"] { --bg-base: #14120f; --bg-surface: #1d1a16; --bg-raised: #26221d; --bg-overlay: #2f2a24; --border: #332e27; --border-light: #423b32; --text-primary: #f2eee8; --text-secondary: #bdb4a8; --text-dim: #857c70; --accent: #c87941; --accent-light: #dc9560; --accent-deep: #a35f2f; --accent-dim: rgba(200, 121, 65, 0.18); --accent-bord: rgba(200, 121, 65, 0.35); --signal: #6ba368; --signal-dim: rgba(107, 163, 104, 0.16); --signal-bord: rgba(107, 163, 104, 0.32); --necessary: #d9a441; --necessary-dim: rgba(217, 164, 65, 0.16); --necessary-bord: rgba(217, 164, 65, 0.32); --unclassified: transparent; --unclassified-ring: #857c70; --unclassified-dim: rgba(133, 124, 112, 0.10); --unclassified-bord: rgba(133, 124, 112, 0.45); --noise: #c25b52; --noise-dim: rgba(194, 91, 82, 0.16); --noise-bord: rgba(194, 91, 82, 0.32); --dragon: #d98841; --dragon-dim: rgba(217, 136, 65, 0.14); --dragon-bord: rgba(217, 136, 65, 0.40); --tabbar-bg: rgba(29, 26, 22, 0.94); --tabbar-border: rgba(255, 255, 255, 0.07); } /* ========================================================================== DEEP FOREST Green-black base with an amber accent. Known weakness, documented rather than hidden: a green base forces signal-green to shift toward teal to stay distinguishable from the background, which muddies the one distinction that has to be instant. Kept because it was asked for; it is the first candidate to drop. ========================================================================== */ [data-theme="graphite"] { /* Neutral near-black graphite base. No color cast in the surfaces, so the signal triad and the indigo accent do all the talking. Fills the gap the old deep-forest slot left: a cool, high-contrast dark that is not blue and does not fight its own signal green. */ --bg-base: #0e0e11; --bg-surface: #17171c; --bg-raised: #1f1f26; --bg-overlay: #282830; --border: #2a2a33; --border-light: #3a3a45; --text-primary: #f0f0f4; --text-secondary: #b4b4c2; --text-dim: #7c7c8c; --accent: #8b7cf0; --accent-light: #a99cf6; --accent-deep: #6b5bd0; --accent-dim: rgba(139, 124, 240, 0.18); --accent-bord: rgba(139, 124, 240, 0.38); --signal: #34d399; --signal-dim: rgba(52, 211, 153, 0.16); --signal-bord: rgba(52, 211, 153, 0.34); --necessary: #d9c15a; --necessary-dim: rgba(217, 193, 90, 0.16); --necessary-bord: rgba(217, 193, 90, 0.32); --unclassified: transparent; --unclassified-ring: #7c7c8c; --unclassified-dim: rgba(124, 124, 140, 0.10); --unclassified-bord: rgba(124, 124, 140, 0.45); --noise: #f0605d; --noise-dim: rgba(240, 96, 93, 0.16); --noise-bord: rgba(240, 96, 93, 0.32); /* Amber dragon holds its "different in kind" read against the indigo accent - warm vs cool keeps the two from competing. */ --dragon: #f2953a; --dragon-dim: rgba(242, 149, 58, 0.14); --dragon-bord: rgba(242, 149, 58, 0.40); --tabbar-bg: rgba(23, 23, 28, 0.94); --tabbar-border: rgba(255, 255, 255, 0.07); } /* ========================================================================== PAPER - the only light theme. This is the one that is not just a taste variant. Everything else is dark; this is what works on a sunlit patio and for reading a long weekly report. The signal colors darken here to hold contrast against a light surface - the same hues at dark-theme brightness would wash out and the whole classification would stop being readable. ========================================================================== */ [data-theme="paper"] { --bg-base: #f7f5f0; --bg-surface: #fffefb; --bg-raised: #f0ede6; --bg-overlay: #ffffff; --border: #ddd8ce; --border-light: #c9c3b6; --text-primary: #1a1a1f; --text-secondary: #55555f; --text-dim: #8a8a95; --accent: #c2410c; --accent-light: #ea580c; --accent-deep: #9a3412; --accent-dim: rgba(194, 65, 12, 0.12); --accent-bord: rgba(194, 65, 12, 0.32); --signal: #15803d; --signal-dim: rgba(21, 128, 61, 0.12); --signal-bord: rgba(21, 128, 61, 0.34); --necessary: #a16207; --necessary-dim: rgba(161, 98, 7, 0.12); --necessary-bord: rgba(161, 98, 7, 0.34); --unclassified: transparent; --unclassified-ring: #8a8a95; --unclassified-dim: rgba(138, 138, 149, 0.10); --unclassified-bord: rgba(138, 138, 149, 0.50); --noise: #b91c1c; --noise-dim: rgba(185, 28, 28, 0.12); --noise-bord: rgba(185, 28, 28, 0.34); --dragon: #c2410c; --dragon-dim: rgba(194, 65, 12, 0.10); --dragon-bord: rgba(194, 65, 12, 0.40); /* Light theme leans on shadow where dark leans on border contrast. */ --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18); --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.14); --shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.12); --tabbar-bg: rgba(255, 254, 251, 0.94); --tabbar-border: rgba(0, 0, 0, 0.10); } /* ========================================================================== MONOCHROME No brand color at all. The accent is the text color, so the ONLY hues on screen are signal, necessary, unclassified, and noise. Every colored pixel means something. For an app whose whole argument is subtraction, this is the purest expression of it. ========================================================================== */ [data-theme="monochrome"] { --bg-base: #0a0a0b; --bg-surface: #141416; --bg-raised: #1c1c1f; --bg-overlay: #242428; --border: #2a2a2e; --border-light: #38383e; --text-primary: #fafafa; --text-secondary: #a8a8b0; --text-dim: #6e6e78; /* The accent IS the foreground. No brand hue competes with signal. */ --accent: #fafafa; --accent-light: #ffffff; --accent-deep: #d4d4d8; --accent-dim: rgba(250, 250, 250, 0.12); --accent-bord: rgba(250, 250, 250, 0.28); --signal: #22c55e; --signal-dim: rgba(34, 197, 94, 0.16); --signal-bord: rgba(34, 197, 94, 0.32); --necessary: #eab308; --necessary-dim: rgba(234, 179, 8, 0.16); --necessary-bord: rgba(234, 179, 8, 0.32); --unclassified: transparent; --unclassified-ring: #6e6e78; --unclassified-dim: rgba(110, 110, 120, 0.10); --unclassified-bord: rgba(110, 110, 120, 0.45); --noise: #ef5350; --noise-dim: rgba(239, 83, 80, 0.16); --noise-bord: rgba(239, 83, 80, 0.32); /* Dragon borrows the foreground too - urgency comes from weight and border, not from a warm hue. */ --dragon: #fafafa; --dragon-dim: rgba(250, 250, 250, 0.08); --dragon-bord: rgba(250, 250, 250, 0.45); --tabbar-bg: rgba(20, 20, 22, 0.94); --tabbar-border: rgba(255, 255, 255, 0.09); } /* ========================================================================== SWATCH PREVIEWS The settings picker shows each theme's signal quad without applying that theme. Scoping the tokens to the swatch element lets the four dots inside inherit the right colors while the rest of the app stays on the active theme. Only the four signal tokens are overridden - the swatch previews meaning, not brand. ========================================================================== */ [data-swatch-theme="deep-ink"], [data-swatch-theme="auto"] { --signal: #22c55e; --necessary: #eab308; --unclassified: transparent; --unclassified-ring: #6b7280; --noise: #ef5350; } [data-swatch-theme="blue-on-black"] { --signal: #22c55e; --necessary: #eab308; --unclassified: transparent; --unclassified-ring: #6b7280; --noise: #ef4444; } [data-swatch-theme="warm-slate"] { --signal: #6ba368; --necessary: #d9a441; --unclassified: transparent; --unclassified-ring: #857c70; --noise: #c25b52; } [data-swatch-theme="graphite"] { --signal: #34d399; --necessary: #d9c15a; --unclassified: transparent; --unclassified-ring: #7c7c8c; --noise: #f0605d; } [data-swatch-theme="paper"] { --signal: #15803d; --necessary: #a16207; --unclassified: transparent; --unclassified-ring: #8a8a95; --noise: #b91c1c; } [data-swatch-theme="monochrome"] { --signal: #22c55e; --necessary: #eab308; --unclassified: transparent; --unclassified-ring: #6e6e78; --noise: #ef5350; }