/* ============================================================================= efg.app.br — DESIGN TOKENS · direção "Ofício" Fonte única da verdade. Ver /DESIGN.md na raiz do repo para o porquê. Regras que este arquivo executa: · azul-marinho é AÇÃO; verde/âmbar/vermelho são ESTADO. Dado nunca é azul. · profundidade só por sombra — sem brilho, sem degradê decorativo. · movimento em 3 momentos: entrada, revelação de valor, resposta ao cursor. · nada em loop. App novo NÃO define cor, fonte, raio nem duração próprios. Se faltar um token para o que você precisa, o token é que está faltando — acrescente aqui. ============================================================================= */ :root { color-scheme: light; /* --- COR SEMÂNTICA ------------------------------------------------------ Claro, mas NÃO branco de papel sob holofote. Três decisões que fazem a diferença numa jornada de oito horas: 1. Nada de #FFFFFF em área grande. A superfície é #FCFDFE — meio ponto abaixo do branco. Em monitor calibrado a diferença mal se nota; ao fim do dia, sim. 2. Nada de preto puro em texto. O corpo é #1B2430, que dá 13.4:1 sobre o fundo (folgado sobre os 4.5:1 do AA) sem o "vibrar" da borda entre preto absoluto e branco absoluto. 3. Os cinzas puxam levemente para o azul, na mesma família do acento. Cinza neutro ao lado de azul-marinho lê como sujo. */ --bg: #F2F4F7; /* fundo da página */ --surface: #FCFDFE; /* cartões, quadros, linhas, topbar */ --surface-2: #EDF0F4; /* hover, zebra, cabeçalho de tabela, grupo */ --surface-3: #F4F6F9; /* campo em repouso, trilho de medidor */ --border: #E1E6ED; /* divisória padrão 1px */ --border-strong: #C7D0DB; /* régua de fechamento, topo de total, zebra */ /* Contorno de COMPONENTE INTERATIVO — botão secundário, campo, caixa de seleção. Separado de --border-strong de propósito: a WCAG 1.4.11 exige 3:1 para o traço que identifica um controle, e --border-strong dá 1.4:1. Régua de tabela não precisa disso (é decoração); a borda que diz "aqui começa o campo onde você digita" precisa, senão o formulário vira um bloco cinza sem forma para quem tem baixa visão. */ --contorno: #778495; /* 3.5:1 sobre o fundo, 3.3:1 sobre a zebra */ --ink: #1B2430; /* texto principal (13.4:1 sobre --bg) */ --ink-2: #4E5B6B; /* texto secundário (7.1:1) */ /* --muted carrega rótulo de coluna em 9px e legenda em 12px — texto PEQUENO, que exige os 4.5:1 cheios do AA, não os 3:1 de texto grande. Escurecer o fundo sem escurecer este cinza junto derrubou o par para 3.28:1; #5F6B79 devolve 4.93:1 sobre o fundo e 4.75:1 sobre a zebra, que é o pior caso. */ --muted: #5F6B79; /* legendas, rótulos, sparkline em repouso (4.9:1)*/ --accent: #1E3A5F; /* AÇÃO — botão, foco, link, modo ativo */ --accent-hover: #2A4E7C; /* ação sob o cursor */ --accent-ink: #FFFFFF; /* texto sobre preenchimento de ação */ --accent-weak: #EAEFF6; /* fundo tênue de ação (chip, seleção) */ --accent-2: #8A5A2B; /* sépia — exceção, "paga para terceiro" */ --accent-2-weak: #FAF1E7; --accent-2-borda: #EBD9C4; /* --- ESTADO ------------------------------------------------------------- */ --success: #1B7A55; --success-weak: #E6F3EE; /* Âmbar escurecido de #9A6B12 para passar no AA nos TRÊS fundos em que ele aparece — página, zebra da tabela e o fundo do próprio aviso. O valor antigo dava 4.10:1 sobre a zebra, e é justamente ali que ele carrega a primeira oração de "6 linhas com margem negativa". */ --warning: #8A5F0D; --warning-weak: #FBF3E3; --warning-borda: #E9D7B0; --danger: #B23B33; --danger-weak: #FBEBE9; --info: #1E3A5F; --info-weak: #EAEFF6; /* --- DATA-VIZ · CATEGÓRICA (8 séries, seguras p/ daltonismo) ------------ */ --viz-1: #1E3A5F; --viz-2: #8A5A2B; --viz-3: #1B7A55; --viz-4: #6B4E8F; --viz-5: #B23B33; --viz-6: #1B6E7A; --viz-7: #A2557F; --viz-8: #6C7885; /* --- DATA-VIZ · SEQUENCIAL (claro → escuro) ----------------------------- */ --seq-1: #E7ECF3; --seq-2: #C3D0E0; --seq-3: #93A9C6; --seq-4: #5F7DA3; --seq-5: #37567F; --seq-6: #1E3A5F; /* --- DATA-VIZ · DIVERGENTE (sépia ←→ neutro ←→ marinho) ----------------- */ --div-neg-2: #7A4A1E; --div-neg-1: #B0864F; --div-mid: #C9CFD8; --div-pos-1: #5F7DA3; --div-pos-2: #1E3A5F; /* --- ELEVAÇÃO (sombra é o único recurso de profundidade) ---------------- Tingidas de azul-marinho, não de preto: sombra preta sobre fundo azulado acinzenta e "suja" o cartão. */ --sombra-1: 0 1px 2px rgba(27,36,48,.05); --sombra-2: 0 6px 18px rgba(27,36,48,.08), 0 1px 3px rgba(27,36,48,.05); --sombra-3: 0 20px 48px rgba(27,36,48,.10), 0 3px 8px rgba(27,36,48,.05); --anel-foco: 0 0 0 3px rgba(30,58,95,.14); /* --- RESPOSTA AO PONTEIRO ---------------------------------------------- Duas micro-interações que o resto do sistema consome. Não são enfeite: a primeira responde "o clique pegou?", a segunda responde "onde eu estou?". */ --onda: rgba(30,58,95,.16); /* ondulação a partir do ponto do clique */ --onda-forte:rgba(255,255,255,.34);/* a mesma, sobre preenchimento escuro */ --facho: rgba(30,58,95,.055); /* clarão que segue o cursor no cartão */ --dur-onda: 520ms; /* a ondulação some sozinha */ /* --- TIPOGRAFIA · FAMÍLIAS (self-host — ver fonts.css) ------------------ */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* --- TIPOGRAFIA · ESCALA ------------------------------------------------ */ --text-xs: 0.75rem; /* 12 — legendas */ --text-sm: 0.8125rem; /* 13 — tabelas, UI secundária */ --text-base: 0.875rem; /* 14 — corpo de UI */ --text-md: 1rem; /* 16 — título de seção */ --text-lg: 1.125rem; /* 18 — subtítulo */ --text-xl: 1.375rem; /* 22 — título de cartão */ --text-2xl: 1.75rem; /* 28 — título de página, valor de KPI */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-display: 600; --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.55; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.09em; --ls-mono: 0.28em; --nums-tabular: "tnum" 1, "lnum" 1; /* --- ESPAÇAMENTO (base 4) ----------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* --- RAIO --------------------------------------------------------------- */ --radius-sm: 4px; /* caixa de seleção, ponto de estado */ --radius: 6px; /* botões, campos, seletor — o padrão */ --radius-lg: 10px; /* cartões e quadros */ --radius-xl: 14px; /* modal e cartão de entrar */ --radius-full: 999px; /* --- BORDA / RÉGUA ------------------------------------------------------ */ --border-width: 1px; --rib-width: 3px; /* costela do aviso */ /* --- Z-INDEX ------------------------------------------------------------ */ --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-tooltip: 300; --z-toast: 400; --z-modal: 500; /* --- MOVIMENTO ---------------------------------------------------------- */ /* Resposta ao cursor: NUNCA acima de --dur-2. */ --dur-1: 140ms; /* micro: hover de linha, troca de fundo */ --dur-2: 200ms; /* padrão de interação: cartão, link, foco, botão */ --dur-3: 380ms; /* entrada de bloco */ --dur-4: 750ms; /* revelação: contador */ --dur-5: 900ms; /* revelação: sparkline, medidor */ --dur-6: 1000ms;/* revelação: anel */ --ease: cubic-bezier(.22,.61,.36,1); /* sai rápido, chega devagar */ --ease-standard: cubic-bezier(.2,0,0,1); --ease-decelerate: cubic-bezier(0,0,0,1); /* --- COMPONENTE (para app novo herdar sem reinventar) ------------------- */ --btn-h: 36px; --btn-pad: 9px 16px; --campo-h: 40px; --campo-pad: 10px 13px; --celula-pad: 10px 12px; --topbar-h: 52px; --marca-tam: 30px; --conteudo-max: 1180px; --conteudo-pad: 26px; --kpi-min: 168px; /* minmax do grid de indicadores */ --faisca-h: 24px; --medidor-h: 3px; --anel-tam: 64px; --anel-traco: 4px; /* Cor do dado num cartão de indicador. Sobrescreva por cartão:
*/ --dc: var(--ink); } /* ============================================================================= MOVIMENTO REDUZIDO — desliga tudo, mas CONGELA NO VALOR FINAL. Animação desligada não pode virar dado perdido: sparkline parada em zero mente sobre a tendência, medidor vazio mente sobre a proporção. As regras que fixam o estado final moram em app.css, junto dos componentes. ============================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; --dur-6: 0ms; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }