/* =================================================================================== BABUBA THEME - dark-first, warm-black, single lime accent. GENERATED by ops/gen-theme.py - do not hand-edit the token block; edit the ramps there and re-run. Loaded AFTER the bundle stylesheet, and deliberately UNLAYERED: Tailwind ships its tokens inside @layer theme, and unlayered declarations outrank layered ones regardless of source order. So these values win without !important anywhere. =================================================================================== */ html.dark { --color-amber-100: #2A2009; --color-amber-200: #3A2C0C; --color-amber-300: #F7BC5C; --color-amber-400: #F6B043; --color-amber-50: #1F1808; --color-amber-500: #F5A623; --color-amber-600: #F5A623; --color-amber-700: #E0911A; --color-amber-800: #B87414; --color-amber-900: #8A570F; --color-amber-950: #4A2E08; --color-blue-100: #16161A; --color-blue-200: #26262B; --color-blue-300: #33333A; --color-blue-400: #8A8A93; --color-blue-50: #0E0E10; --color-blue-500: #A2A2AA; --color-blue-600: #BDBDB6; --color-blue-700: #D4D4CD; --color-blue-800: #E8E8E2; --color-cyan-600: #BDBDB6; --color-cyan-700: #D4D4CD; --color-emerald-100: #10241B; --color-emerald-200: #153122; --color-emerald-300: #4FC79B; --color-emerald-400: #2AB483; --color-emerald-50: #0C1A15; --color-emerald-500: #0F9D6C; --color-emerald-600: #0F9D6C; --color-emerald-700: #0C835A; --color-emerald-800: #0A6A49; --color-emerald-900: #085238; --color-emerald-950: #04301F; --color-gray-100: #16161A; --color-gray-200: #26262B; --color-gray-300: #33333A; --color-gray-400: #8A8A93; --color-gray-50: #0E0E10; --color-gray-500: #A2A2AA; --color-gray-600: #BDBDB6; --color-gray-700: #D4D4CD; --color-gray-800: #E8E8E2; --color-gray-900: #F2F2EE; --color-green-100: #10241B; --color-green-200: #153122; --color-green-300: #4FC79B; --color-green-400: #2AB483; --color-green-50: #0C1A15; --color-green-500: #0F9D6C; --color-green-600: #0F9D6C; --color-green-700: #0C835A; --color-indigo-100: #1D2612; --color-indigo-200: #2A3719; --color-indigo-300: #DCF89B; --color-indigo-400: #D3F573; --color-indigo-50: #151A0E; --color-indigo-500: #C9F24B; --color-indigo-600: #C9F24B; --color-indigo-700: #B8E336; --color-indigo-800: #9BC72B; --color-indigo-900: #7EA321; --color-indigo-950: #4F6715; --color-neutral-100: #16161A; --color-neutral-200: #26262B; --color-neutral-300: #33333A; --color-neutral-400: #8A8A93; --color-neutral-50: #0E0E10; --color-neutral-500: #A2A2AA; --color-neutral-600: #BDBDB6; --color-neutral-700: #D4D4CD; --color-neutral-800: #E8E8E2; --color-neutral-900: #F2F2EE; --color-neutral-950: #FAFAF6; --color-orange-100: #2A2009; --color-orange-200: #3A2C0C; --color-orange-400: #F6B043; --color-orange-50: #1F1808; --color-orange-500: #F5A623; --color-orange-700: #E0911A; --color-pink-200: #26262B; --color-pink-50: #0E0E10; --color-pink-700: #D4D4CD; --color-purple-100: #16161A; --color-purple-200: #26262B; --color-purple-400: #8A8A93; --color-purple-50: #0E0E10; --color-purple-500: #A2A2AA; --color-purple-600: #BDBDB6; --color-purple-700: #D4D4CD; --color-purple-800: #E8E8E2; --color-red-100: #2A1618; --color-red-200: #3A1D20; --color-red-300: #F08A8D; --color-red-400: #EE6A6E; --color-red-50: #1F1213; --color-red-500: #E5484D; --color-red-600: #D93A3F; --color-red-700: #BE3035; --color-red-800: #9C272B; --color-red-900: #7A1F22; --color-red-950: #421012; --color-rose-100: #2A1618; --color-rose-200: #3A1D20; --color-rose-300: #F08A8D; --color-rose-400: #EE6A6E; --color-rose-50: #1F1213; --color-rose-500: #E5484D; --color-rose-600: #D93A3F; --color-rose-700: #BE3035; --color-rose-800: #9C272B; --color-rose-900: #7A1F22; --color-rose-950: #421012; --color-sky-100: #16161A; --color-sky-200: #26262B; --color-sky-300: #33333A; --color-sky-400: #8A8A93; --color-sky-50: #0E0E10; --color-sky-500: #A2A2AA; --color-sky-600: #BDBDB6; --color-sky-700: #D4D4CD; --color-sky-800: #E8E8E2; --color-sky-900: #F2F2EE; --color-sky-950: #FAFAF6; --color-slate-100: #E8E8E2; /* was #1A1A1E: dark:text-slate-100 is the app's primary text token in dark mode - a dark value made every title/subtitle invisible on the 1E1E22 panels */ --color-slate-200: #C4C4CC; /* was #222227: dark:text-slate-200 pairs with text-gray-700 (the Refresh buttons) - a dark value made it invisible */ --color-slate-300: #D4D4CD; --color-slate-400: #A2A2AA; --color-slate-50: #141417; --color-slate-500: #8A8A93; --color-slate-600: #6E6E76; --color-slate-700: #26262B; --color-slate-800: #1E1E22; --color-slate-900: #0A0A0B; --color-slate-950: #060607; --color-teal-100: #10241B; --color-teal-200: #153122; --color-teal-50: #0C1A15; --color-teal-600: #0F9D6C; --color-teal-700: #0C835A; --color-violet-100: #16161A; --color-violet-200: #26262B; --color-violet-400: #8A8A93; --color-violet-50: #0E0E10; --color-violet-500: #A2A2AA; --color-violet-600: #BDBDB6; --color-violet-700: #D4D4CD; --color-violet-950: #FAFAF6; --color-yellow-100: #2A2009; --color-yellow-200: #3A2C0C; --color-yellow-300: #F7BC5C; --color-yellow-400: #F6B043; --color-yellow-50: #1F1808; --color-yellow-500: #F5A623; --color-yellow-600: #F5A623; --color-yellow-700: #E0911A; --color-white: #E8E8E2; --color-black: #0A0A0B; --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif; --bb-ink: #0A0A0B; --bb-panel: #1E1E22; --bb-lime: #C9F24B; --bb-text: #E8E8E2; --bb-amber: #F5A623; --bb-green: #0F9D6C; --bb-muted: #8A8A93; --bb-line: #26262B; } /* BASE - warm black, never pure black; warm off-white, never pure white */ html.dark, html.dark body { background: var(--bb-ink); color: var(--bb-text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } /* LIME TRAP: 4 accent-fill class tokens, 76 of them paired with text-white. On #C9F24B white text is ~1.3:1. Force ink, and let descendants inherit it. */ html.dark [class~="bg-indigo-500"],html.dark [class~="bg-indigo-600"],html.dark [class~="hover:bg-indigo-600"],html.dark [class~="hover:bg-indigo-700"] { color: var(--bb-ink); } html.dark [class~="bg-indigo-500"] *,html.dark [class~="bg-indigo-600"] *,html.dark [class~="hover:bg-indigo-600"] *,html.dark [class~="hover:bg-indigo-700"] * { color: inherit; } html.dark [class~="bg-indigo-500"],html.dark [class~="bg-indigo-600"],html.dark [class~="hover:bg-indigo-600"],html.dark [class~="hover:bg-indigo-700"]:hover { color: var(--bb-ink); } /* bg-white is a SURFACE in a light-first app, so in dark-first it becomes a lifted panel. (--color-white itself stays warm off-white because text-white must stay readable.) */ html.dark [class~="bg-white"] { background-color: var(--bb-panel); } /* bg-gray-900 is a dark BUTTON surface paired with text-white; the dark palette inverts the gray-900 token to #F2F2EE, which left those buttons light-on-light (New Customer, Month selector). Pin the fill, keep the light ink. */ html.dark [class~="bg-gray-900"] { background-color: var(--bb-panel); } /* FLAT - no gradients, no shadows, rounded cards */ html.dark *, html.dark *::before, html.dark *::after { box-shadow: none !important; } html.dark [class*="bg-gradient"], html.dark [class*="from-"], html.dark [class*="via-"], html.dark [class*="to-"] { background-image: none !important; } html.dark [class*="shadow"] { box-shadow: none !important; filter: none !important; } html.dark [class*="backdrop-blur"] { backdrop-filter: blur(6px); } html.dark [class*="rounded-2xl"], html.dark [class*="rounded-xl"] { border-radius: 14px; } html.dark [class*="rounded-lg"] { border-radius: 10px; } /* SIDEBAR - icon-led, flat, lime for the active item only */ html.dark aside, html.dark nav[class*="sidebar"], html.dark [class*="w-64"], html.dark [class*="w-56"] { border-right: 1px solid var(--bb-line); background: #1E1E22; } html.dark [aria-current="page"], html.dark [class*="bg-lime-"], html.dark [class*="bg-indigo-6"] { border-radius: 10px; } /* SCROLLBARS - low-gloss, matching the shell */ html.dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.dark ::-webkit-scrollbar-track { background: transparent; } html.dark ::-webkit-scrollbar-thumb { background: #2E2E34; border-radius: 10px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #3A3A42; } /* SELECTION */ html.dark ::selection { background: #C9F24B; color: var(--bb-ink); } html.dark *:focus-visible { outline: 2px solid #C9F24B; outline-offset: 2px; border-radius: 6px; } /* =================================================================================== BABUBA CONTROL-PANEL CONTROL TOKENS (--ba-*) Appended 2026-09-29. Hand-patched components (Broker Accounts and any future one) must colour themselves from THESE, never from the theme's --color-* ramp: that ramp is remapped per theme, so a literal or a var(--color-*) can be right in dark and invisible in light. These carry an explicit value for BOTH themes, which is the only way one inline style can be correct in two modes. Light values are dark-on-cream. Dark values are the warm-black palette. =================================================================================== */ :root { --ba-fg: #18181b; /* button + body text on a transparent surface */ --ba-dim: #52525b; /* secondary / clear button */ --ba-border: #c4c4cc; /* button hairline, visible on cream */ --ba-code: #3f6212; /* the 6-digit TOTP code - dark olive, reads on cream */ --ba-code-bg: #f1f1ec; /* the code block's own surface */ --ba-green: #047857; /* solid buttons - emerald-700 for white-text contrast */ --ba-blue: #0369a1; --ba-violet: #6d28d9; } html.dark { --ba-fg: #E8E8E2; --ba-dim: #C4C4CC; --ba-border: #52525b; --ba-code: #C9F24B; /* lime - the house accent */ --ba-code-bg: #15170e; /* opaque olive-black - a translucent tint makes the code un-measurable */ --ba-green: #047857; /* emerald-700, not 600: #059669 is only 3.77:1 with white */ --ba-blue: #0369a1; --ba-violet: #6d28d9; } /* ----------------------------------------------------------------------------------- PLACEHOLDER + DANGER TEXT (appended 2026-09-29) The bundle ships no ::placeholder rule, so the browser default applied: a light grey that measured 2.60:1 on cream. And red "Retry"/danger surfaces pair a rose text token with a rose fill, which in dark mode measured 1.98:1 (light rose on rose). ----------------------------------------------------------------------------------- */ :root { --ba-placeholder: #6b7280; --ba-on-danger: #ffffff; } html.dark { --ba-placeholder: #8b8b93; --ba-on-danger: #ffffff; } /* Inline-styled buttons in the chunks use var(--btn-bg, #fff) and var(--border, #d1d5db). Neither variable was ever declared, so dark mode kept WHITE buttons under the theme's near-white ink (Cohorts, Payments, RBAC...). */ :root { --btn-bg: #ffffff; --border: #d1d5db; } html.dark { --btn-bg: #1E1E22; --border: #52525b; } input::placeholder, textarea::placeholder { color: var(--ba-placeholder); opacity: 1; } /* any element that FILLS with a red/rose/danger background must carry readable ink */ [class~="bg-rose-500"], [class~="bg-rose-600"], [class~="bg-red-500"], [class~="bg-red-600"], [class~="bg-rose-700"], [class~="bg-red-700"] { color: var(--ba-on-danger) !important; } [class~="bg-rose-500"] *, [class~="bg-rose-600"] *, [class~="bg-red-500"] *, [class~="bg-red-600"] *, [class~="bg-rose-700"] *, [class~="bg-red-700"] * { color: inherit !important; } /* ----------------------------------------------------------------------------------- MUTED TEXT + SOLID DANGER FILLS (appended 2026-09-29) 1. `text-gray-400` is the panel's muted token (the "Search… Ctrl K" trigger and dozens of hints). On cream it measured 2.60:1. Darkened for LIGHT ONLY - the dark theme already pairs it with dark:text-slate-500. 2. A rose-on-rose pair (text-rose-300 on bg-rose-500) measured 1.98:1 in dark: text and fill were the same hue. Any SOLID red/rose fill now carries white ink. The :not([class*="/"]) guard skips translucent tints, where white would be wrong. ----------------------------------------------------------------------------------- */ /* text-gray-300 is the app's faintest hint/dash token (table dashes, "no thumbnail", "0 chars"). On cream it measured 1.47:1 - effectively invisible. */ html:not(.dark) [class~="text-gray-300"] { color: #6b7280; } html:not(.dark) [class~="text-gray-400"] { color: #5b6169; } html:not(.dark) [class~="text-gray-500"] { color: #4b5563; } /* The palette inverts the gray-100/200/300 STEPS to dark surfaces, but the app also uses them for faint TEXT (hints, table dashes, stat numbers) with no dark: pairing. Result in dark mode: #16161A / #26262B / #33333A ink on a #1E1E22 panel (~1.1:1). Word-match on text-* only, so bg-gray-* surfaces are untouched. */ html.dark [class~="text-gray-100"], html.dark [class~="text-gray-200"], html.dark [class~="text-gray-300"] { color: #A2A2AA; } /* Solid emerald fills in dark mode resolved to #0F9D6C - white ink measured 2.8:1. Use emerald-700 as the fill (theme's own note: #059669 is only 3.77:1 with white). */ html.dark [class~="bg-emerald-500"], html.dark [class~="bg-emerald-600"], html.dark [class~="bg-green-600"] { background-color: #047857; } /* Same inversion trap on the coloured cards (RBAC hero card, banners): the pale purple/indigo steps the app uses for TEXT turn into dark surfaces, and the solid purple/amber fills turn light so their text-white vanished. */ html.dark [class~="text-purple-100"], html.dark [class~="text-purple-200"], html.dark [class~="text-purple-300"], html.dark [class~="text-violet-100"], html.dark [class~="text-violet-200"], html.dark [class~="text-indigo-100"], html.dark [class~="text-indigo-200"] { color: #C4C4CC; } html.dark [class~="bg-purple-500"], html.dark [class~="bg-purple-600"], html.dark [class~="bg-purple-700"], html.dark [class~="bg-violet-500"], html.dark [class~="bg-violet-600"], html.dark [class~="bg-yellow-400"], html.dark [class~="bg-yellow-500"], html.dark [class~="bg-amber-400"], html.dark [class~="bg-amber-500"], html.dark [class~="bg-lime-400"], html.dark [class~="bg-lime-500"] { color: var(--bb-ink); } html.dark [class~="bg-purple-500"] *, html.dark [class~="bg-purple-600"] *, html.dark [class~="bg-purple-700"] *, html.dark [class~="bg-violet-500"] *, html.dark [class~="bg-violet-600"] *, html.dark [class~="bg-yellow-400"] *, html.dark [class~="bg-yellow-500"] *, html.dark [class~="bg-amber-400"] *, html.dark [class~="bg-amber-500"] *, html.dark [class~="bg-lime-400"] *, html.dark [class~="bg-lime-500"] * { color: inherit; } /* FIXED: the substring form [class*="bg-rose-"] also matched hover:bg-rose-50, dark:bg-rose-* etc, forcing #ffffff !important onto danger TEXT buttons (text-rose-600 + hover:bg-rose-50) -> white-on-white. The exact-word rule further up already gives solid 500/600/700 fills their white ink. */