/* ========================================================================= ParadoxLabs CRM — theme tokens ========================================================================= THE SINGLE PLACE TO CHANGE THE LOOK OF THE PLATFORM. Every colour, radius and shadow used by the CRM app and the marketing site comes from here. Change a value and it applies everywhere — sidebar, buttons, cards, tables, pills, the landing page, hosted forms. The palette matches paradoxlabs.dev and prime.paradoxlabs.dev: a purple-tinted near-black ground, a violet accent, chrome-white type, and monospace for eyebrows, labels and metadata. Loaded by: public/index.html (the CRM app) public/landing.html (the marketing site) public/form.html (hosted forms) Two things to keep in step when changing the brand colour: 1. --brand below 2. BRAND_COLOR in .env — the default stored on new agency records, which the app applies at runtime for white-label customers. Published client websites (server/site-renderer.js) intentionally use each client's own brand colour, but take their neutrals from these values. ------------------------------------------------------------------------- */ :root { /* ---- Brand ---------------------------------------------------------- */ --brand: #a855f7; /* violet — the Paradox accent */ --brand-600: #a855f7; /* alias, for clarity inside gradients */ --brand-700: #8b5cf6; /* hover / pressed */ --brand-2: #b57bff; /* lighter violet — highlights, hero emphasis */ --brand-3: #7c3aed; /* deep violet — gradient anchors */ --brand-deep: #1a0f2e; /* darkest brand shade, top of hero gradients */ --brand-soft: rgba(168, 85, 247, .14); /* tinted chip background */ /* Both Paradox sites put dark text on the bright violet button, and the numbers agree: white on this accent is 2.6:1, dark text is 4.9:1. */ --on-brand: #100a1b; /* ---- Surfaces (purple-tinted black, not blue) ----------------------- */ --bg: #0f0a18; /* app background */ --bg-page: #0b0713; /* marketing page background — deepest */ --panel: #17111f; /* cards, tables, panels, inputs */ --soft: #120c1c; /* alternating band on marketing sections */ --chip: #241a33; /* raised subtle surface: pills, kanban columns */ --sidebar: #0b0713; /* app sidebar */ --sidebar-ink: #c4b8d8; /* sidebar text */ --sidebar-ink-dim: #7d6f94;/* sidebar section headings */ /* ---- Text ----------------------------------------------------------- */ --ink: #f2edf9; /* primary text — chrome white, faintly warm */ --muted: #a99bc0; /* secondary text — purple-tinted grey */ /* ---- Lines ---------------------------------------------------------- */ --line: #2a1f3d; /* borders */ --line-soft: #201730; /* table row dividers */ /* ---- Status (tuned to stay legible on a dark ground) ---------------- */ --good: #22c55e; --warn: #f59e0b; --bad: #f43f5e; --info: #a855f7; /* ---- Shape ---------------------------------------------------------- */ --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35); --shadow-lg: 0 12px 34px rgba(0, 0, 0, .55); --glow: 0 0 0 1px rgba(168, 85, 247, .28), 0 6px 28px rgba(168, 85, 247, .22); /* ---- Type ----------------------------------------------------------- */ --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: var(--font); /* Both Paradox sites use monospace for eyebrows, labels and metadata. */ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ------------------------------------------------------------------------- Light variant. The platform is dark by default to match the brand; add data-theme="light" to for a light ground. No toggle is wired up yet — the tokens exist so adding one is a small change rather than a rewrite. ------------------------------------------------------------------------- */ :root[data-theme="light"] { --on-brand: #ffffff; --brand-soft: #f3e8ff; --bg: #f7f5fb; --bg-page: #ffffff; --panel: #ffffff; --soft: #f7f5fb; --chip: #f1ecf9; --sidebar: #0b0713; --sidebar-ink: #c4b8d8; --sidebar-ink-dim: #7d6f94; --ink: #1a132b; --muted: #6b6180; --line: #e7e2f0; --line-soft: #f0ecf7; --good: #16a34a; --warn: #d97706; --bad: #dc2626; --info: #7c3aed; --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1); --shadow-lg: 0 10px 30px rgba(16, 24, 40, .12); }