/* * SelfBuilder theme layer — light/dark design tokens. * * Strategy: every Tailwind palette entry the app references is wired to a * CSS custom property in tailwind.config.mjs * (`rgb(var(--x-channels) / )` where opacity modifiers are * used, plain `var()` otherwise). This file defines those variables: * * - :root → light values, identical literals to the old config, * so light mode renders exactly as before, only with * the accent retinted teal (License-Management ref). * - [data-theme=dark] → deep-slate surfaces + one step brighter status * ramps around the same teal accent. Set on * by the inline boot script in base.html (no FOUC) * and toggled by the topbar theme button (app.js); * persisted in localStorage, defaults to the OS * prefers-color-scheme. * * Islands that are intentionally dark in BOTH themes (modal backdrops, * toast, tooltips, the signup brand panel) keep literal slate-900/950 * colors; the few variable-driven utilities that would flip wrongly * inside them are pinned here. * * Load AFTER static/css/tailwind.css in base.html. */ :root { color-scheme: light; /* ---- Surfaces -------------------------------------------------------- */ --canvas: #f8fafc; --canvas-channels: 248 250 252; --surface: #ffffff; --surface-channels: 255 255 255; --elevated: #f1f5f9; --elevated-channels: 241 245 249; /* ---- Ink -------------------------------------------------------------- */ --ink: #0f172a; --ink-channels: 15 23 42; --ink-secondary: #475569; --ink-muted: #64748b; --ink-faint: #94a3b8; /* ---- Lines ------------------------------------------------------------ */ --line: #e2e8f0; --line-strong: #cbd5e1; /* ---- Accent (teal, per the License-Management reference) -------------- */ --accent: #0f766e; --accent-channels: 15 118 110; --accent-hover: #115e59; --accent-soft: #ccfbf1; --accent-50: #f0fdfa; --accent-100: #ccfbf1; --accent-200: #99f6e4; --accent-300: #5eead4; --accent-400: #2dd4bf; --accent-500: #14b8a6; --accent-600: #0d9488; --accent-700: #0f766e; --accent-ring: rgba(13, 148, 136, .35); /* ---- Status ramp (dots / solid fills) ---------------------------------- */ --status-running: #10b981; --status-running-channels: 16 185 129; --status-queued: #f59e0b; --status-queued-channels: 245 158 11; --status-idle: #0ea5e9; --status-idle-channels: 14 165 233; --status-sleeping: #94a3b8; --status-sleeping-channels: 148 163 184; --status-dead: #f43f5e; --status-dead-channels: 244 63 94; --status-created: #818cf8; --status-created-channels: 129 140 248; /* ---- Raw palette (identity with the old literals in light) ------------- */ --p-slate-50: #f8fafc; --p-slate-50-channels: 248 250 252; --p-slate-100: #f1f5f9; --p-slate-100-channels: 241 245 249; --p-slate-200: #e2e8f0; --p-slate-200-channels: 226 232 240; --p-slate-300: #cbd5e1; --p-slate-400: #94a3b8; --p-slate-500: #64748b; --p-slate-500-channels: 100 116 139; --p-slate-600: #475569; --p-slate-700: #334155; --p-slate-900: #0f172a; --p-slate-900-channels: 15 23 42; --p-slate-950: #020617; --p-white: #ffffff; --p-white-channels: 255 255 255; --p-emerald-50: #ecfdf5; --p-emerald-50-channels: 236 253 245; --p-emerald-100: #d1fae5; --p-emerald-200: #a7f3d0; --p-emerald-400: #34d399; --p-emerald-500: #10b981; --p-emerald-500-channels: 16 185 129; --p-emerald-600: #059669; --p-emerald-700: #047857; --p-emerald-800: #065f46; --p-amber-50: #fffbeb; --p-amber-50-channels: 255 251 235; --p-amber-100: #fef3c7; --p-amber-200: #fde68a; --p-amber-500: #f59e0b; --p-amber-500-channels: 245 158 11; --p-amber-600: #d97706; --p-amber-700: #b45309; --p-amber-800: #92400e; --p-rose-50: #fff1f2; --p-rose-50-channels: 255 241 242; --p-rose-100: #ffe4e6; --p-rose-200: #fecdd3; --p-rose-300: #fda4af; --p-rose-500: #f43f5e; --p-rose-500-channels: 244 63 94; --p-rose-600: #e11d48; --p-rose-700: #be123c; --p-rose-800: #9f1239; --p-sky-50: #f0f9ff; --p-sky-50-channels: 240 249 255; --p-sky-100: #e0f2fe; --p-sky-200: #bae6fd; --p-sky-500: #0ea5e9; --p-sky-500-channels: 14 165 233; --p-sky-600: #0284c7; --p-sky-700: #0369a1; --p-sky-800: #075985; --p-orange-50: #fff7ed; --p-orange-50-channels: 255 247 237; --p-orange-100: #ffedd5; --p-orange-200: #fed7aa; --p-orange-700: #c2410c; --p-violet-50: #f5f3ff; --p-violet-50-channels: 245 243 255; --p-violet-600: #7c3aed; /* Legacy indigo alias — retinted onto the teal ladder in BOTH themes so old indigo utility names follow the new accent. */ --p-indigo-50: #f0fdfa; --p-indigo-50-channels: 240 253 250; --p-indigo-100: #ccfbf1; --p-indigo-200: #99f6e4; --p-indigo-300: #5eead4; --p-indigo-400: #2dd4bf; --p-indigo-500: #14b8a6; --p-indigo-600: #0d9488; --p-indigo-700: #0f766e; --p-indigo-800: #115e59; /* Tints that sit INSIDE solid-accent surfaces (user chat bubble). */ --accent-on-solid: rgba(255 255 255 / .15); --accent-on-solid-text: #ccfbf1; --accent-on-solid-muted: #99f6e4; /* ---- Elevation ---------------------------------------------------------- */ --card-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 4px 16px -4px rgb(15 23 42 / 0.08); --lift-shadow: 0 4px 12px -2px rgb(15 23 42 / 0.10), 0 12px 32px -8px rgb(15 23 42 / 0.12); } /* * Dark theme — deep slate floor, elevated cards, same teal accent nudged one * step brighter. Status chips flip from "-50 tint + -700 ink" to * "translucent fill + bright ink" automatically because both halves of each * pair are variables. */ [data-theme="dark"] { color-scheme: dark; --canvas: #0b1120; --canvas-channels: 11 17 32; --surface: #141d30; --surface-channels: 20 29 48; --elevated: #1c2840; --elevated-channels: 28 40 64; --ink: #e6edf6; --ink-secondary: #a7b4c9; --ink-muted: #8494ac; --ink-faint: #64748b; --line: #273349; --line-strong: #3b4a63; --accent: #14b8a6; --accent-channels: 20 184 166; --accent-hover: #2dd4bf; --accent-soft: rgba(20, 184, 166, .14); --accent-50: rgba(20, 184, 166, .12); --accent-100: rgba(20, 184, 166, .16); --accent-200: rgba(20, 184, 166, .30); --accent-300: #2dd4bf; --accent-400: #2dd4bf; --accent-500: #14b8a6; --accent-600: #14b8a6; --accent-700: #5eead4; --accent-ring: rgba(45, 212, 191, .45); --status-running: #34d399; --status-running-channels: 52 211 153; --status-queued: #fbbf24; --status-queued-channels: 251 191 36; --status-idle: #38bdf8; --status-idle-channels: 56 189 248; --status-sleeping: #7c8aa0; --status-sleeping-channels: 124 138 160; --status-dead: #fb7185; --status-dead-channels: 251 113 133; --status-created: #7dd3fc; --status-created-channels: 125 211 252; --p-slate-50: #101828; --p-slate-50-channels: 16 24 40; --p-slate-100: #1c2840; --p-slate-100-channels: 28 40 64; --p-slate-200: #273349; --p-slate-200-channels: 39 51 73; --p-slate-300: #3b4a63; --p-slate-400: #64748b; --p-slate-500: #8494ac; --p-slate-500-channels: 132 148 172; --p-slate-600: #a7b4c9; --p-slate-700: #c3cddc; /* slate-900 stays dark — it's only used on intentionally-dark islands (modal/drawer backdrops, toast, tooltips, signup brand panel). */ --p-slate-900: #0f172a; --p-slate-900-channels: 15 23 42; --p-slate-950: #020617; --p-white: #141d30; --p-white-channels: 20 29 48; --p-emerald-50: rgba(52, 211, 153, .12); --p-emerald-50-channels: 52 211 153; --p-emerald-100: rgba(52, 211, 153, .18); --p-emerald-200: rgba(52, 211, 153, .32); --p-emerald-400: #34d399; --p-emerald-500: #34d399; --p-emerald-500-channels: 52 211 153; --p-emerald-600: #6ee7b7; --p-emerald-700: #6ee7b7; --p-emerald-800: #a7f3d0; --p-amber-50: rgba(251, 191, 36, .12); --p-amber-50-channels: 251 191 36; --p-amber-100: rgba(251, 191, 36, .18); --p-amber-200: rgba(251, 191, 36, .32); --p-amber-500: #fbbf24; --p-amber-500-channels: 251 191 36; --p-amber-600: #fcd34d; --p-amber-700: #fcd34d; --p-amber-800: #fde68a; --p-rose-50: rgba(251, 113, 133, .12); --p-rose-50-channels: 251 113 133; --p-rose-100: rgba(251, 113, 133, .18); --p-rose-200: rgba(251, 113, 133, .32); --p-rose-300: rgba(251, 113, 133, .5); --p-rose-500: #fb7185; --p-rose-500-channels: 251 113 133; --p-rose-600: #fb7185; --p-rose-700: #fda4af; --p-rose-800: #fecdd3; --p-sky-50: rgba(56, 189, 248, .12); --p-sky-50-channels: 56 189 248; --p-sky-100: rgba(56, 189, 248, .18); --p-sky-200: rgba(56, 189, 248, .32); --p-sky-500: #38bdf8; --p-sky-500-channels: 56 189 248; --p-sky-600: #7dd3fc; --p-sky-700: #7dd3fc; --p-sky-800: #bae6fd; --p-orange-50: rgba(251, 146, 60, .12); --p-orange-50-channels: 251 146 60; --p-orange-100: rgba(251, 146, 60, .18); --p-orange-200: rgba(251, 146, 60, .32); --p-orange-700: #fdba74; --p-violet-50: rgba(167, 139, 250, .14); --p-violet-50-channels: 167 139 250; --p-violet-600: #a78bfa; --p-indigo-50: rgba(20, 184, 166, .12); --p-indigo-50-channels: 20 184 166; --p-indigo-100: rgba(20, 184, 166, .18); --p-indigo-200: rgba(20, 184, 166, .32); --p-indigo-300: #2dd4bf; --p-indigo-400: #2dd4bf; --p-indigo-500: #14b8a6; --p-indigo-600: #14b8a6; --p-indigo-700: #5eead4; --p-indigo-800: #99f6e4; --accent-on-solid: rgba(255 255 255 / .16); --accent-on-solid-text: #ccfbf1; --accent-on-solid-muted: #99f6e4; --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.45), 0 4px 16px -4px rgb(0 0 0 / 0.5); --lift-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.55), 0 12px 32px -8px rgb(0 0 0 / 0.65); } /* ========================================================================== * Pinned islands + button discipline (dark only; light keeps the build's * own utilities authoritative). * ========================================================================== */ /* Solid-accent surfaces need the DARKER teal in dark mode so white text stays AA (the accent variable itself is brighter for links/text/icons). */ [data-theme="dark"] .bg-accent { background-color: #0f766e; } [data-theme="dark"] .btn-primary { background-color: #0f766e; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .hover\:bg-accent-hover:hover { background-color: #115e59; } [data-theme="dark"] .active\:bg-accent-700:active { background-color: #134e4a; } [data-theme="dark"] .shadow-accent\/20 { --tw-shadow-color: rgb(15 118 110 / .2); --tw-shadow: var(--tw-shadow-colored); } [data-theme="dark"] .shadow-accent\/30 { --tw-shadow-color: rgb(15 118 110 / .3); --tw-shadow: var(--tw-shadow-colored); } /* Bright tints inside the solid user bubble (indigo-alias names now theme vars tuned for chip use — pin the bubble's interior to readable teals). */ [data-theme="dark"] .chat-bubble-user .bg-white\/15 { background-color: var(--accent-on-solid); } [data-theme="dark"] .chat-bubble-user .text-indigo-100 { color: var(--accent-on-solid-text); } [data-theme="dark"] .chat-bubble-user .text-indigo-200 { color: var(--accent-on-solid-muted); } /* bg-white(/70) callers on dark (HQ voice/file chips) should read as elevated chips, not glowing white. */ [data-theme="dark"] .bg-white\/70 { background-color: rgb(var(--elevated-channels) / .8); } /* Toast is an intentionally-dark island in both themes — keep its literal internals from following the neutral vars. */ [data-theme="dark"] #toast .border-slate-700 { border-color: #334155; } [data-theme="dark"] #toast .text-slate-100 { color: #f1f5f9; } /* Signup brand panel: bg-slate-900 stays literal, so keep its slate text. */ [data-theme="dark"] .bg-slate-900 .text-slate-300 { color: #cbd5e1; } [data-theme="dark"] .bg-slate-900 .text-slate-400 { color: #94a3b8; } /* ========================================================================== * Sidebar rail collapse — data-rail="expanded|collapsed" on * (boot script in base.html; sbToggleRail() flips + persists it). Pure CSS: * the full column and the slim icon rail each own their toggle button, so * an expander is ALWAYS visible in the collapsed state. Below lg both rails * are hidden by Tailwind's `hidden` (the hamburger drawer covers