/* ===================================================================== DARK MODE (from the "02 Terminal" direction, palette only) ===================================================================== Owner 2026-07-30 picked Terminal's colours as dark mode, explicitly NOT its monospace type, uppercase labels or square corners. So this file changes colour and nothing else: fonts, radii and spacing stay as Slate. REVISED same day, on owner request: the amber/gold accent is replaced by DozaBooks green (#00df82), and the darks are the ORIGINAL theme's Rich Black (#0f1115 canvas, #171b21 raised) rather than Terminal's near-black. ⚠ One consequence worth knowing: the accent and "money in" are now the SAME green. Terminal used amber for the interface precisely so green meant one thing only - an amount that came in. With both green, a green button and a green figure carry the same colour and different meanings. Owner's call, noted here so it is a decision rather than an accident. Cards are separated from the canvas by a BORDER, not by luminance: #171b21 on #0f1115 is only 1.09:1 apart, which does not read as a raised surface on its own. That is also how the original light theme does it (--navy-border), so this stays faithful to the palette instead of inventing a lighter grey. WHY THIS FILE IS NOT IN src/ Tailwind silently DISCARDS a custom-property-only rule whose selector is compound. That cost three attempts on the Slate skin: :root[data-skin="slate"] and html[data-skin="slate"] were both dropped from the output with no error, and wrapping them in @layer base made them survive the build but lose the cascade, because unlayered rules beat layered ones. This file lives in public/ and is loaded with a plain in index.html, so Tailwind never processes it. Unprocessed means unprunable, and unlayered means it wins over the :root block in the compiled bundle. That is the whole trick. HOW THE SWITCH WORKS ThemeContext puts data-theme="dark" on and remembers it in localStorage. No component reads colours directly, so nothing else changes. WHY .bg-white IS OVERRIDDEN AND --color-white IS NOT bg-white compiles to background-color:var(--color-white), and so does text-white. Remapping the variable would turn all 226 white cards dark AND turn the 21 white button labels dark with them, which is unreadable. So the card surface is overridden as a rule and the variable is left alone. ===================================================================== */ html[data-theme="dark"] { /* Tailwind neutral ramp, inverted. Every hardcoded text-gray-* / border-gray-* / bg-gray-* class in the app resolves through these, which is what moves ~1700 utility usages without touching a single class name. The ramp runs DARK at the low numbers because the app uses gray-50/100 for raised surfaces and gray-700/900 for text; inverting the scale keeps every one of those readings correct without reversing them by hand. */ --color-gray-50: #171b21; --color-gray-100: #1c2129; --color-gray-200: #2a313a; --color-gray-300: #3a424d; --color-gray-400: #6b7681; --color-gray-500: #9aa4ad; /* dimmed text: 6.82:1 on the #171b21 card */ --color-gray-600: #b6bec6; --color-gray-700: #cdd4da; --color-gray-800: #e1e6ea; --color-gray-900: #f2f5f7; /* strong text */ --color-gray-950: #ffffff; /* Surfaces */ --ink: #f2f5f7; --ink-soft: #9aa4ad; --paper: #0f1115; --paper-raised: #171b21; --paper-border: #2a313a; /* Rail: near-black, a shade darker than the canvas so it still reads as a separate surface rather than merging into the page. */ --navy: #0b0d11; --navy-raised: #171b21; --navy-border: #2a313a; --rail: #0b0d11; --rail-hover: #171b21; --rail-active: #1c2129; --rail-border: #2a313a; --rail-ink: #f2f5f7; --rail-ink-soft: #9aa4ad; --rail-item: transparent; --rail-bare-ink: #7c8792; --bubble-user: #1c2129; --bubble-user-ink: #f2f5f7; /* Accent: DozaBooks green, on owner request, replacing Terminal's amber. On #171b21 the bright green is 9.77:1, so --brass can be the same value here rather than the darkened variant it needs on white. See the note at the top about accent and income now sharing a colour. */ --doza: #00df82; --brass: #00df82; --brass-bright: #00df82; --brass-dim: #00b167; --brass-wash: #0d2a1e; /* Money in / out. Washes are dark tints, not light ones — a light wash on a dark card is a glowing block. */ --forest: #00df82; --forest-wash: #0d2a1e; --brick: #f87171; --brick-wash: #2c1414; --amber: #e0a63a; --amber-wash: #2a2109; } /* Card surfaces. bg-white shares --color-white with text-white, so the class is overridden here instead of the variable. */ html[data-theme="dark"] .bg-white { background-color: #171b21; } /* Cards need a visible edge: #171b21 on #0f1115 is 1.09:1, which is not enough to read as a raised surface. The original light theme separates the same two shades with a border too. */ html[data-theme="dark"] .bg-white.border, html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-gray-100 { border-color: #2a313a; } /* Hover and zebra rows: the app uses light greys for these, which invert to near-black through the ramp above, but these two are literal utilities. */ html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: #1c2129; } html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #222831; } /* Inputs need an explicit dark fill: a white field on a dark form is the single most jarring thing about a half-done dark mode. */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: #0f1115; color: #f2f5f7; border-color: #2a313a; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6b7681; } /* The chat composer and any pure-black fills read as holes on a dark canvas. */ html[data-theme="dark"] .bg-black { background-color: #0b0d11; } /* Tell the browser, so scrollbars and form controls follow. */ html[data-theme="dark"] { color-scheme: dark; }