/* =========================================================================== EL MISTI — Design System — Tokens Arquivo único com todas as custom properties (claro + escuro). Procedência: extraído dos 7 dashboards internos que já usam a família "verde El Misti" (occupancy, sales, cs, clarity, extras, links, automacoes) em Empresas/El Misti/. É a paleta RECOMENDADA — ver ../DECISOES.md para o porquê e para a paleta alternativa (laranja/navy, 2 dashboards) que ainda não migrou. Modo escuro: baseado no padrão já validado em extras-dashboard e links-dashboard ([data-theme="dark"] no , persistido em localStorage). Ver COMPONENTS.md > "Alternador de tema". Onde este arquivo diverge dos dashboards de origem (e por quê), está comentado token a token — nenhuma cor aqui foi inventada sem checar contraste. Tabela completa em tokens/colors.md. =========================================================================== */ :root { /* --------------------------------------------------------------------- MARCA --------------------------------------------------------------------- */ --color-brand-primary: #1B5E20; /* botão primário, sublinhado de aba ativa, header de tabela */ --color-brand-primary-light: #2E7D32; /* hover, links, valores positivos, CTA secundário */ --color-brand-primary-bg: #E8F5E9; /* fundo suave — cabeçalho de tabela, hover de linha, badge neutro */ --color-brand-dark: #0D2818; /* header do painel (fundo escuro), headings sobre card */ /* --------------------------------------------------------------------- SUPERFÍCIES --------------------------------------------------------------------- */ --color-surface: #f5f7f5; /* fundo da página */ --color-surface-card: #ffffff; /* cards, seções, dropdowns */ --color-border: #d5e0d5; /* bordas, divisórias, hairlines */ /* --------------------------------------------------------------------- TEXTO --------------------------------------------------------------------- */ --color-text: #1a2e1a; /* texto principal — 14.49:1 sobre card, PASSA AA */ --color-text-muted: #5f7060; /* texto secundário, legendas, labels — 5.29:1 sobre card, PASSA AA */ --color-heading: var(--color-brand-dark); /* títulos de seção, valores de KPI — 15.74:1 sobre card, PASSA AA */ /* --------------------------------------------------------------------- STATUS (texto) — usar SEMPRE estes tokens quando a cor colorir texto. Nunca use --color-warning-fill ou --color-accent-fill como cor de fonte: falham contraste (ver tokens/colors.md, linhas "REPROVA"). --------------------------------------------------------------------- */ --color-success-text: #2E7D32; /* 5.13:1 PASSA */ --color-danger-text: #C62828; /* 5.62:1 PASSA */ --color-info-text: #1565C0; /* 5.75:1 PASSA */ --color-warning-text: #BF360C; /* FIX: o laranja de marca (#F9A825) direto como texto reprova a 1.97:1. #BF360C é o tom que o automacoes-dashboard já usa pro sync-banner de aviso — reaproveitado aqui como padrão do sistema. 5.60:1 PASSA */ --color-accent-text: #00695C; /* FIX: o teal de marca (#00897B) como texto reprova a 4.32:1 (fica abaixo de 4.5 pra texto normal). Versão escurecida — 6.61:1 PASSA */ --color-purple-text: #6A1B9A; /* usado em badges "inferido"/dataviz de 5ª série */ /* --------------------------------------------------------------------- STATUS (preenchimento) — fundos, barras de gráfico, ícones, bordas de destaque. NÃO usar como cor de texto direto (ver acima). --------------------------------------------------------------------- */ --color-success-fill: #2E7D32; --color-danger-fill: #C62828; --color-info-fill: #1565C0; --color-warning-fill: #F9A825; --color-accent-fill: #00897B; --color-purple-fill: #6A1B9A; --color-ga4: #4285F4; /* azul institucional do Google — usar SÓ pra identificar dado vindo do GA4 (pill, legenda, ponto de gráfico), nunca como texto corrido em fundo claro (3.56:1, reprova) */ /* --------------------------------------------------------------------- COMPONENTES QUE MUDAM COM O TEMA (ponte pro dark mode — nunca usar a cor "crua" da marca aqui dentro, sempre estes tokens intermediários) --------------------------------------------------------------------- */ --color-table-head-bg: var(--color-brand-primary-bg); --color-hover-bg: var(--color-brand-primary-bg); --color-hachure-bg: repeating-linear-gradient(135deg, rgba(95,112,96,.16), rgba(95,112,96,.16) 4px, rgba(95,112,96,.04) 4px, rgba(95,112,96,.04) 8px); --color-overlay: rgba(13,40,24,.35); /* fundo de drawer/modal */ /* --------------------------------------------------------------------- TIPOGRAFIA — ver tokens/typography.md pro racional completo --------------------------------------------------------------------- */ --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* --font-heading (Outfit) existe só como referência da identidade do site público — dashboards internos NÃO carregam essa fonte por padrão. Ver DECISOES.md antes de usar. */ --font-heading: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --fs-2xs: 9px; /* kpi-label, badge, tag */ --fs-xs: 10px; /* kpi-sub, filter-label, th de tabela */ --fs-sm: 11px; /* corpo padrão, td de tabela, insight-desc */ --fs-base: 12px;/* section-title, insight-title */ --fs-md: 13px; /* tab-btn, filtros com toque de 44px */ --fs-lg: 14px; /* header-title do painel */ --fs-xl: 20px; /* kpi-value compacto */ --fs-2xl: 24px; /* kpi-value grande (telas lidas de longe — balcão/recepção) */ --fs-3xl: 28px; /* kpi-value grande em mobile (kpi sozinho na largura toda) */ --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* uso raro — número de destaque tipo "comp-highlight" */ --lh-tight: 1.2; /* valores de KPI, headings */ --lh-base: 1.3; /* corpo do dashboard — mais denso que texto de marketing */ --lh-relaxed: 1.5;/* parágrafos longos (notas metodológicas, tooltips) */ /* --------------------------------------------------------------------- ESPAÇAMENTO — escala 4px. Dashboards legados usam valores fora da escala (3px, 5px, 6px, 9px) — ver spacing.md pra lista de desvios. Componentes NOVOS devem usar só os tokens abaixo. --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* --------------------------------------------------------------------- RAIO --------------------------------------------------------------------- */ --radius-sm: 4px; /* inputs, selects, botões pequenos, tags */ --radius-md: 8px; /* cards, seções, badges, dropdowns — o mais usado */ --radius-lg: 12px; /* modais, drawers, painéis de overlay */ --radius-full: 999px; /* elementos redondos: dots, ícones circulares */ /* --------------------------------------------------------------------- ELEVAÇÃO (sombra) --------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0,40,0,0.08); /* cards e kpi-cards — a sombra do dia a dia */ --shadow-md: 0 4px 12px rgba(0,0,0,0.12); /* dropdowns, menus flutuantes */ --shadow-lg: 0 12px 40px rgba(0,0,0,0.3); /* modais e painéis de overlay */ --shadow-drawer: -4px 0 16px rgba(0,0,0,0.2); /* drawer lateral (direcional) */ /* --------------------------------------------------------------------- TOQUE (mobile) — herdado do padrão extras/links: recepção usa tablet de balcão, alvo de toque nunca pode ficar abaixo disso. --------------------------------------------------------------------- */ --touch-target: 44px; } /* =========================================================================== MODO ESCURO Ativado via [data-theme="dark"] no . Ver COMPONENTS.md pro botão pronto (ícone sol/lua + persistência em localStorage). Nota importante (achado deste levantamento): nos dashboards de origem, as cores de status (verde/vermelho/azul/teal/roxo) eram usadas como texto SEM override pro escuro — o valor "claro" ficava idêntico no fundo escuro e reprovava contraste (ex.: vermelho de deltas negativos caía pra 2.87:1 sobre o card escuro). Os tokens abaixo corrigem isso: mesma cor, versão clareada, só quando ela colore TEXTO. =========================================================================== */ [data-theme="dark"] { --color-surface: #10160f; --color-surface-card: #1a231a; --color-border: #2c3a2c; --color-text: #e6ede6; --color-text-muted: #8fa08f; --color-heading: #eafaea; --color-success-text: #81C784; /* FIX: #2E7D32 sem override caía pra 3.15:1. 8.03:1 PASSA */ --color-danger-text: #EF5350; /* FIX: #C62828 sem override caía pra 2.87:1. 4.64:1 PASSA */ --color-info-text: #64B5F6; /* FIX: #1565C0 sem override caía pra 2.81:1. 7.30:1 PASSA */ --color-warning-text: #FFCC80; /* já usado hoje no automacoes-dashboard — 10.93:1 PASSA */ --color-accent-text: #4DB6AC; /* FIX: #00897B sem override caía pra 3.74:1. 6.62:1 PASSA */ --color-purple-text: #CE93D8; /* já usado hoje no badge "inferido" — 6.76:1 PASSA */ --color-table-head-bg: rgba(46,125,50,.22); --color-hover-bg: rgba(46,125,50,.14); --color-hachure-bg: repeating-linear-gradient(135deg, rgba(230,237,230,.10), rgba(230,237,230,.10) 4px, rgba(230,237,230,.02) 4px, rgba(230,237,230,.02) 8px); --color-overlay: rgba(0,0,0,.55); --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); /* shadow-md/lg/drawer não precisam de override — já são pretas o bastante pro fundo escuro */ }