/* ========================================================================== ClevaTreva dark theme (Dark Mode sprint) One stylesheet, switched on by (theme.js). No markup or script knows about it. Two parts: 1. The UI kit's variables (ui.css :root) get dark values. Band, stat tiles, settings rows, user menu, buttons and choices all follow. The band's own button colours live on .ct-band and are the same in every theme, so they are not touched here. 2. The Tailwind utility colours the views write in their markup (bg-white, text-slate-800, border-slate-200 ...) are re-mapped. Every such class in the app is listed here -- when a view gains a new colour class, add its dark value below. Rules here are `:root[data-theme="dark"] .class` (0,3,0): they outrank a plain utility (0,1,0) and a hover/focus variant (0,2,0) whichever order the sheets load in. Brand, status and gradient colours are kept wherever they already read on a dark surface; only a light tint or a dark text shade is swapped for its translucent / lighter counterpart. Palette: claude/CLEVATREVA_BRAND_COLOURS.md (the "dark" column). ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* theme tokens used below */ --dk-page: #0a1020; --dk-surface: #121a2c; --dk-sunk: #0d1424; --dk-raised: #1b2538; --dk-raised-2: #2a3650; --dk-line: #243047; --dk-line-soft: #1a2437; --dk-line-strong: #33415a; --dk-ink: #e6eaf2; --dk-ink-2: #cdd5e1; --dk-ink-3: #aab5c5; --dk-ink-4: #93a0b4; --dk-ink-5: #7b879b; --dk-ink-6: #5a667b; --dk-ink-7: #3f4b61; --dk-accent: #a995ff; --dk-accent-strong: #c4b5fd; --dk-accent-tint: rgba(138, 115, 243, 0.16); --dk-accent-tint-strong: rgba(138, 115, 243, 0.24); --dk-accent-line: rgba(138, 115, 243, 0.35); /* 1. UI kit (ui.css :root) */ --ct-surface: var(--dk-surface); --ct-surface-muted: var(--dk-sunk); --ct-line: var(--dk-line); --ct-line-soft: var(--dk-line-soft); --ct-ink: var(--dk-ink); --ct-ink-body: var(--dk-ink-3); --ct-ink-muted: var(--dk-ink-4); --ct-ink-faint: var(--dk-ink-5); --ct-accent: var(--dk-accent); --ct-danger: #fb7185; --ct-danger-soft: rgba(244, 63, 94, 0.12); --ct-danger-ink: #fda4af; --ct-shadow: rgba(0, 0, 0, 0.55); --ct-scroll-thumb: var(--dk-line-strong); /* The band stays the most saturated thing on the page: lifted off the near-black page with a brighter gradient and a hairline (below). */ --ct-band-from: #19223c; --ct-band-to: #2b2270; --ct-band-shadow: rgba(0, 0, 0, 0.5); /* Buttons and choices on a dark surface. The primary stays the CT violet; everything else moves to the dark neutrals. */ --ct-btn-primary-shadow: rgba(0, 0, 0, 0.45); --ct-btn-outline-bg: var(--dk-surface); --ct-btn-ink: var(--dk-ink-2); --ct-btn-ink-hover: var(--dk-accent-strong); --ct-btn-line: var(--dk-line); --ct-btn-line-hover: #8a73f3; --ct-btn-fill: var(--dk-raised); --ct-btn-fill-hover: var(--dk-surface); --ct-btn-ghost-ink: var(--dk-ink-4); --ct-btn-ghost-ink-hover: var(--dk-ink); --ct-btn-locked-ink: var(--dk-ink-6); --ct-btn-danger-shadow: rgba(0, 0, 0, 0.45); --ct-btn-danger-line: rgba(244, 63, 94, 0.35); --ct-btn-danger-fill-hover: rgba(244, 63, 94, 0.12); --ct-btn-orange-shadow: rgba(0, 0, 0, 0.45); --ct-btn-hero-shadow: rgba(0, 0, 0, 0.45); --ct-seg-track: var(--dk-sunk); --ct-seg-ink: var(--dk-ink-4); --ct-seg-ink-hover: var(--dk-ink); --ct-seg-on-bg: var(--dk-raised-2); --ct-seg-on-ink: var(--dk-accent-strong); --ct-seg-on-shadow: rgba(0, 0, 0, 0.4); } :root[data-theme="dark"] .ct-band { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 10px 24px -14px rgba(0, 0, 0, 0.7); } /* The danger-outline button's text is the danger colour: lighter on dark. */ :root[data-theme="dark"] .ct-btn.ct-btn--danger-outline { color: #fb7185; } /* -------------------------------------------------------------------------- 2. Page, surfaces -------------------------------------------------------------------------- */ :root[data-theme="dark"] body, :root[data-theme="dark"] body.bg-slate-50 { background-color: var(--dk-page); color: var(--dk-ink); } :root[data-theme="dark"] .bg-white { background-color: var(--dk-surface); } :root[data-theme="dark"] .bg-white\/80 { background-color: rgba(18, 26, 44, 0.85); } :root[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--dk-raised); } :root[data-theme="dark"] .focus\:bg-white:focus { background-color: var(--dk-surface); } :root[data-theme="dark"] .bg-slate-50 { background-color: var(--dk-sunk); } :root[data-theme="dark"] .bg-slate-50\/50 { background-color: rgba(13, 20, 36, 0.5); } :root[data-theme="dark"] .bg-slate-50\/70 { background-color: rgba(13, 20, 36, 0.7); } :root[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: rgba(148, 163, 184, 0.07); } :root[data-theme="dark"] .disabled\:bg-slate-50:disabled { background-color: rgba(13, 20, 36, 0.6); } :root[data-theme="dark"] .bg-slate-100 { background-color: var(--dk-raised); } :root[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: rgba(148, 163, 184, 0.12); } :root[data-theme="dark"] .bg-slate-200 { background-color: var(--dk-raised-2); } :root[data-theme="dark"] .bg-slate-300 { background-color: var(--dk-line-strong); } :root[data-theme="dark"] .bg-slate-400 { background-color: #475569; } /* Dark-by-design surfaces (the Enterprise tier card, the Full Effective Prompt sheet): dark in both themes, lifted to the raised shade here so they still stand off the page. The AI Spend card's slate-900 -> 800 gradient is left as it is; its border is re-mapped below. */ :root[data-theme="dark"] .bg-slate-900 { background-color: var(--dk-raised); } :root[data-theme="dark"] .bg-slate-900 .text-slate-300 { color: var(--dk-ink-2); } :root[data-theme="dark"] .bg-slate-900 .text-slate-400 { color: var(--dk-ink-3); } :root[data-theme="dark"] .bg-slate-900 .text-slate-500 { color: var(--dk-ink-4); } :root[data-theme="dark"] .bg-slate-900 .text-slate-600 { color: var(--dk-ink-5); } :root[data-theme="dark"] .bg-slate-900 .hover\:text-slate-300:hover { color: var(--dk-ink); } /* Modal and drawer overlays */ :root[data-theme="dark"] .bg-slate-900\/40 { background-color: rgba(0, 0, 0, 0.6); } :root[data-theme="dark"] .bg-slate-900\/60 { background-color: rgba(0, 0, 0, 0.7); } /* Lines */ :root[data-theme="dark"] .border-slate-50 { border-color: rgba(148, 163, 184, 0.08); } :root[data-theme="dark"] .border-slate-100 { border-color: var(--dk-line-soft); } :root[data-theme="dark"] .border-slate-200 { border-color: var(--dk-line); } :root[data-theme="dark"] .border-slate-300 { border-color: var(--dk-line-strong); } :root[data-theme="dark"] .border-slate-700 { border-color: var(--dk-line-strong); } :root[data-theme="dark"] .border-slate-800 { border-color: var(--dk-line); } :root[data-theme="dark"] .divide-slate-50 > * + *, :root[data-theme="dark"] .divide-slate-100 > * + * { border-color: var(--dk-line-soft); } /* Text */ :root[data-theme="dark"] .text-slate-900, :root[data-theme="dark"] .text-slate-800 { color: var(--dk-ink); } :root[data-theme="dark"] .text-slate-700 { color: var(--dk-ink-2); } :root[data-theme="dark"] .text-slate-600 { color: var(--dk-ink-3); } :root[data-theme="dark"] .text-slate-500 { color: var(--dk-ink-4); } :root[data-theme="dark"] .text-slate-400 { color: var(--dk-ink-5); } :root[data-theme="dark"] .text-slate-300 { color: var(--dk-ink-6); } :root[data-theme="dark"] .text-slate-200 { color: var(--dk-ink-7); } :root[data-theme="dark"] .text-slate-100 { color: var(--dk-ink); } :root[data-theme="dark"] .hover\:text-slate-600:hover { color: var(--dk-ink-2); } :root[data-theme="dark"] .hover\:text-slate-300:hover { color: var(--dk-ink); } /* Brand (CT violet): text lightens so it reads; fills become tints; the solid brand backgrounds and the focus rings stay as they are. */ :root[data-theme="dark"] .text-brand-500, :root[data-theme="dark"] .text-brand-600 { color: var(--dk-accent); } :root[data-theme="dark"] .text-brand-700, :root[data-theme="dark"] .hover\:text-brand-600:hover, :root[data-theme="dark"] .hover\:text-brand-700:hover { color: var(--dk-accent-strong); } :root[data-theme="dark"] .bg-brand-50, :root[data-theme="dark"] .bg-brand-50\/40, :root[data-theme="dark"] .bg-brand-50\/60 { background-color: var(--dk-accent-tint); } :root[data-theme="dark"] .bg-brand-100 { background-color: var(--dk-accent-tint-strong); } :root[data-theme="dark"] .hover\:bg-brand-50:hover, :root[data-theme="dark"] .hover\:bg-brand-50\/40:hover { background-color: rgba(138, 115, 243, 0.12); } :root[data-theme="dark"] .border-brand-100, :root[data-theme="dark"] .border-brand-200 { border-color: rgba(138, 115, 243, 0.3); } :root[data-theme="dark"] .border-brand-300 { border-color: rgba(138, 115, 243, 0.45); } /* Status tints: translucent fill, lighter text, translucent line. Solid status backgrounds (bg-emerald-500, bg-amber-500 ...), the x-300 / x-400 text shades already used on dark cards, and the focus rings keep their values. */ :root[data-theme="dark"] .bg-emerald-50, :root[data-theme="dark"] .bg-emerald-50\/40 { background-color: rgba(16, 185, 129, 0.12); } :root[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.2); } :root[data-theme="dark"] .text-emerald-600, :root[data-theme="dark"] .text-emerald-700, :root[data-theme="dark"] .text-emerald-800, :root[data-theme="dark"] .hover\:text-emerald-600:hover { color: #6ee7b7; } :root[data-theme="dark"] .text-emerald-500 { color: #34d399; } :root[data-theme="dark"] .border-emerald-100, :root[data-theme="dark"] .border-emerald-200, :root[data-theme="dark"] .border-emerald-300 { border-color: rgba(16, 185, 129, 0.3); } /* Core Engine Drop 6b-3: the Outbox tab's underline and its sent-row glyph. */ :root[data-theme="dark"] .border-emerald-500 { border-color: rgba(16, 185, 129, 0.35); } :root[data-theme="dark"] .text-emerald-400 { color: #34d399; } /* Core Engine Drop 6c: the selected Outbox row's edge. */ :root[data-theme="dark"] .border-emerald-400 { border-color: rgba(16, 185, 129, 0.45); } :root[data-theme="dark"] .bg-amber-50, :root[data-theme="dark"] .bg-amber-50\/30, :root[data-theme="dark"] .bg-amber-50\/40, :root[data-theme="dark"] .bg-amber-50\/70 { background-color: rgba(245, 158, 11, 0.12); } :root[data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2); } :root[data-theme="dark"] .text-amber-600, :root[data-theme="dark"] .text-amber-700, :root[data-theme="dark"] .text-amber-800, :root[data-theme="dark"] .hover\:text-amber-600:hover { color: #fcd34d; } :root[data-theme="dark"] .text-amber-500 { color: #fbbf24; } :root[data-theme="dark"] .border-amber-100, :root[data-theme="dark"] .border-amber-200, :root[data-theme="dark"] .border-amber-300, :root[data-theme="dark"] .border-amber-400, :root[data-theme="dark"] .border-amber-500 { border-color: rgba(245, 158, 11, 0.35); } :root[data-theme="dark"] .bg-rose-50, :root[data-theme="dark"] .bg-rose-50\/40, :root[data-theme="dark"] .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, 0.12); } :root[data-theme="dark"] .bg-rose-100 { background-color: rgba(244, 63, 94, 0.2); } :root[data-theme="dark"] .text-rose-500, :root[data-theme="dark"] .text-rose-600, :root[data-theme="dark"] .text-rose-700, :root[data-theme="dark"] .text-rose-800 { color: #fb7185; } :root[data-theme="dark"] .border-rose-100, :root[data-theme="dark"] .border-rose-200, :root[data-theme="dark"] .border-rose-300 { border-color: rgba(244, 63, 94, 0.3); } :root[data-theme="dark"] .bg-violet-50, :root[data-theme="dark"] .bg-violet-50\/40, :root[data-theme="dark"] .bg-violet-50\/70 { background-color: rgba(139, 92, 246, 0.14); } :root[data-theme="dark"] .bg-violet-100 { background-color: rgba(139, 92, 246, 0.22); } :root[data-theme="dark"] .text-violet-500, :root[data-theme="dark"] .text-violet-600, :root[data-theme="dark"] .text-violet-700 { color: #c4b5fd; } :root[data-theme="dark"] .border-violet-100, :root[data-theme="dark"] .border-violet-200, :root[data-theme="dark"] .border-violet-300 { border-color: rgba(139, 92, 246, 0.3); } :root[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.16); } :root[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.24); } :root[data-theme="dark"] .text-indigo-500, :root[data-theme="dark"] .text-indigo-600 { color: #a5b4fc; } :root[data-theme="dark"] .border-indigo-100, :root[data-theme="dark"] .border-indigo-200 { border-color: rgba(99, 102, 241, 0.32); } :root[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.14); } :root[data-theme="dark"] .text-blue-500 { color: #60a5fa; } :root[data-theme="dark"] .text-blue-700 { color: #93c5fd; } :root[data-theme="dark"] .border-blue-200 { border-color: rgba(59, 130, 246, 0.35); } :root[data-theme="dark"] .bg-sky-50 { background-color: rgba(14, 165, 233, 0.14); } :root[data-theme="dark"] .text-sky-500, :root[data-theme="dark"] .text-sky-600 { color: #7dd3fc; } :root[data-theme="dark"] .bg-orange-50 { background-color: rgba(249, 115, 22, 0.14); } :root[data-theme="dark"] .text-orange-500 { color: #fb923c; } /* Depth: shadows barely show on dark, so cards lean on their border. */ :root[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } :root[data-theme="dark"] .shadow-md, :root[data-theme="dark"] .shadow-lg, :root[data-theme="dark"] .shadow-xl, :root[data-theme="dark"] .shadow-2xl { box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.7); } /* Form controls: sunken field, light text, dim placeholder. The border comes from the element's own border-slate-* class, re-mapped above. */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { color: var(--dk-ink); background-color: var(--dk-sunk); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--dk-ink-6); } /* Toasts (helpers.js showToast) float over whatever is on screen, so their tint must be OPAQUE here: a translucent one let the content underneath bleed through. Dark-tinted surface, light status text. */ :root[data-theme="dark"] #toast-container .bg-emerald-50 { background-color: #0f2b23; } :root[data-theme="dark"] #toast-container .bg-rose-50 { background-color: #33131d; } :root[data-theme="dark"] #toast-container .bg-blue-50 { background-color: #12264a; } :root[data-theme="dark"] #toast-container .text-emerald-700 { color: #a7f3d0; } :root[data-theme="dark"] #toast-container .text-rose-700 { color: #fecdd3; } :root[data-theme="dark"] #toast-container .text-blue-700 { color: #bfdbfe; } :root[data-theme="dark"] #toast-container .border-emerald-200 { border-color: rgba(16, 185, 129, 0.45); } :root[data-theme="dark"] #toast-container .border-rose-200 { border-color: rgba(244, 63, 94, 0.5); } :root[data-theme="dark"] #toast-container .border-blue-200 { border-color: rgba(59, 130, 246, 0.5); }