/* Fase 10.6 — Fundação do design "Confiança familiar premium" (teal), mobile-first. FONTE DA VERDADE dos tokens. As telas migram pra cá nas Tasks 2-4; por isso este arquivo é carregado ANTES do dashboard.css (que ainda define o tema antigo). */ :root { color-scheme: light dark; --bg: #F6F8FA; --surface: #FFFFFF; --surface-2: #EEF3F6; --border: #D0D5DD; --text: #101828; --text-muted: #667085; --brand: #0F766E; --brand-hover: #115E59; --brand-soft: #CCFBF1; --on-brand: #FFFFFF; --income: #15803D; --income-soft: #DCFCE7; --expense: #B42318; --expense-soft: #FEE4E2; --warning: #B7791F; --info: #2563EB; --radius-hero: 24px; --radius-card: 18px; --radius-input: 16px; --radius-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --shadow-card: 0 8px 24px rgba(16, 24, 40, 0.06); /* Cores de categoria (não usar teal, pra não confundir com a marca). */ --cat-1: #2563EB; --cat-2: #7C3AED; --cat-3: #D97706; --cat-4: #DB2777; --cat-5: #64748B; } /* Tema (Task 3) — 'auto' segue o sistema; 'light'/'dark' forçam a escolha, via [data-theme] no (salvo no localStorage, aplicado inline no pra não dar flash). Os MESMOS tokens escuros nos dois caminhos (auto e forçado). NÃO remova o @media — ele é o "automático". */ /* AUTO (sem escolha explícita): segue o prefers-color-scheme do sistema. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="auto"] { color-scheme: dark; --bg: #0B1220; --surface: #111827; --surface-2: #1F2937; --border: #334155; --text: #F8FAFC; --text-muted: #CBD5E1; --brand: #2DD4BF; --brand-hover: #99F6E4; --brand-soft: #134E4A; --on-brand: #0B1220; --income: #86EFAC; --income-soft: #14331F; --expense: #FCA5A5; --expense-soft: #3A1D1D; --warning: #FDE68A; --info: #93C5FD; --shadow-card: none; /* Cores de categoria — um nível mais claro no escuro. */ --cat-1: #60A5FA; --cat-2: #A78BFA; --cat-3: #FBBF24; --cat-4: #F472B6; --cat-5: #94A3B8; } } /* ESCURO forçado: vence o sistema (mesmos tokens do bloco auto acima). */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0B1220; --surface: #111827; --surface-2: #1F2937; --border: #334155; --text: #F8FAFC; --text-muted: #CBD5E1; --brand: #2DD4BF; --brand-hover: #99F6E4; --brand-soft: #134E4A; --on-brand: #0B1220; --income: #86EFAC; --income-soft: #14331F; --expense: #FCA5A5; --expense-soft: #3A1D1D; --warning: #FDE68A; --info: #93C5FD; --shadow-card: none; --cat-1: #60A5FA; --cat-2: #A78BFA; --cat-3: #FBBF24; --cat-4: #F472B6; --cat-5: #94A3B8; } /* CLARO forçado: vence o sistema (os tokens claros vêm do :root lá em cima). */ :root[data-theme="light"] { color-scheme: light; } /* ── Reset leve ── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } img, svg { max-width: 100%; display: block; } /* Tipografia base: Inter, com fallback do sistema. Números tabulares e tracking do plano. */ :root { --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ── Ícone de linha (Material Symbols Outlined) ── */ .icon { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variant-ligatures: none; } /* ── Shell mobile-first ── O app abre no celular: coluna estreita centrada. As telas (Task 2+) usam .app-shell. */ .app-shell { max-width: 440px; margin-inline: auto; padding: var(--sp-4) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px)); min-height: 100dvh; } /* Foco visível em tudo interativo (acessibilidade AA). */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }