/* ============================================================================= TOKENS — fonte única de verdade do design do sistema. Regra: nenhum hexadecimal, medida de espaçamento ou raio solto em outro arquivo ou em template. Se aparecer, migre para cá. Este arquivo carrega ANTES de app.css. A segunda metade dele mapeia os nomes ANTIGOS de token para os novos: são ~2.200 linhas de CSS já escritas contra `--muted`, `--radius`, `--serif` etc., e trocar tudo de uma vez seria um diff impossível de revisar com segurança. Os aliases deixam o sistema inteiro funcionando enquanto as telas migram uma a uma. ============================================================================= */ :root { /* ---- Institucional ---- */ --verde-900: #08300B; /* sidebar, header, botões primários */ --verde-800: #0A4C10; /* hover/ativo dentro do escuro */ --verde-700: #12631A; /* foco em superfície escura */ /* ---- Superfícies ---- */ --bg: #F6F1E6; /* fundo do conteúdo */ --surface: #FFFDF8; /* cards */ --surface-2: #FBF7EE; /* cards aninhados, zebra, inputs */ --border: #E7E2D4; /* bordas 1px */ --border-2: #D8D2C0; /* ênfase, divisores de seção */ /* Bege do botão secundário. Existe como token próprio porque não é nenhuma das superfícies: é mais escuro que --surface-2 de propósito, para o botão se destacar do card E continuar visível sobre o verde da barra superior. Chegou a virar "transparente com borda" no refinamento, e sobre o verde escuro os botões da topbar praticamente sumiram. */ --btn-2: #ECE5D5; --btn-2-hover:#E2DAC6; /* ---- Acento ---- */ --dourado: #B8935A; --dourado-claro: #D9C39B; --dourado-esc: #8A6B3D; /* ---- Texto ---- */ --txt: #1C1C1A; --txt-2: #5F5E5A; /* O documento pede #8A8779 aqui E exige contraste AA para texto. Os dois não cabem juntos: #8A8779 dá 3,20:1 sobre --bg, e AA pede 4,5:1 para texto pequeno — que é justamente o tamanho em que este token é usado (legendas, labels micro, texto de apoio). Escurecido até passar, mantendo o mesmo matiz quente: 4,76:1 sobre --bg e 5,27:1 sobre --surface. Se em algum ponto o cinza mais claro for indispensável, use-o em elemento decorativo (linha, ícone de estado vazio), nunca em texto. */ --txt-3: #6E6B5B; --txt-inv: #F0E6D2; /* ---- Semânticas ---- */ --ok: #5C8A3A; --ok-bg: #EDF3E4; --erro: #6B2C2C; --erro-bg: #F5E9E9; --atencao: #A6742C; --atencao-bg: #FAF1E0; --info: #3F5E6B; --info-bg: #E9F0F2; /* ---- Tons de categoria ---- Dessaturados de propósito. Uso: ponto de 6px, borda lateral de 3px em card, fundo de badge a 12%. NUNCA como fundo de área grande — a moldura é neutra, a cor vem do conteúdo. */ --cat-imovel: #4A6B52; --cat-veiculo: #6B5B45; --cat-empresa: #3F5E6B; --cat-viagem: #7A6A9B; --cat-cartao: #8A6B3D; --cat-invest: #4F6B5E; --cat-saude: #6B4A4A; --cat-colecao: #7A5C3D; /* ---- Espaçamento (escala de 4px) ---- */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; /* ---- Raio ---- */ --r-sm: 6px; /* inputs, badges, botões */ --r-md: 10px; /* cards */ --r-lg: 14px; /* modais, painéis grandes */ /* ---- Elevação ---- A profundidade vem do contraste --bg x --surface, não da sombra. */ --sombra-1: 0 1px 2px rgba(28, 28, 26, 0.04); --sombra-2: 0 4px 12px rgba(28, 28, 26, 0.06); --sombra-3: 0 16px 40px rgba(28, 28, 26, 0.12); /* ---- Tipografia ---- */ --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif; --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --t-display: 34px; --lh-display: 1.15; --t-h1: 26px; --lh-h1: 1.25; --t-h2: 19px; --lh-h2: 1.3; --t-h3: 15px; --lh-h3: 1.4; --t-corpo: 14px; --lh-corpo: 1.55; --t-peq: 12.5px; --lh-peq: 1.45; --t-micro: 11px; --lh-micro: 1.4; /* ---- Movimento ---- 160ms e nada além disso: a interface é sóbria, não animada. */ --transicao: 160ms ease-out; /* ---- Foco ---- Um anel só, dourado, em tudo que é interativo. */ --anel-foco: 0 0 0 3px rgba(184, 147, 90, 0.18); /* ---- Layout ---- */ --largura-max: 1280px; /* ========================================================================= ALIASES DOS NOMES ANTIGOS Mantêm funcionando o CSS escrito antes deste arquivo. Ao migrar uma tela para os componentes novos, troque para os nomes de cima; quando nenhum alias tiver mais uso, este bloco sai. ========================================================================= */ --inst-dark: var(--verde-900); --inst-dark-2: var(--verde-800); --primary: var(--verde-800); --primary-dark: var(--verde-900); --accent: var(--dourado); --text: var(--txt); /* --muted apontava para #7C7568, que sobre --surface fica em ~3,2:1 e não passa em AA para texto pequeno. --txt-2 sobe para ~6,4:1 sem mudar o papel do token: continua sendo o texto secundário. */ --muted: var(--txt-2); --positive: var(--ok); --danger: var(--erro); --warning: var(--atencao); --serif: var(--fonte-titulo); --sans: var(--fonte-texto); --shadow: var(--sombra-1); --radius: var(--r-md); } /* ============================================================================= NÚMEROS TABULARES — a regra crítica do documento. Todo valor monetário, percentual, data e quantidade alinha em coluna. Em vez de caçar cada classe (e esquecer metade), a regra entra por baixo: herda em todo o documento, e as fontes de texto corrente que não têm variante tabular simplesmente ignoram. ============================================================================= */ :root { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Título serifado é a exceção: em Playfair, o algarismo tabular fica com espaçamento largo demais num número herói. Ali vale a proporção natural. */ .num-proporcional { font-variant-numeric: normal; font-feature-settings: normal; }