/* Finance Planer — tokens. Só variáveis. Fonte de verdade: specs/design.md. Tema claro por padrão; escuro pelo aparelho (landing) ou por data-tema no (sistema). Contrastes conferidos em 2026-09-18 (WCAG 2.2 AA): ver design.md, seção 2. */ :root { color-scheme: light dark; /* Neutros — tema claro */ --fundo: #F1F1F1; --superficie: #FAFAFA; /* caixas, um tom acima do fundo */ --poco: #E6E6E6; /* trilhos, campos desabilitados */ --texto: #2B2B2B; /* 12,5:1 no fundo */ --texto-2: #595959; /* 6,2:1 */ --texto-3: #6B6B6B; /* 4,7:1 no fundo; não usar sobre --poco */ --linha: rgba(43, 43, 43, .12); --borda: #7D7D7D; /* contorno de componente, >= 3:1 */ --inverso: #2B2B2B; /* botão primário, faixas de impacto */ --inverso-texto: #F1F1F1; --veu: rgba(241, 241, 241, .72); /* Cores financeiras sobre superfícies do tema (legendas, listas, Simulador). Só aparecem com significado financeiro. Sempre com rótulo e valor. */ --limite: #B07800; /* preenchimento/marcador, 3,4:1 */ --limite-texto: #8A5A00; /* texto, 5,3:1 */ --ideal: #1F7A4D; /* 4,7:1 */ --ideal-texto: #1A6E44; /* 5,5:1 */ --gasto: #C2362B; /* 4,8:1 */ --gasto-texto: #B42318; /* 5,8:1 */ /* Painel da Barra do Mês: sempre grafite, nos dois temas. É onde a cor salta. */ --painel: #2B2B2B; --painel-2: #383838; --painel-trilho: #1F1F1F; --painel-texto: #F1F1F1; --painel-texto-2: #BDBDBD; /* 7,5:1 */ --painel-linha: rgba(241, 241, 241, .14); --painel-limite: #F2B630; /* 7,8:1 */ --painel-ideal: #4CC38A; /* 6,4:1 */ --painel-gasto: #FF7A6B; /* 5,6:1 */ /* Tipografia */ --fonte: "Geist", "Geist reserva", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fonte-mono: "Geist Mono", "Geist Mono reserva", ui-monospace, "Cascadia Mono", Consolas, monospace; --t-display: clamp(2.75rem, 1rem + 7.2vw, 7rem); --t-h2: clamp(2.125rem, 1.2rem + 3.6vw, 4.25rem); --t-h3: clamp(1.375rem, 1.1rem + 1vw, 2rem); --t-h4: 1.125rem; --t-numero: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); --t-lead: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); --t-corpo: 1rem; --t-pequeno: .875rem; --t-rotulo: .75rem; --t-botao: .8125rem; /* Espaços (base 4) */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px; --e-11: 160px; --calha: clamp(16px, 2.4vw, 32px); --moldura: clamp(8px, 1.6vw, 24px); --largura: 1360px; --secao: clamp(72px, 10vw, 160px); /* Raios */ --r-sm: 8px; /* botões, campos, chips retos */ --r-md: 14px; /* cards */ --r-lg: 22px; /* caixas grandes */ --r-xl: 28px; /* moldura do herói */ --r-pill: 999px; /* Movimento */ --curva: cubic-bezier(.2, .7, .2, 1); --curva-saida: cubic-bezier(.4, 0, 1, 1); --dur-1: 160ms; --dur-2: 320ms; --dur-3: 640ms; /* Alvos de toque */ --toque: 44px; } /* Tema escuro — valores */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: #2B2B2B; --superficie: #353535; --poco: #222222; --texto: #F1F1F1; /* 12,5:1 */ --texto-2: #BDBDBD; /* 7,5:1 */ --texto-3: #A3A3A3; /* 5,6:1 no fundo; 4,9:1 na superfície */ --linha: rgba(241, 241, 241, .14); --borda: #8A8A8A; --inverso: #F1F1F1; --inverso-texto: #2B2B2B; --veu: rgba(43, 43, 43, .72); --limite: #F2B630; --limite-texto: #F2B630; --ideal: #4CC38A; --ideal-texto: #4CC38A; --gasto: #FF7A6B; --gasto-texto: #FF8C7F; --painel: #1C1C1C; --painel-2: #262626; --painel-trilho: #111111; } } :root[data-tema="escuro"] { --fundo: #2B2B2B; --superficie: #353535; --poco: #222222; --texto: #F1F1F1; --texto-2: #BDBDBD; --texto-3: #A3A3A3; --linha: rgba(241, 241, 241, .14); --borda: #8A8A8A; --inverso: #F1F1F1; --inverso-texto: #2B2B2B; --veu: rgba(43, 43, 43, .72); --limite: #F2B630; --limite-texto: #F2B630; --ideal: #4CC38A; --ideal-texto: #4CC38A; --gasto: #FF7A6B; --gasto-texto: #FF8C7F; --painel: #1C1C1C; --painel-2: #262626; --painel-trilho: #111111; }