/* ========================================================== theme.css — tokens de design (cores, fontes, espaços) Meu Planner Financeiro ---------------------------------------------------------- Toda a paleta vive em variáveis CSS para permitir dark mode e ajustes globais sem caçar valores no código. ========================================================== */ :root { /* ---------- Cores neutras ---------- */ --cor-fundo: #f6f8fb; --cor-superficie: #ffffff; --cor-superficie-alt: #f1f5f9; --cor-borda: #e2e8f0; --cor-borda-forte: #cbd5e1; --cor-texto: #0f172a; --cor-texto-suave: #475569; --cor-texto-fraco: #94a3b8; /* ---------- Cores de marca ---------- */ --cor-primaria: #1e3a5f; /* azul-marinho profundo, sério */ --cor-primaria-hover: #2c4f7e; --cor-primaria-fraca: #e8eef5; /* ---------- Cores semânticas (financeiras) ---------- */ --cor-receita: #15803d; --cor-receita-fundo: #ecfdf5; --cor-despesa: #b91c1c; --cor-despesa-fundo: #fef2f2; --cor-investimento: #6d28d9; --cor-investimento-fundo: #f3e8ff; --cor-alerta: #b45309; --cor-alerta-fundo: #fffbeb; --cor-info: #1d4ed8; --cor-info-fundo: #eff6ff; /* ---------- Tipografia ---------- */ --fonte-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fonte-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-xxl: 24px; --fs-titulo: 28px; /* ---------- Espaçamentos (escala de 4px) ---------- */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; /* ---------- Raios ---------- */ --raio-sm: 4px; --raio: 8px; --raio-lg: 12px; --raio-xl: 16px; --raio-pilula: 999px; /* ---------- Sombras ---------- */ --sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --sombra: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --sombra-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --sombra-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.06); /* ---------- Layout ---------- */ --largura-sidebar: 240px; --altura-topbar: 56px; --largura-conteudo-max: 1280px; /* ---------- Transições ---------- */ --t-rapida: 120ms ease; --t-base: 180ms ease; } body { font-family: var(--fonte-base); font-size: var(--fs-base); color: var(--cor-texto); background: var(--cor-fundo); transition: background var(--t-base), color var(--t-base); } /* Fonte mono para valores monetários — melhora alinhamento em tabelas */ .mono, .valor-monetario { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; } /* ============================================================ DARK MODE — Etapa final ============================================================ Ativado por data-theme="dark" no . Pode ser: - Escolha explícita do user (localStorage[shalom:tema]) - Auto detect via prefers-color-scheme (se sem preferência) Cores escolhidas pra: - Contraste WCAG AA (>4.5:1 em texto normal) - Continuidade visual (mesmas cores semânticas, ajustadas) - Profundidade (camadas levemente distintas, não tudo preto) ============================================================ */ html[data-theme="dark"] { /* Neutras — paleta slate-zinc com toque azulado */ --cor-fundo: #0f172a; /* fundo de página */ --cor-superficie: #1e293b; /* cards */ --cor-superficie-alt: #334155; /* hover, seleção */ --cor-borda: #334155; --cor-borda-forte: #475569; --cor-texto: #f1f5f9; --cor-texto-suave: #cbd5e1; --cor-texto-fraco: #64748b; /* Marca — azul mais claro pra contrastar com fundo escuro */ --cor-primaria: #60a5fa; --cor-primaria-hover: #3b82f6; --cor-primaria-fraca: #1e3a5f; /* Semânticas — versões mais brilhantes */ --cor-receita: #4ade80; --cor-receita-fundo: #052e16; --cor-despesa: #f87171; --cor-despesa-fundo: #450a0a; --cor-investimento: #c084fc; --cor-investimento-fundo: #2e1065; --cor-alerta: #fbbf24; --cor-alerta-fundo: #451a03; --cor-info: #60a5fa; --cor-info-fundo: #172554; /* Sombras mais sutis em dark (luz vem de cima como sempre) */ --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --sombra-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --sombra-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3); } /* Ajustes específicos pra dark (dentro do mesmo seletor não dá pra mudar regras) */ html[data-theme="dark"] body { /* Garante que inputs tenham fundo legível */ } html[data-theme="dark"] .campo__entrada, html[data-theme="dark"] .campo__select, html[data-theme="dark"] textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="search"] { background: var(--cor-superficie); color: var(--cor-texto); border-color: var(--cor-borda); } html[data-theme="dark"] input[type="color"] { background: transparent; } /* Auto-detect quando o user não escolheu nada */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* Aplica as mesmas regras quando data-theme não está setado. Não dá pra duplicar, então o JS sempre seta data-theme no boot. */ } }