/* NexusWith.ai — centralized theme tokens * Sole source of truth for color across all NexusWith apps. * Linked from every app's via . * * Conventions: * - Semantic tokens (--bg, --surface-1/2, --text, --text-muted, --text-dim) * - Signal tokens (--signal-buy/sell/hold) with two variants for dark/light surfaces * - Legacy aliases (--surface, --text-2, --text-3) preserved for backward compat * - WCAG AA verified: body text >= 4.5:1, large text/UI >= 3:1 * * Last updated: 2026-05-18 */ :root { /* Surfaces — dark */ --bg: #0a0a0c; --surface-1: #16161b; --surface-2: #1f1f26; --surface-3: #2a2a32; /* Text — dark, WCAG AA verified on --bg */ --text: #fafafa; /* 19.1:1 — body */ --text-muted: #a1a1aa; /* 9.4:1 — labels, captions */ --text-dim: #8c8c95; /* 6.0:1 — hints, subtitles (was #52525b @ 3.0:1 FAIL) */ /* Borders */ --border: rgba(255,255,255,0.08); --border-hover: rgba(255,255,255,0.16); --border-strong: rgba(255,255,255,0.20); /* Shadows */ --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3); --shadow-pop: 0 12px 32px rgba(0,0,0,0.45); /* Accent + brand */ --accent: #c4b5fd; /* 11.4:1 on dark — links, active */ --accent-strong: #a78bfa; --accent-soft: rgba(196,181,253,0.12); /* Signals — DARK surface variants */ --signal-buy: #4ade80; /* 10.5:1 */ --signal-buy-bg: rgba(74,222,128,0.15); --signal-sell: #f87171; /* 6.4:1 */ --signal-sell-bg: rgba(248,113,113,0.15); --signal-hold: #fbbf24; /* 10.2:1 */ --signal-hold-bg: rgba(251,191,36,0.15); --signal-neutral: #71717a; --signal-neutral-bg: rgba(113,113,122,0.18); /* Brand accent palette (preserved hues) */ --amber: #fbbf24; --cyan: #22d3ee; --violet: #a78bfa; --green: #4ade80; /* Legacy aliases — DO NOT REMOVE. Keeps existing apps working. */ --surface: var(--surface-1); --text-2: var(--text-muted); --text-3: var(--text-dim); } [data-theme="light"] { /* Surfaces — light (Notion/Apple soft grey) */ --bg: #f7f7f5; /* warm off-white */ --surface-1: #ffffff; /* cards rise to true white */ --surface-2: #fafaf8; /* nested */ --surface-3: #f0f0ed; /* hover, table stripe */ /* Text — light, WCAG AA verified on --bg */ --text: #1a1a1a; /* 17.4:1 — body */ --text-muted: #52525b; /* 7.1:1 — labels */ --text-dim: #6b6b73; /* 4.7:1 — hints (was #a1a1aa @ 2.8:1 FAIL) */ /* Borders */ --border: rgba(0,0,0,0.06); --border-hover: rgba(0,0,0,0.12); --border-strong: rgba(0,0,0,0.18); /* Shadows — Notion/Apple soft elevation (the magic that separates white-on-near-white cards) */ --shadow-card: 0 1px 3px rgba(15,15,15,0.06), 0 4px 12px rgba(15,15,15,0.04); --shadow-pop: 0 12px 32px rgba(15,15,15,0.10); /* Accent + brand */ --accent: #6d28d9; /* 7.5:1 */ --accent-strong: #5b21b6; --accent-soft: rgba(109,40,217,0.10); /* Signals — LIGHT surface variants (darker hues for contrast on white) */ --signal-buy: #15803d; /* 5.4:1 */ --signal-buy-bg: rgba(21,128,61,0.10); --signal-sell: #b91c1c; /* 6.8:1 */ --signal-sell-bg: rgba(185,28,28,0.08); --signal-hold: #a16207; /* 5.2:1 */ --signal-hold-bg: rgba(161,98,7,0.10); --signal-neutral: #6b7280; --signal-neutral-bg: rgba(107,114,128,0.10); /* Brand accent palette (light variants — darker for contrast) */ --amber: #d97706; --cyan: #0891b2; --violet: #7c3aed; --green: #15803d; /* Legacy aliases */ --surface: var(--surface-1); --text-2: var(--text-muted); --text-3: var(--text-dim); } /* ============================================================================ * Tailwind utility compat layer — for Consensus Lab (alacarte) and any other * Next.js app that uses Tailwind's `bg-zinc-*` / `text-zinc-*` utilities. * Maps Tailwind dark-mode utility values to our semantic tokens in light mode. * ============================================================================ */ html[data-theme="light"] .bg-zinc-950 { background-color: var(--bg) !important; } html[data-theme="light"] .bg-zinc-900 { background-color: var(--surface-1) !important; } html[data-theme="light"] .bg-zinc-800 { background-color: var(--surface-2) !important; } html[data-theme="light"] .bg-zinc-700 { background-color: var(--surface-3) !important; } html[data-theme="light"] .bg-zinc-600 { background-color: var(--surface-3) !important; } html[data-theme="light"] .text-zinc-100 { color: var(--text) !important; } html[data-theme="light"] .text-zinc-200 { color: var(--text) !important; } html[data-theme="light"] .text-zinc-300 { color: var(--text-muted) !important; } html[data-theme="light"] .text-zinc-400 { color: var(--text-muted) !important; } html[data-theme="light"] .text-zinc-500 { color: var(--text-dim) !important; } html[data-theme="light"] .text-zinc-600 { color: var(--text-dim) !important; } html[data-theme="light"] .border-zinc-500 { border-color: var(--border-strong) !important; } html[data-theme="light"] .border-zinc-600 { border-color: var(--border-hover) !important; } html[data-theme="light"] .border-zinc-700 { border-color: var(--border) !important; } html[data-theme="light"] .border-zinc-800 { border-color: var(--border) !important; } html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.03) !important; } html[data-theme="light"] .hover\:text-zinc-100:hover { color: var(--text) !important; }