/* EllaCRM design tokens — single source of truth. Colors are stored as space-separated RGB triplets so Tailwind's `rgb(var(--brand) / )` syntax works. */ :root { /* Brand & accents */ --brand: 37 99 235; /* blue-600 */ --brand-deep: 29 78 216; /* blue-700 */ --brand-soft: 219 234 254; /* blue-100 */ --brand-tint: 239 246 255; /* blue-50 */ --success: 16 185 129; --success-soft: 220 252 231; --warn: 245 158 11; --warn-soft: 254 243 199; --danger: 239 68 68; --danger-soft: 254 226 226; --violet: 139 92 246; /* Surfaces */ --surface: 248 250 252; /* page bg */ --surface-card: 255 255 255; --surface-sidebar: 15 23 42; /* slate-900 */ --surface-sidebar-hover: 30 41 59; --border: 226 232 240; --border-soft: 241 245 249; /* Ink (text) */ --ink-900: 15 23 42; --ink-700: 51 65 85; --ink-500: 100 116 139; --ink-400: 148 163 184; --ink-300: 203 213 225; /* Radii */ --radius-pill: 9999px; --radius-card: 16px; --radius-control: 10px; --radius-tight: 8px; /* Spacing scale (used in custom rules; Tailwind's scale still applies) */ --space-card: 20px; --space-section: 24px; /* Shadows */ --shadow-card: 0 4px 16px rgba(15,23,42,.04); --shadow-card-hover: 0 8px 28px rgba(15,23,42,.08); --shadow-pop: 0 12px 40px rgba(15,23,42,.18); /* Brand gradient — used for the logo mark and active sidebar item */ --gradient-brand: linear-gradient(135deg, rgb(59 130 246), rgb(29 78 216)); --gradient-brand-violet: linear-gradient(135deg, rgb(59 130 246), rgb(139 92 246)); /* Logo/wordmark gradient — three-stop brand wash. Used by the EllaRise mark in the sidebar and by the user-avatar badge above settings. */ --gradient-logo: linear-gradient(135deg, rgb(59 130 246) 0%, rgb(139 92 246) 50%, rgb(236 72 153) 100%); /* Avatar palette — used by addPerson/addCompany to assign a deterministic gradient to new records. Each variable is a complete gradient string so callers can hand it to `style="background:var(--avatar-N)"` directly. Keep this list in sync with assets/app.js#AVATAR_GRADIENTS. */ --avatar-1: linear-gradient(135deg, rgb(59 130 246), rgb(29 78 216)); /* blue */ --avatar-2: linear-gradient(135deg, rgb(16 185 129), rgb(5 150 105)); /* emerald */ --avatar-3: linear-gradient(135deg, rgb(139 92 246), rgb(124 58 237)); /* violet */ --avatar-4: linear-gradient(135deg, rgb(245 158 11), rgb(217 119 6)); /* amber */ --avatar-5: linear-gradient(135deg, rgb(239 68 68), rgb(220 38 38)); /* red */ --avatar-6: linear-gradient(135deg, rgb(14 165 233), rgb(3 105 161)); /* sky */ } /* Convenience aliases that read like CSS color names */ .bg-surface { background: rgb(var(--surface)); } .bg-surface-card { background: rgb(var(--surface-card)); } .bg-sidebar { background: rgb(var(--surface-sidebar)); } .text-ink { color: rgb(var(--ink-900)); } .text-ink-soft { color: rgb(var(--ink-500)); } .border-token { border-color: rgb(var(--border)); } /* ────────────────────────────────────────────────────────── Dark theme — activated when is set. We only redefine the CSS variables; the rest of the app picks them up automatically because every color goes through `--*` or the Tailwind config that points at those variables. */ :root[data-theme="dark"] { --brand: 59 130 246; /* slightly brighter blue for dark contrast */ --brand-deep: 37 99 235; --brand-soft: 30 64 175; /* darker pill bg */ --brand-tint: 23 37 84; /* very dark blue, used for surface tints */ --success: 52 211 153; --success-soft: 6 78 59; --warn: 251 191 36; --warn-soft: 113 63 18; --danger: 248 113 113; --danger-soft: 127 29 29; --violet: 167 139 250; --surface: 15 23 42; /* slate-900 page bg */ --surface-card: 30 41 59; /* slate-800 card bg */ --surface-sidebar: 8 14 26; /* a hair darker than the page */ --surface-sidebar-hover: 30 41 59; --border: 51 65 85; /* slate-700 */ --border-soft: 30 41 59; --ink-900: 241 245 249; /* slate-100 — primary text */ --ink-700: 203 213 225; --ink-500: 148 163 184; --ink-400: 100 116 139; --ink-300: 71 85 105; --shadow-card: 0 4px 16px rgba(0,0,0,.35); --shadow-card-hover: 0 8px 28px rgba(0,0,0,.5); --shadow-pop: 0 12px 40px rgba(0,0,0,.55); } /* Tailwind utility overrides for dark — we're using CDN Tailwind so we can't easily ship dark variants of every utility. These cover the classes used most in the existing pages. */ :root[data-theme="dark"] body { background: rgb(var(--surface)); color: rgb(var(--ink-900)); } :root[data-theme="dark"] .bg-white { background-color: rgb(var(--surface-card)) !important; } :root[data-theme="dark"] .bg-slate-50, :root[data-theme="dark"] .bg-slate-50\/40, :root[data-theme="dark"] .bg-slate-50\/30, :root[data-theme="dark"] .bg-blue-50\/30 { background-color: rgb(var(--surface)) !important; } :root[data-theme="dark"] .bg-slate-100 { background-color: rgb(var(--border)) !important; } :root[data-theme="dark"] .border-slate-100, :root[data-theme="dark"] .border-slate-200, :root[data-theme="dark"] .border-slate-300 { border-color: rgb(var(--border)) !important; } :root[data-theme="dark"] .text-slate-900, :root[data-theme="dark"] .text-slate-800 { color: rgb(var(--ink-900)) !important; } :root[data-theme="dark"] .text-slate-700 { color: rgb(var(--ink-700)) !important; } :root[data-theme="dark"] .text-slate-600, :root[data-theme="dark"] .text-slate-500 { color: rgb(var(--ink-500)) !important; } :root[data-theme="dark"] .text-slate-400 { color: rgb(var(--ink-400)) !important; } :root[data-theme="dark"] .text-slate-300 { color: rgb(var(--ink-300)) !important; } :root[data-theme="dark"] .hover\:bg-slate-50:hover, :root[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: rgb(var(--border)) !important; } :root[data-theme="dark"] .ring-white { --tw-ring-color: rgb(var(--surface-card)) !important; } :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: rgb(var(--surface)) !important; color: rgb(var(--ink-900)) !important; border-color: rgb(var(--border)) !important; } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: rgb(var(--ink-400)) !important; } /* Component-specific tweaks */ :root[data-theme="dark"] .kpi-card, :root[data-theme="dark"] .chart-card, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .case-card, :root[data-theme="dark"] .deal-card, :root[data-theme="dark"] .person-card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .step-card, /* Newer surfaces (quotes, broadcast, automations, dropbox variants) */ :root[data-theme="dark"] .product-card, :root[data-theme="dark"] .audience-tile, :root[data-theme="dark"] .template-row, :root[data-theme="dark"] .rule-card, :root[data-theme="dark"] .addr-row, :root[data-theme="dark"] .dropbox-tab { background: rgb(var(--surface-card)); border-color: rgb(var(--border)); color: rgb(var(--ink-700)); } /* Builder sections — keep the colored tint but darken the base. */ :root[data-theme="dark"] .builder-section { background: rgb(var(--surface-card)); border-color: rgb(var(--border)); color: rgb(var(--ink-700)); } :root[data-theme="dark"] .builder-section.when { background: rgb(23 37 84); border-color: rgb(30 64 175); /* blue-950 / blue-800 */ } :root[data-theme="dark"] .builder-section.if { background: rgb(69 26 3); border-color: rgb(146 64 14); /* amber-950 / amber-800 */ } :root[data-theme="dark"] .builder-section.then { background: rgb(5 46 22); border-color: rgb(22 101 52); /* emerald-950 / 800 */ } /* Active audience tile in broadcast keeps a brand-tinted surface */ :root[data-theme="dark"] .audience-tile.active { background: rgb(var(--brand-soft)); border-color: rgb(var(--brand)); color: rgb(var(--ink-900)); } :root[data-theme="dark"] .template-row.active { background: rgb(var(--brand-soft)); } :root[data-theme="dark"] .audience-tile:hover, :root[data-theme="dark"] .template-row:hover { background: rgb(var(--border)); } /* Quote line-item rows + status pills + dropbox/cmd rows */ :root[data-theme="dark"] .li-row { border-color: rgb(var(--border)); } :root[data-theme="dark"] .li-row:hover { background: rgb(var(--border)); } :root[data-theme="dark"] .cmd-row { border-color: rgb(var(--border)); } :root[data-theme="dark"] .cmd-row code { background: rgb(var(--border)); color: rgb(var(--ink-700)); } :root[data-theme="dark"] .quote-row:hover { background: rgb(var(--border)); } :root[data-theme="dark"] .qstatus.draft { background: rgb(var(--border)); color: rgb(var(--ink-500)); } /* Other status pills (sent / accepted / declined / expired) already use transparent-tinted backgrounds that read fine on dark. */ :root[data-theme="dark"] .merge-pill { background: rgb(113 63 18); color: rgb(252 211 77); } /* Automations switch off-state needs a slightly lighter neutral on dark */ :root[data-theme="dark"] .switch { background: rgb(var(--ink-300)); } :root[data-theme="dark"] .switch.on { background: rgb(var(--success)); } /* Settings sub-tabs use bg-blue-50 for active; map that to dark brand-tint */ :root[data-theme="dark"] .settings-tab.active { background: rgb(var(--brand-soft)) !important; color: rgb(var(--ink-900)) !important; } :root[data-theme="dark"] .note-composer { background: rgb(var(--surface)); border-color: rgb(var(--border)); } :root[data-theme="dark"] .note-composer:focus-within { background: rgb(var(--surface-card)); } :root[data-theme="dark"] .timeline-card { background: rgb(var(--surface)); border-color: rgb(var(--border)); } :root[data-theme="dark"] .timeline-icon { box-shadow: 0 0 0 1px rgb(var(--border)); } :root[data-theme="dark"] .activity-row:hover { background: rgb(var(--border)); } :root[data-theme="dark"] .contact-row { background: rgb(var(--surface)); border-color: rgb(var(--border)); } :root[data-theme="dark"] .qj-modal { background: rgb(var(--surface-card)); } :root[data-theme="dark"] .qj-result:hover, :root[data-theme="dark"] .qj-result.qj-active { background: rgb(var(--brand-soft)); color: #fff; } :root[data-theme="dark"] .empty-state .empty-icon { background: rgb(var(--brand-soft)); } :root[data-theme="dark"] .bulk-bar { background: rgb(var(--brand-soft)); border-color: rgb(var(--brand-deep)); } :root[data-theme="dark"] .bulk-bar button { background: rgb(var(--surface-card)); color: rgb(var(--ink-700)); border-color: rgb(var(--border)); } :root[data-theme="dark"] .career-dot { border-color: rgb(var(--surface-card)); }