/* ════════════════════════════════════════════════════════════════════════ LASTRO — Design Tokens Documentação: docs/DESIGN_SYSTEM.md Contraste verificado por: npm run testar:contraste Regra que não se quebra: nenhum HEX fora deste arquivo. Se você precisou escrever uma cor em outro lugar, falta um token aqui. NOMES: mantidos em inglês, como já estavam. A Fase 1 troca os VALORES e ACRESCENTA o que faltava (funil de 5 estágios, borda de controle, escala tipográfica por papel). Renomear tudo seria refatoração grande, que esta fase não autoriza — e criaria dois vocabulários convivendo. ════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Geist'; src: url('../fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Geist'; src: url('../fonts/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Geist'; src: url('../fonts/Geist-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Geist'; src: url('../fonts/Geist-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* Inter variável (OFL), só para a moldura do painel — lateral, capa e rodapé (docs/38). Subconjunto latino, que cobre o português. Local, como tudo. */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Italic-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } :root { /* ════════ 1. TIPOGRAFIA ════════ Geist já está local, 5 pesos, sem custo de rede. Sobre a preferência por Inter, ver docs/DESIGN_SYSTEM.md §3. */ --font-sans: 'Geist', Inter, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, Consolas, monospace; /* A moldura do painel (lateral, capa, rodapé) é Inter, por decisão de marca. */ --font-moldura: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Escala bruta */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Peso de papel — calibrado com o dono. Fonte pesada demais fica "estourada": título vai de 500, negrito de 600, 700 só em micro-rótulo em caixa alta de até 12px. */ --fw-title: var(--fw-medium); --fw-strong: var(--fw-semibold); /* Papéis tipográficos. Hierarquia se monta com o papel inteiro (tamanho + peso + entrelinha), não combinando pedaços soltos. */ --display-size: var(--text-4xl); --display-weight: 600; --display-lh: 1.12; --h1-size: var(--text-3xl); --h1-weight: 600; --h1-lh: 1.18; --h2-size: var(--text-2xl); --h2-weight: 600; --h2-lh: 1.25; --h3-size: var(--text-lg); --h3-weight: 600; --h3-lh: 1.35; --body-size: var(--text-base);--body-weight: 400; --body-lh: 1.55; --body-sm-size: var(--text-sm); --body-sm-weight: 400; --body-sm-lh: 1.5; --label-size: var(--text-sm); --label-weight: 500; --label-lh: 1.4; --caption-size: var(--text-xs); --caption-weight: 400; --caption-lh: 1.45; /* KPI: o número é o conteúdo, não o rótulo. */ --kpi-size: 34px; --kpi-weight: 600; --kpi-lh: 1.05; --kpi-sm-size: 24px; --tracking-tight: -0.02em; --tracking-tighter: -0.03em; --tracking-wide: 0.04em; --tracking-label: 0.06em; --tracking-widest: 0.1em; /* ════════ 2. SUPERFÍCIE E TEXTO ════════ */ --bg: #f7f8fa; /* fundo da aplicação */ --bg-subtle: #ffffff; /* usado onde o código pedia "sutil" sobre o branco */ --bg-muted: #f2f4f7; /* cabeçalho de tabela, faixa, trilho */ --bg-inverted: #101828; --surface: #ffffff; /* cartão, tabela, modal */ --surface-2: #f2f4f7; --text: #111827; /* 16.7:1 sobre o fundo */ --text-secondary: #667085; /* 4.7:1 sobre o fundo — passa AA */ --text-muted: #667085; --text-subtle: #98a2b3; /* NUNCA texto essencial. Só placeholder e apoio */ --text-inverted: #ffffff; /* Duas bordas, de propósito. A decorativa é leve; a de controle precisa de 3:1 porque identifica um componente interativo (WCAG 1.4.11). */ --border: #e4e7ec; /* divisória, linha de tabela, contorno de cartão */ --border-control: #7d879c; /* input, select, checkbox — 3.6:1 sobre superfície */ --border-strong: #475467; --border-subtle: #f2f4f7; /* ════════ 3. MARCA ════════ O verde é do PRODUTO LASTRO. Não representa partido nem candidato. */ --primary: #087a55; /* 5.35:1 sobre superfície */ --primary-hover: #065f44; --primary-soft: #ecfdf3; --primary-border: #a6f4c5; --primary-text: #ffffff; /* ════════ 4. STATUS ════════ Namespace exclusivo de estado de UI. NUNCA usar para estágio do funil, mesmo quando o HEX coincidir. */ --success: #087a55; --success-bg: #ecfdf3; --success-border: #a6f4c5; --warning: #b54708; /* 5.43:1 */ --warning-bg: #fffaeb; --warning-border: #fedf89; --danger: #b42318; /* 6.57:1 */ --danger-bg: #fef3f2; --danger-border: #fecdca; --info: #175cd3; /* 5.99:1 */ --info-bg: #eff8ff; --info-border: #b2ddff; --neutral-bg: #f2f4f7; --neutral-border: #e4e7ec; /* ════════ 5. ESTÁGIOS DO FUNIL ════════ META → DECLARADO → IDENTIFICADO → VALIDADO → LASTREADO Namespace exclusivo, separado do de status. LIMITAÇÃO ASSUMIDA: os cinco se distinguem por MATIZ, não por luminância. Num funil de cinco passos não existe rampa que tenha ao mesmo tempo separação de luminância entre vizinhos e 4.5:1 de texto em todos — o passo mais claro teria que falhar como texto. Mitigação: nenhum estágio é comunicado só por cor. Barra sempre com rótulo, selo sempre com ícone e texto. Ver docs/DESIGN_SYSTEM.md §6. */ --stage-meta: #475467; --stage-meta-soft: #f2f4f7; --stage-declarado: #b54708; --stage-declarado-soft: #fffaeb; --stage-declarado-border: #fedf89; --stage-identificado: #175cd3; --stage-identificado-soft: #eff8ff; --stage-identificado-border:#b2ddff; --stage-validado: #0e7090; --stage-validado-soft: #f0f9ff; --stage-validado-border: #b9e6fe; --stage-lastreado: #087a55; --stage-lastreado-soft: #ecfdf3; --stage-lastreado-border: #a6f4c5; /* Preenchimento de barra. Opacidade sobre o âmbar escuro suja e vira marrom; o preenchimento tem token próprio, em cheio. */ --stage-declarado-fill: #f79009; --stage-identificado-fill: #53b1fd; --stage-validado-fill: #36bffa; --stage-lastreado-fill: #087a55; --track: #eaecf0; /* trilho das barras */ /* Compatibilidade: o código atual usa --declarado e --lastreado. Apontam para os estágios; serão removidos quando as telas migrarem. */ --declarado: var(--stage-declarado); --declarado-soft: var(--stage-declarado-soft); --declarado-border: var(--stage-declarado-border); --lastreado: var(--stage-lastreado); --lastreado-soft: var(--stage-lastreado-soft); --lastreado-border: var(--stage-lastreado-border); --alerta-silencio: var(--danger); --alerta-cega: var(--danger); --alerta-impossivel: var(--warning); /* ════════ 6. ESTADO DE REDE ════════ */ --offline: #667085; --offline-bg: #f2f4f7; --sincronizando: #175cd3; /* ════════ 7. ESPAÇAMENTO ════════ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ════════ 8. RAIO ════════ Sóbrio de propósito: cartão muito arredondado lê como rede social. */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ════════ 9. ELEVAÇÃO ════════ Discreta. Sombra pesada está proibida na orientação do produto. */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06); --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03); --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03); --shadow-2xl: var(--shadow-xl); /* ════════ 10. MOVIMENTO ════════ Só funcional: transição de estado. Nada decorativo. */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --duration-fast: 120ms; --duration: 180ms; --duration-slow: 260ms; /* ════════ 11. CAMADAS ════════ */ --z-dropdown: 100; --z-drawer: 400; --z-modal: 500; --z-tooltip: 1000; --z-toast: 2000; /* ════════ 12. TOQUE E FOCO ════════ */ --touch-min: 44px; /* alvo mínimo — mobilizador de pé, uma mão */ --focus-color: #087a55; --focus-width: 2px; --focus-offset: 2px; /* ════════ 13. PAINEL — tema Pará (docs/38_PAINEL_COMANDO.md) ════════ Paleta do briefing de 04/09/2026 para o painel como centro de comando. Azul manda na estrutura, vermelho é destaque, branco limpa. Vale SÓ para [data-view="painel"] (painel.css). Os estágios do funil (§5) continuam os mesmos: declarado âmbar, lastreado verde. */ --pa-navy-1: #062b55; --pa-navy-2: #073b72; --pa-navy-3: #041e3a; --pa-navy-4: #084c8d; --pa-azul: #0969da; --pa-azul-2: #0b73e0; --pa-azul-soft: #e8f1fc; --pa-vermelho: #d71920; --pa-vermelho-2: #c9141c; --pa-vermelho-claro:#ff8a8f; --pa-vermelho-soft: #fde8e9; --pa-fundo: #f4f7fb; --pa-texto: #102a43; --pa-cinza: #64748b; --pa-cinza-claro: #cbd5e1; --pa-borda: #e6ecf3; --pa-trilho: #e9eef5; --pa-verde: #16a34a; --pa-verde-soft: #e7f7ec; --pa-amarelo: #f59e0b; --pa-amarelo-escuro:#92400e; --pa-amarelo-soft: #fef3c7; --pa-nav-texto: rgba(255, 255, 255, 0.82); --pa-nav-rotulo: #7fa7cf; --pa-nav-hover: rgba(255, 255, 255, 0.09); --pa-veu-forte: rgba(5, 42, 82, 0.80); --pa-veu-leve: rgba(5, 72, 145, 0.60); --pa-veu-media: rgba(5, 55, 110, 0.55); --pa-veu-fraca: rgba(6, 43, 85, 0.15); --pa-sombra: 0 2px 10px rgba(15, 23, 42, 0.05); --pa-sombra-hover: 0 6px 18px rgba(15, 23, 42, 0.08); --pa-sombra-vermelha: 0 4px 12px rgba(215, 25, 32, 0.35); /* Moldura do painel (briefing de 04/09/2026, noite): lateral, capa e rodapé. */ --pa-navy-5: #052b53; --pa-vermelho-moldura:#e31b23; --pa-branco-92: rgba(255, 255, 255, 0.92); --pa-branco-72: rgba(255, 255, 255, 0.72); --pa-branco-68: rgba(255, 255, 255, 0.68); --pa-branco-50: rgba(255, 255, 255, 0.50); --pa-linha-branca: rgba(255, 255, 255, 0.12); --pa-seletor: rgba(3, 36, 75, 0.62); --pa-sombra-ativo: 0 3px 10px rgba(0, 0, 0, 0.15); --pa-veu-h1: rgba(5, 42, 82, 0.66); --pa-veu-h2: rgba(5, 65, 125, 0.48); --pa-veu-h3: rgba(5, 42, 82, 0.68); --pa-branco-90: rgba(255, 255, 255, 0.90); --pa-branco-88: rgba(255, 255, 255, 0.88); --pa-sombra-texto: 0 1px 3px rgba(0, 0, 0, 0.18); --pa-sombra-mapa: 0 5px 12px rgba(0, 0, 0, 0.15); /* véu sobre o topo da foto da lateral: só nos primeiros ~40% */ --pa-navy-6: #063565; --pa-navy-6-65: rgba(6, 53, 101, 0.65); --pa-navy-6-20: rgba(6, 53, 101, 0.20); --pa-navy-6-0: rgba(6, 53, 101, 0); /* Presença territorial (briefing de 05/09/2026, docs/39): o mapa do Pará e os pontos. O verde do ponto é o do produto (lastreado), não o do tema. */ --pa-mapa-fundo: #eaf1f8; --pa-mapa-contorno: #0b4f8a; --pa-mapa-sombra: rgba(6, 43, 85, 0.18); --pa-cinza-azulado: #9aaec2; --pa-dica-fundo: #062b55; --pa-dica-linha: rgba(255, 255, 255, 0.10); --pa-dica-texto: rgba(255, 255, 255, 0.78); --pa-branco-96: rgba(255, 255, 255, 0.96); }