/* Veracis — shared light/dark theme tokens + top-right pill toggle. Light is default. Dark activates via [data-theme="dark"] on . */ :root { --ink: #ffffff; --panel: #f8fafc; --panel-2: #f1f5f9; --line: #e2e8f0; --line-2: #cbd5e1; --text: #0f172a; --text-mute: #475569; --text-dim: #64748b; --accent: #7c5cff; --accent-2: #0891b2; --rag-red: #e11d48; --rag-amber: #d97706; --rag-green: #059669; --rag-med: #ca8a04; /* Toggle-specific */ --toggle-bg: #ffffff; --toggle-border: #cbd5e1; --toggle-text: #475569; --toggle-active-bg: #0f172a; --toggle-active-text: #ffffff; --toggle-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08); /* Scrim = the subtle "fog" used for hovers, zebra rows, and translucent surfaces. White-on-dark in dark mode, dark-on-light in light mode. */ --scrim-1: rgba(15, 23, 42, 0.03); --scrim-2: rgba(15, 23, 42, 0.05); --scrim-3: rgba(15, 23, 42, 0.08); --scrim-4: rgba(15, 23, 42, 0.12); /* RAG tints — same hue, less saturation on white surfaces */ --rag-red-bg: rgba(225, 29, 72, 0.10); --rag-red-bg-strong: rgba(225, 29, 72, 0.16); --rag-amber-bg: rgba(217, 119, 6, 0.10); --rag-amber-bg-strong: rgba(217, 119, 6, 0.16); --rag-green-bg: rgba(5, 150, 105, 0.10); --rag-green-bg-strong: rgba(5, 150, 105, 0.16); --rag-med-bg: rgba(202, 138, 4, 0.10); /* Accent tints */ --accent-bg: rgba(124, 92, 255, 0.08); --accent-bg-strong: rgba(124, 92, 255, 0.15); --accent-border: rgba(124, 92, 255, 0.30); /* RAG text colors — readable on tinted backgrounds in current theme */ --rag-red-text: #BE123C; --rag-amber-text: #B45309; --rag-green-text: #047857; --rag-med-text: #A16207; } [data-theme="dark"] { --ink: #05060a; --panel: #0b0d14; --panel-2: #0f1119; --line: #1a1d29; --line-2: #232634; --text: #e6e7ee; --text-mute: #94a3b8; --text-dim: #64748b; --accent: #7c5cff; --accent-2: #22d3ee; --rag-red: #f43f5e; --rag-amber: #f59e0b; --rag-green: #10b981; --rag-med: #fbbf24; --toggle-bg: #0b0d14; --toggle-border: #232634; --toggle-text: #94a3b8; --toggle-active-bg: #e6e7ee; --toggle-active-text: #05060a; --toggle-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.5); --scrim-1: rgba(255, 255, 255, 0.02); --scrim-2: rgba(255, 255, 255, 0.03); --scrim-3: rgba(255, 255, 255, 0.05); --scrim-4: rgba(255, 255, 255, 0.08); --rag-red-bg: rgba(244, 63, 94, 0.12); --rag-red-bg-strong: rgba(244, 63, 94, 0.18); --rag-amber-bg: rgba(245, 158, 11, 0.12); --rag-amber-bg-strong: rgba(245, 158, 11, 0.18); --rag-green-bg: rgba(16, 185, 129, 0.12); --rag-green-bg-strong: rgba(16, 185, 129, 0.18); --rag-med-bg: rgba(251, 191, 36, 0.14); --accent-bg: rgba(124, 92, 255, 0.08); --accent-bg-strong: rgba(124, 92, 255, 0.15); --accent-border: rgba(124, 92, 255, 0.30); --rag-red-text: #FDA4AF; --rag-amber-text: #FCD34D; --rag-green-text: #6EE7B7; --rag-med-text: #FDE68A; } /* ---------- Pill toggle ---------- */ /* Icon-only round toggle, top-right. Small footprint so it doesn't fight with header widgets (email pill, Logout, etc). */ .veracis-theme-toggle { position: fixed; top: 14px; right: 14px; z-index: 9999; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--toggle-bg); border: 1px solid var(--toggle-border); box-shadow: var(--toggle-shadow); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--toggle-text); transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } .veracis-theme-toggle:hover { color: var(--text); background: var(--panel-2); } .veracis-theme-toggle:active { transform: scale(0.94); } .veracis-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Show the icon for the OPPOSITE mode — clicking it switches to that mode. Light mode shows the moon (click to go dark); dark mode shows the sun. */ .veracis-theme-toggle .icon { font-size: 15px; line-height: 1; display: none; } [data-theme="light"] .veracis-theme-toggle .icon-moon { display: block; } [data-theme="dark"] .veracis-theme-toggle .icon-sun { display: block; } @media (max-width: 640px) { .veracis-theme-toggle { top: 10px; right: 10px; width: 30px; height: 30px; } } /* ---------- Light-mode overrides for pages built dark-first ---------- */ /* Landing & login & onboarding use these inline-style + Tailwind hex colors. Override the most common surfaces so light mode is readable even where colors are hard-coded in the page. Dark-mode pages keep their original look because [data-theme="dark"] is a no-op for these rules. */ :root body { background: var(--ink); color: var(--text); } /* Tailwind "bg-ink" / "bg-panel" / etc. compile to literal hex. Re-skin them under light mode so the page flips as expected. */ [data-theme="light"] .bg-ink { background-color: var(--ink) !important; } [data-theme="light"] .bg-panel { background-color: var(--panel) !important; } [data-theme="light"] .bg-panel\/60 { background-color: rgba(241, 245, 249, 0.6) !important; } [data-theme="light"] .bg-panel\/70 { background-color: rgba(241, 245, 249, 0.7) !important; } [data-theme="light"] .bg-panel\/80 { background-color: rgba(241, 245, 249, 0.8) !important; } [data-theme="light"] .border-line { border-color: var(--line) !important; } [data-theme="light"] .border-line\/60 { border-color: rgba(226, 232, 240, 0.7) !important; } [data-theme="light"] .border-line\/80 { border-color: rgba(226, 232, 240, 0.9) !important; } /* text-white means "white on dark" by default. Override only on plain surfaces — primary buttons and brand-gradient swatches need to stay white. */ [data-theme="light"] .text-white { color: var(--text) !important; } [data-theme="light"] .text-white\/60 { color: var(--text-mute) !important; } [data-theme="light"] .text-white\/70 { color: var(--text-mute) !important; } [data-theme="light"] .text-white\/80 { color: var(--text) !important; } [data-theme="light"] .text-white\/90 { color: var(--text) !important; } /* Re-pin to white where the background is a brand gradient (buttons, brand mark "V"). Stronger specificity wins. */ [data-theme="light"] .btn-primary, [data-theme="light"] .btn-primary .text-white, [data-theme="light"] [class*="bg-gradient"] .text-white, [data-theme="light"] [class*="bg-gradient"].text-white { color: #ffffff !important; } [data-theme="light"] .text-slate-300 { color: var(--text-mute) !important; } [data-theme="light"] .text-slate-400 { color: var(--text-dim) !important; } [data-theme="light"] .text-slate-500 { color: var(--text-dim) !important; } [data-theme="light"] .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04) !important; } [data-theme="light"] .bg-white\/10 { background-color: rgba(15, 23, 42, 0.06) !important; } [data-theme="light"] .bg-black\/30 { background-color: rgba(15, 23, 42, 0.05) !important; } [data-theme="light"] .bg-black\/40 { background-color: rgba(15, 23, 42, 0.06) !important; } [data-theme="light"] .bg-black\/50 { background-color: rgba(15, 23, 42, 0.08) !important; } [data-theme="light"] .ring-white\/10 { --tw-ring-color: rgba(15, 23, 42, 0.08) !important; } [data-theme="light"] .border-white\/10 { border-color: rgba(15, 23, 42, 0.1) !important; } [data-theme="light"] .border-white\/20 { border-color: rgba(15, 23, 42, 0.15) !important; } [data-theme="light"] .border-white\/5 { border-color: rgba(15, 23, 42, 0.06) !important; } [data-theme="light"] .text-white\/35, [data-theme="light"] .text-white\/40, [data-theme="light"] .text-white\/45, [data-theme="light"] .text-white\/50 { color: var(--text-dim) !important; } [data-theme="light"] .text-white\/55, [data-theme="light"] .text-white\/65 { color: var(--text-mute) !important; } [data-theme="light"] .text-ink { color: #ffffff !important; } /* on gradient brand mark */ /* Soften the deep radial-gradient hero glow for light mode. */ [data-theme="light"] .grid-bg { background-image: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124, 92, 255, 0.18), transparent 60%), radial-gradient(ellipse 60% 50% at 90% 10%, rgba(8, 145, 178, 0.12), transparent 60%), linear-gradient(#ffffff, #ffffff) !important; } [data-theme="light"] .grid-overlay { opacity: 0.35 !important; filter: invert(1) hue-rotate(180deg); }