/* Tokens de cor do Renda Verde Univence. Cada cor de marca (verde-escuro, verde-claro, rosa, azul, amarelo) tem uma escala 50->900 gerada a partir do hex oficial (fixado no passo 500). Componentes NÃO devem usar --verde-escuro-500 etc. diretamente - usam a camada semantica abaixo (--color-*), que e a unica coisa que muda entre temas (claro / alto-contraste). Guia de uso por posicao na escala (vale para as 5 cores de marca): 100 = fundo suave de badge/tag (tom pastel) 500 = valor exato da marca - SO para preenchimento decorativo sem texto em cima (grafico radar, barra de progresso, icone solido) - nao usar como cor de texto: contraste contra branco fica abaixo de 3:1 (reprovado mesmo pra texto grande) 700 = texto/icone da marca sobre fundo claro, e fundo solido de botao com texto branco (sempre >= 4.5:1 contra branco) 800 = texto de badge sobre o fundo 100 da mesma cor (sempre >= 6:1) 900 = usado no tema Alto Contraste (ver bloco no fim do arquivo) Excecoes documentadas (verificadas por script, nao de memoria): - --amarelo-700 mede só 3.91:1 contra branco - abaixo do mínimo de 4.5:1 para texto. --color-warning-strong por isso usa --amarelo-800 (7.34:1), não o 700 da convenção. - --rosa-700/800 (a cor "rosa" oficial da marca) lê como rosa/vinho, não como "perigo" - ambíguo para o significado de erro/rejeição. --color-danger-strong e --color-danger-soft-text usam uma família própria, --rosa-perigo-700/800/900, com o mesmo matiz deslocado para perto do vermelho (~357°, mantendo saturação/luminosidade da família rosa original) - só o fundo pastel do badge (--color-danger-soft) continua usando o rosa de marca verdadeiro (--rosa-100), porque ali é só decoração de fundo. */ :root { /* verde-escuro (oficial: #25b99e) */ --verde-escuro-50: 245 250 249; --verde-escuro-100: 205 235 230; --verde-escuro-200: 163 223 212; --verde-escuro-300: 117 214 197; --verde-escuro-400: 67 209 183; --verde-escuro-500: 37 185 158; --verde-escuro-600: 29 152 129; --verde-escuro-700: 21 118 100; --verde-escuro-800: 14 83 71; --verde-escuro-900: 8 48 41; /* verde-claro (oficial: #88c58c) */ --verde-claro-50: 246 249 246; --verde-claro-100: 226 236 227; --verde-claro-200: 205 225 206; --verde-claro-300: 183 215 185; --verde-claro-400: 160 205 163; --verde-claro-500: 136 197 140; --verde-claro-600: 89 175 94; --verde-claro-700: 62 132 67; --verde-claro-800: 40 86 43; --verde-claro-900: 18 38 19; /* rosa (oficial: #e887ba) */ --rosa-50: 250 244 247; --rosa-100: 243 226 235; --rosa-200: 238 205 223; --rosa-300: 235 183 210; --rosa-400: 233 160 198; --rosa-500: 232 135 186; --rosa-600: 221 68 149; --rosa-700: 180 31 110; --rosa-800: 115 19 69; --rosa-900: 49 8 29; /* rosa-perigo: mesmo matiz de origem que o rosa de marca, deslocado para ~357° (quase vermelho) - usado só pelas variáveis semânticas de danger que precisam ler como "perigo", nunca diretamente em componentes. Ver nota de contraste no topo. */ --rosa-perigo-700: 180 31 38; --rosa-perigo-800: 115 19 24; --rosa-perigo-900: 49 8 10; /* azul (oficial: #6eaceb) */ --azul-50: 244 247 251; --azul-100: 221 232 243; --azul-200: 197 217 238; --azul-300: 170 202 235; --azul-400: 141 187 234; --azul-500: 110 172 235; --azul-600: 45 136 228; --azul-700: 21 100 179; --azul-800: 13 64 116; --azul-900: 5 28 51; /* amarelo (oficial: #f0be2d) */ --amarelo-50: 251 249 244; --amarelo-100: 242 234 211; --amarelo-200: 237 221 174; --amarelo-300: 235 209 134; --amarelo-400: 236 199 91; --amarelo-500: 240 190 45; --amarelo-600: 215 163 13; --amarelo-700: 162 123 8; --amarelo-800: 109 82 5; --amarelo-900: 54 41 2; /* neutro (leve matiz da marca, saturacao quase zero) */ --neutro-50: 251 251 251; --neutro-100: 244 246 245; --neutro-200: 228 231 231; --neutro-300: 206 212 211; --neutro-400: 168 179 177; --neutro-500: 129 146 143; --neutro-600: 100 115 112; --neutro-700: 76 87 85; --neutro-800: 52 60 59; --neutro-900: 31 35 35; /* ===== Camada semantica (tema CLARO / padrao) ===== */ /* Componentes usam estas variaveis, nunca as --cor-N acima diretamente. */ --color-bg: var(--neutro-50); --color-surface: 255 255 255; --color-surface-alt: var(--neutro-100); --color-border: var(--neutro-200); --color-text: var(--neutro-900); --color-text-muted: var(--neutro-700); /* primary <- verde-escuro */ --color-primary: var(--verde-escuro-500); /* preenchimento decorativo, sem texto */ --color-primary-strong: var(--verde-escuro-700); /* texto/icone, e fundo solido de botao (texto branco) */ --color-on-primary: 255 255 255; /* texto sobre --color-primary-strong */ --color-primary-soft: var(--verde-escuro-100); /* fundo de badge */ --color-primary-soft-text: var(--verde-escuro-800); /* texto do badge, sobre --color-primary-soft */ /* success <- verde-claro */ --color-success: var(--verde-claro-500); /* preenchimento decorativo, sem texto */ --color-success-strong: var(--verde-claro-700); /* texto/icone, e fundo solido de botao (texto branco) */ --color-on-success: 255 255 255; /* texto sobre --color-success-strong */ --color-success-soft: var(--verde-claro-100); /* fundo de badge */ --color-success-soft-text: var(--verde-claro-800); /* texto do badge, sobre --color-success-soft */ /* warning <- amarelo. strong e soft-text usam -800 (nao -700): o -700 mede 3.91:1 contra branco, abaixo do minimo de 4.5:1 - ver nota de contraste no topo do arquivo. */ --color-warning: var(--amarelo-500); /* preenchimento decorativo, sem texto */ --color-warning-strong: var(--amarelo-800); /* texto/icone, e fundo solido de botao (texto branco) - 7.34:1 */ --color-on-warning: 255 255 255; /* texto sobre --color-warning-strong */ --color-warning-soft: var(--amarelo-100); /* fundo de badge */ --color-warning-soft-text: var(--amarelo-800); /* texto do badge, sobre --color-warning-soft */ /* danger <- rosa-perigo (nao o rosa de marca - ver nota de contraste/semantica no topo). */ --color-danger: var(--rosa-500); /* preenchimento decorativo, sem texto - ok ser o rosa de marca aqui */ --color-danger-strong: var(--rosa-perigo-700); /* texto/icone, e fundo solido de botao - 6.64:1 */ --color-on-danger: 255 255 255; /* texto sobre --color-danger-strong */ --color-danger-soft: var(--rosa-100); /* fundo de badge - rosa de marca verdadeiro, so decorativo */ --color-danger-soft-text: var(--rosa-perigo-800); /* texto do badge - 11.44:1 */ /* info <- azul */ --color-info: var(--azul-500); /* preenchimento decorativo, sem texto */ --color-info-strong: var(--azul-700); /* texto/icone, e fundo solido de botao (texto branco) */ --color-on-info: 255 255 255; /* texto sobre --color-info-strong */ --color-info-soft: var(--azul-100); /* fundo de badge */ --color-info-soft-text: var(--azul-800); /* texto do badge, sobre --color-info-soft */ } /* Tema Alto Contraste: publico do programa inclui pessoas com baixa acuidade visual. Regra do tema: preto puro / branco puro, sem tons pasteis - todo badge vira contorno solido (fundo branco, borda e texto na cor 900, >=14:1 de contraste) em vez de fundo pastel + texto escuro. Ativado via . */ [data-theme="alto-contraste"] { --color-bg: 255 255 255; --color-surface: 255 255 255; --color-surface-alt: 255 255 255; --color-border: 0 0 0; --color-text: 0 0 0; --color-text-muted: 0 0 0; --color-primary: var(--verde-escuro-900); --color-primary-strong: var(--verde-escuro-900); --color-on-primary: 255 255 255; --color-primary-soft: 255 255 255; /* badge vira contorno, sem preenchimento */ --color-primary-soft-text: var(--verde-escuro-900); --color-success: var(--verde-claro-900); --color-success-strong: var(--verde-claro-900); --color-on-success: 255 255 255; --color-success-soft: 255 255 255; /* badge vira contorno, sem preenchimento */ --color-success-soft-text: var(--verde-claro-900); --color-warning: var(--amarelo-900); --color-warning-strong: var(--amarelo-900); --color-on-warning: 255 255 255; --color-warning-soft: 255 255 255; /* badge vira contorno, sem preenchimento */ --color-warning-soft-text: var(--amarelo-900); --color-danger: var(--rosa-perigo-900); --color-danger-strong: var(--rosa-perigo-900); --color-on-danger: 255 255 255; --color-danger-soft: 255 255 255; /* badge vira contorno, sem preenchimento */ --color-danger-soft-text: var(--rosa-perigo-900); --color-info: var(--azul-900); --color-info-strong: var(--azul-900); --color-on-info: 255 255 255; --color-info-soft: 255 255 255; /* badge vira contorno, sem preenchimento */ --color-info-soft-text: var(--azul-900); }