// Design system — Central da Vida // Suporta DARK e LIGHT mode com transição automática por horário. // ───────────────────────────────────────────────────────────── // Paletas de superfície / texto (variam entre dark e light) // ───────────────────────────────────────────────────────────── const DARK_PALETTE = { bg: '#08070C', bgSoft: '#0E0D14', surface: '#14131C', surfaceHi: '#1B1A25', surfaceHi2: '#23222F', stroke: 'rgba(255,255,255,0.06)', strokeHi: 'rgba(255,255,255,0.10)', divider: 'rgba(255,255,255,0.05)', text: '#F5F4F8', textDim: '#9B98A8', textMuted: '#6A6776', textFaint: '#48465A', // Brand soft com fundo escuro brandSoft: 'rgba(177,151,252,0.14)', mintSoft: 'rgba(94,227,168,0.14)', coralSoft: 'rgba(255,122,107,0.14)', amberSoft: 'rgba(255,181,71,0.14)', skySoft: 'rgba(111,184,255,0.14)', }; const LIGHT_PALETTE = { bg: '#F4F3F8', bgSoft: '#FFFFFF', surface: '#FFFFFF', surfaceHi: '#F3F2F7', surfaceHi2: '#E9E8EF', stroke: 'rgba(10,10,20,0.08)', strokeHi: 'rgba(10,10,20,0.14)', divider: 'rgba(10,10,20,0.05)', text: '#0A0911', textDim: '#5E5C6B', textMuted: '#8E8C99', textFaint: '#B5B3BC', // Brand soft com fundo claro precisa de mais densidade pra contraste brandSoft: 'rgba(177,151,252,0.18)', mintSoft: 'rgba(94,227,168,0.20)', coralSoft: 'rgba(255,122,107,0.20)', amberSoft: 'rgba(255,181,71,0.22)', skySoft: 'rgba(111,184,255,0.18)', }; // ───────────────────────────────────────────────────────────── // Tokens comuns (independem do modo) // ───────────────────────────────────────────────────────────── const COMMON = { // Brand — signature AI violet brand: '#B197FC', brandHi: '#C9B5FF', brandDeep: '#7C5CFF', brandGrad: 'linear-gradient(135deg, #C9B5FF 0%, #9D7AFF 50%, #FF8FB1 100%)', brandGradFlat: 'linear-gradient(135deg, #9D7AFF 0%, #FF8FB1 100%)', // Semantic mint: '#5EE3A8', coral: '#FF7A6B', amber: '#FFB547', sky: '#6FB8FF', flame: '#FF7A3D', // Categories (finance / tasks) cats: { trabalho: '#B197FC', pessoal: '#5EE3A8', saude: '#FF7A6B', estudo: '#6FB8FF', casa: '#FFB547', lazer: '#FF8FB1', mercado: '#5EE3A8', transporte: '#6FB8FF', alimentacao: '#FFB547', moradia: '#B197FC', contas: '#FF7A6B', investimentos: '#5EE3A8', outros: '#9B98A8', }, // Radii r: { sm: 10, md: 14, lg: 18, xl: 24, pill: 9999 }, }; // CDV começa com o tema dark (default histórico do app) const CDV = { ...COMMON, ...DARK_PALETTE, _mode: 'dark' }; // Aplica uma paleta ao objeto CDV (muta in-place pra preservar referências // usadas pelos demais arquivos via Object.assign(window, { CDV })) function applyTheme(mode) { const palette = mode === 'light' ? LIGHT_PALETTE : DARK_PALETTE; Object.assign(CDV, palette); CDV._mode = mode === 'light' ? 'light' : 'dark'; if (typeof document !== 'undefined' && document.body) { document.body.style.background = CDV.bg; document.body.style.color = CDV.text; } const meta = typeof document !== 'undefined' ? document.querySelector('meta[name="theme-color"]') : null; if (meta) meta.setAttribute('content', CDV.bg); } // Resolve o modo efetivo a partir da preferência do usuário // preference: 'auto' | 'light' | 'dark' function resolveTheme(preference) { if (preference === 'light' || preference === 'dark') return preference; // 'auto' (ou ausente): light entre 7h e 19h, dark caso contrário const hour = new Date().getHours(); return (hour >= 7 && hour < 19) ? 'light' : 'dark'; } const fontDisplay = `'Instrument Serif', 'Times New Roman', serif`; const fontMono = `'JetBrains Mono', ui-monospace, monospace`; Object.assign(window, { CDV, fontDisplay, fontMono, applyTheme, resolveTheme, DARK_PALETTE, LIGHT_PALETTE, });