/** * Design tokens do StartFlow. * * A base vem do tema do Web Awesome (--wa-*). Aqui nos apenas SOBRESCREVEMOS * o que e da nossa marca - assim os componentes prontos (, , * ...) ja saem na identidade certa, inclusive dentro do Shadow DOM, * porque custom properties atravessam a fronteira do shadow. * * Regra: nenhum outro CSS do projeto declara valor de cor literal. * TODO: extrair a rampa definitiva da identidade em /assets/logos. */ :root { /* --- marca: rampa que alimenta os componentes do Web Awesome --- */ --wa-color-brand-95: #e8eef7; --wa-color-brand-90: #c9d8ec; --wa-color-brand-80: #9db9dc; --wa-color-brand-70: #7199cb; --wa-color-brand-60: #4a79b6; --wa-color-brand-50: #2f5c96; --wa-color-brand-40: #204474; --wa-color-brand-30: #163356; --wa-color-brand-20: #0f2440; --wa-color-brand-10: #0b1f3a; /* --- aliases do projeto: use estes no CSS proprio --- */ --cor-primaria: var(--wa-color-brand-10); --cor-primaria-contraste: #ffffff; --cor-acento: var(--wa-color-brand-50); --cor-fundo: var(--wa-color-surface-default, #f6f7f9); --cor-superficie: var(--wa-color-surface-raised, #ffffff); --cor-borda: var(--wa-color-neutral-border-quiet, #dfe3e8); --cor-texto: var(--wa-color-text-normal, #1c1f23); --cor-texto-fraco: var(--wa-color-text-quiet, #5b6470); --cor-sucesso: var(--wa-color-success-fill-loud, #1e8e3e); --cor-alerta: var(--wa-color-warning-fill-loud, #f29900); --cor-erro: var(--wa-color-danger-fill-loud, #d93025); /* --- espacamento (escala de 4px) --- */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-6: 24px; --esp-8: 32px; --raio: var(--wa-border-radius-m, 8px); --sombra-1: 0 1px 2px rgb(0 0 0 / 8%), 0 1px 3px rgb(0 0 0 / 6%); --fonte: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fonte-mono: ui-monospace, 'Cascadia Code', Consolas, monospace; } /* * Tema claro/escuro: o Web Awesome usa as classes .wa-light / .wa-dark no , * nao prefers-color-scheme. Quem alterna e public/js/core/tema.js. * Nao use @media (prefers-color-scheme) aqui - ficaria fora de sincronia com * os componentes. */