/* * A PALETA — os tokens que NÃO giram com a instalação. * * ARQUIVO GERADO por docs/design-tokens/gerar-paleta.mjs — NÃO EDITE À MÃO. * A fonte da verdade é a receita naquele arquivo (ADR-013). Uma edição aqui é perdida na próxima * execução, e — pior — não alcança o aplicativo Android, que é a divergência entre plataformas que * aquele ADR existe para impedir. * * node docs/design-tokens/gerar-paleta.mjs --alvo=web */ /* * Cada token de cor é declarado duas vezes: o valor claro em `:root`, o escuro em * `html[data-tema-efetivo="escuro"]`. O atributo é escrito pelo servidor em cada moldura, de modo * que o valor já está no `` quando esta folha é aplicada, e não há piscada. * * NÃO existe `@media (prefers-color-scheme: dark)` aqui, nem em folha nenhuma: o * `$mdThemingProvider` do Angular Material não entende `@media` — ele decide em JavaScript, no * `config()` —, e no modo Automático o CSS seguiria a media query enquanto o Material seguiria o * atributo. Um seletor só, lido pelos dois. * * Os 17 papéis que GIRAM com a marca não estão aqui: eles moram em `marcas.css`, que é carregada * imediatamente depois desta folha (ADR-019). `--fundo` e os outros três neutros aparecem no * `:root` daqui — no claro eles são invariantes — e nos blocos escuros de lá, onde são tingidos * ao matiz da instalação (ADR-009). * * A RAZÃO DE CONTRASTE VEM ANOTADA NA LINHA, e é recalculada a cada emissão pela fórmula da * WCAG 2.1, compondo o alfa sobre a superfície efetiva. O comentário é a documentação; quem manda * é `PaletaGeradaTest` e `ContrasteDaMarcaTest`. */ :root { --fundo: #FAFAFA; /* superfície da página — isento */ --superficie: #FFFFFF; /* cartão, sidenav, tabela — isento */ --superficie-elevada: #FFFFFF; /* diálogo, menu, select, calendário — isento */ --superficie-sobreposta: #F5F5F5; /* zebra, hover, tooltip — isento */ --texto: #1C2033; /* 15,4:1 no fundo · 16,1:1 na superfície */ --texto-secundario: #616161; /* 5,9:1 no fundo · 6,2:1 na superfície */ --texto-desabilitado: #9E9E9E; /* 2,6:1 no fundo — isento (WCAG 1.4.3, incidental) */ --borda: #E0E0E0; /* isento (WCAG 1.4.11) */ --borda-componente: #757575; /* 4,4:1 no fundo · 4,6:1 na superfície (mín. 3) */ --borda-campo: #A8A8A8; /* 2,3:1 no fundo · 2,4:1 na superfície (mín. 1,5) — contorno do campo em repouso, suave de propósito (ADR-004) */ --sucesso: #2E7D32; /* 4,9:1 no fundo · 5,1:1 na superfície */ --atencao: #F57F17; /* 2,5:1 no fundo — dívida do claro, ver PaletaDoTemaTest */ --erro: #D32F2F; /* 4,8:1 no fundo · 5,0:1 na superfície */ --severidade-critico-tinta: #B3261E; /* 5,7:1 sobre --severidade-critico-fundo · 6,5:1 na superfície */ --severidade-critico-fundo: #FDECEA; /* superfície tingida — isento */ --severidade-critico-borda: #E9A49E; /* 2,0:1 na superfície — contorno isento */ --severidade-alto-tinta: #8A4B00; /* 6,1:1 sobre --severidade-alto-fundo · 6,8:1 na superfície */ --severidade-alto-fundo: #FFF0DB; /* superfície tingida — isento */ --severidade-alto-borda: #E0AE6B; /* 2,0:1 na superfície — contorno isento */ --severidade-medio-tinta: #004D51; /* 8,1:1 sobre --severidade-medio-fundo · 9,6:1 na superfície */ --severidade-medio-fundo: #DFEEEF; /* superfície tingida — isento */ --severidade-medio-borda: #71BABE; /* 2,2:1 na superfície — contorno isento */ --severidade-desconhecido-tinta: #616161; /* 5,3:1 sobre --severidade-desconhecido-fundo · 6,2:1 na superfície */ --severidade-desconhecido-fundo: #EEEEEE; /* superfície tingida — isento */ --severidade-desconhecido-borda: #BDBDBD; /* 1,9:1 na superfície — contorno isento */ --marca-placa: #FFFFFF; /* igual nos dois temas: a arte da marca não se adapta — isento */ --marca-placa-tinta: #1C2033; /* 16,1:1 sobre --marca-placa */ --texto-alfa: rgba(0, 0, 0, 0.87); /* 15,6:1 no fundo · 16,1:1 na superfície */ --texto-secundario-alfa: rgba(0, 0, 0, 0.72); /* 9,0:1 no fundo · 9,3:1 na superfície */ --texto-rotulo-alfa: rgba(0, 0, 0, 0.62); /* 6,1:1 no fundo · 6,2:1 na superfície */ --texto-esmaecido-alfa: rgba(0, 0, 0, 0.54); /* 4,5:1 no fundo · 4,6:1 na superfície */ --texto-tenue-alfa: rgba(0, 0, 0, 0.32); /* 2,2:1 no fundo — decorativo, isento */ --texto-corpo: #424242; /* 9,6:1 no fundo · 10,1:1 na superfície */ --texto-sobre-acao: #FFFFFF; /* 6,8:1 sobre --acao (mín. 4,5) */ --icone-neutro: #757575; /* 4,4:1 no fundo · 4,6:1 na superfície */ --borda-alfa: rgba(0, 0, 0, 0.12); /* isento (WCAG 1.4.11) */ --borda-forte-alfa: rgba(0, 0, 0, 0.24); /* isento */ --borda-tenue-alfa: rgba(0, 0, 0, 0.08); /* isento */ --veu-hover: rgba(0, 0, 0, 0.04); /* realce de linha sob o ponteiro — isento */ --veu-codigo: rgba(0, 0, 0, 0.08); /* fundo do `` embutido na prosa — isento */ --veu-sombra-painel: rgba(0, 0, 0, 0.3); /* painel flutuante do Panorama — isento */ --veu-sombra-cartao: rgba(0, 0, 0, 0.5); /* cartão de Login e de "mudou de endereço" — isento */ --superficie-neutra: #EEEEEE; /* preenchimento cinza: marcador, paginação — isento */ --borda-neutra: #BDBDBD; /* 1,9:1 na superfície — contorno isento */ --borda-media: #CCCCCC; /* 1,6:1 na superfície — contorno isento */ --erro-fundo: #FFEBEE; /* superfície tingida — isento */ --erro-tinta: #7F1210; /* 9,2:1 sobre --erro-fundo */ --erro-tinta-media: #B71C1C; /* 5,8:1 sobre --erro-fundo · 6,6:1 na superfície */ --erro-borda: #EF9A9A; /* 2,1:1 na superfície — contorno isento */ --erro-mensagem: #F44336; /* 3,5:1 no fundo — dívida do claro */ --atencao-fundo: #FFF3E0; /* superfície tingida — isento */ --atencao-tinta: #6A3A00; /* 8,6:1 sobre --atencao-fundo */ --atencao-tinta-media: #E65100; /* 3,5:1 sobre --atencao-fundo — ícone, mín. 3 */ --sucesso-fundo: #E8F5E9; /* superfície tingida — isento */ --sucesso-tinta: #1B5E20; /* 7,0:1 sobre --sucesso-fundo */ --realce-fundo: #FFF8E1; /* --texto por cima: 15,2:1 */ --panorama-painel-fundo: rgba(255, 255, 255, 0.96); /* superfície tingida — isento */ --panorama-painel-fundo-escuro: rgba(33, 33, 33, 0.96); /* --texto-alfa por cima: 1,4:1 */ --calor-1: #FFFFB2; /* superfície tingida — isento */ --calor-2: #FED976; /* superfície tingida — isento */ --calor-3: #FEB24C; /* superfície tingida — isento */ --calor-4: #FD8D3C; /* superfície tingida — isento */ --calor-5: #F03B20; /* superfície tingida — isento */ --calor-6: #BD0026; /* superfície tingida — isento */ --evento-agendado: #6B2667; /* --texto-sobre-acao por cima: 10,0:1 */ --evento-agendado-tinta: #6B2667; /* 9,6:1 no fundo · 10,0:1 na superfície */ --evento-em-andamento: #00695C; /* --texto-sobre-acao por cima: 6,6:1 */ --evento-em-andamento-tinta: #00695C; /* 6,3:1 no fundo · 6,6:1 na superfície */ --evento-pendente: #B71C1C; /* --texto-sobre-acao por cima: 6,6:1 */ --evento-pendente-tinta: #B71C1C; /* 6,3:1 no fundo · 6,6:1 na superfície */ --evento-reaberto: #A34600; /* --texto-sobre-acao por cima: 6,1:1 */ --evento-reaberto-tinta: #A34600; /* 5,9:1 no fundo · 6,1:1 na superfície */ --evento-finalizado: #1B5E20; /* --texto-sobre-acao por cima: 7,9:1 */ --evento-finalizado-tinta: #1B5E20; /* 7,5:1 no fundo · 7,9:1 na superfície */ --evento-indefinido: #616161; /* --texto-sobre-acao por cima: 6,2:1 */ --evento-indefinido-tinta: #616161; /* 5,9:1 no fundo · 6,2:1 na superfície */ --evento-foco: #6B2667; /* 9,6:1 no fundo — anel próprio da Agenda */ --evento-titulo-tinta: #6B2667; /* 9,6:1 no fundo · 10,0:1 na superfície */ --evento-leitura-fundo: #EF6C00; /* --texto-sobre-acao por cima: 3,1:1 */ --evento-atipica-tinta: #EF6C00; /* 3,0:1 no fundo — ícone com `title` */ --evento-encenado-borda: #FFB300; /* contorno sobre o âmbar, isento */ --evento-encenado-tinta: #A25400; /* 5,2:1 sobre --realce-fundo */ --evento-desatualizado-borda: #FFCC80; /* 1,5:1 na superfície — contorno isento */ --evento-desatualizado-tinta: #7A3400; /* 8,3:1 sobre --atencao-fundo */ --evento-chip-fundo: #E0E0E0; /* --texto-corpo por cima: 7,6:1 */ --evento-dia-fundo: #ECEFF1; /* --texto por cima: 13,9:1 */ --legado-destaque-fundo: #428BCA; /* --texto-sobre-acao por cima: 3,6:1 */ --legado-divisor: #DDDDDD; /* isento */ --legado-divisor-suave: #EEEEEE; /* isento */ --legado-link-hover: #23527C; /* 7,0:1 sobre --superficie-neutra */ --legado-esmaecido: #777777; /* 4,3:1 no fundo · 4,5:1 na superfície */ --upload-tinta: #7C9EB2; /* 2,7:1 sobre --upload-fundo — dívida do claro */ --upload-alvo-fundo: #F0F9FF; /* superfície tingida — isento */ --upload-alvo-borda: #BED2DB; /* isento */ --lista-selecionada: #81C784; /* superfície tingida — isento */ --lista-selecionada-par: #66BB6A; /* superfície tingida — isento */ --lista-realce: #E57373; /* superfície tingida — isento */ --lista-realce-par: #EF5350; /* superfície tingida — isento */ --lista-aviso: #FFB74D; /* superfície tingida — isento */ --lista-aviso-par: #FFA726; /* superfície tingida — isento */ --lista-zebra: #E0E0E0; /* superfície tingida — isento */ --lista-hover: #BDBDBD; /* superfície tingida — isento */ --login-cartao-fundo: rgba(255, 255, 255, 1); /* superfície tingida — isento */ --login-veu: rgba(0, 0, 0, 0); /* superfície tingida — isento */ --downloads-botao-fundo: #666666; /* branco por cima: 5,7:1 */ --downloads-botao-borda: #FFFFFF; /* superfície tingida — isento */ --aud-tinta: #1C2033; /* 15,4:1 no fundo · 16,1:1 na superfície */ --aud-corpo: #424242; /* 9,6:1 no fundo · 10,1:1 na superfície */ --aud-esmaecido: #616161; /* 5,9:1 no fundo · 6,2:1 na superfície */ --aud-borda: #E0E0E0; /* isento */ --aud-recuado: #F5F5F5; /* bloco recuado dentro do cartão — isento */ --aud-aviso-fundo: #FFF3E0; /* superfície tingida — isento */ --aud-aviso-borda: #E8B87A; /* 1,8:1 na superfície — contorno isento */ --aud-aviso-tinta: #8A5300; /* 5,8:1 sobre o próprio fundo */ --aud-erro-tinta: #B3261E; /* 6,3:1 no fundo · 6,5:1 na superfície */ --aud-sucesso-tinta: #2E7D32; /* 4,9:1 no fundo · 5,1:1 na superfície */ } html[data-tema-efetivo="escuro"] { --texto: rgba(255, 255, 255, 0.87); /* 14,2:1 no fundo · 11,0:1 na elevada */ --texto-secundario: rgba(255, 255, 255, 0.7); /* 9,4:1 no fundo · 7,6:1 na elevada */ --texto-desabilitado: rgba(255, 255, 255, 0.38); /* 3,6:1 no fundo — isento */ --borda: rgba(255, 255, 255, 0.12); /* isento */ --borda-componente: #8A8A8A; /* 5,4:1 no fundo · 4,0:1 na elevada (mín. 3) */ --borda-campo: #5C5C5C; /* 2,8:1 no fundo · 2,5:1 na superfície (mín. 1,5) — contorno do campo em repouso, suave de propósito (ADR-004) */ --sucesso: #81C784; /* 9,3:1 no fundo · 8,3:1 na superfície */ --atencao: #FFB74D; /* 10,8:1 no fundo · 9,6:1 na superfície */ --erro: #EF9A9A; /* 8,7:1 no fundo · 7,8:1 na superfície */ --severidade-critico-tinta: #F2B8B5; /* 9,4:1 sobre --severidade-critico-fundo · 9,8:1 na superfície */ --severidade-critico-fundo: #3B1512; /* superfície tingida — isento */ --severidade-critico-borda: #E57373; /* 5,6:1 na superfície (mín. 3) */ --severidade-alto-tinta: #FFD8A8; /* 10,8:1 sobre --severidade-alto-fundo · 12,4:1 na superfície */ --severidade-alto-fundo: #3D2400; /* superfície tingida — isento */ --severidade-alto-borda: #B8860B; /* 5,1:1 na superfície (mín. 3) */ --severidade-medio-tinta: #ACD5D7; /* 9,5:1 sobre --severidade-medio-fundo · 10,5:1 na superfície */ --severidade-medio-fundo: #002C2F; /* superfície tingida — isento */ --severidade-medio-borda: #038389; /* 3,7:1 na superfície (mín. 3) */ --severidade-desconhecido-tinta: #BDBDBD; /* 7,6:1 sobre --severidade-desconhecido-fundo · 8,9:1 na superfície */ --severidade-desconhecido-fundo: #2A2A2A; /* superfície tingida — isento */ --severidade-desconhecido-borda: #757575; /* 3,6:1 na superfície (mín. 3) */ --marca-placa: #FFFFFF; /* igual nos dois temas: a arte da marca não se adapta — isento */ --marca-placa-tinta: #1C2033; /* 16,1:1 sobre --marca-placa */ --texto-alfa: rgba(255, 255, 255, 0.87); /* 14,2:1 no fundo · 11,0:1 na elevada */ --texto-secundario-alfa: rgba(255, 255, 255, 0.72); /* 10,0:1 no fundo · 8,0:1 na elevada */ --texto-rotulo-alfa: rgba(255, 255, 255, 0.62); /* 7,6:1 no fundo · 6,4:1 na elevada */ --texto-esmaecido-alfa: rgba(255, 255, 255, 0.7); /* 9,4:1 no fundo · 7,6:1 na elevada */ --texto-tenue-alfa: rgba(255, 255, 255, 0.38); /* 3,6:1 no fundo — decorativo */ --texto-corpo: rgba(255, 255, 255, 0.8); /* 12,1:1 no fundo · 9,5:1 na elevada */ --texto-sobre-acao: #FFFFFF; /* 6,8:1 sobre --acao (mín. 4,5) */ --icone-neutro: #BDBDBD; /* 10,0:1 no fundo · 7,4:1 na elevada */ --borda-alfa: rgba(255, 255, 255, 0.12); /* isento */ --borda-forte-alfa: rgba(255, 255, 255, 0.24); /* isento */ --borda-tenue-alfa: rgba(255, 255, 255, 0.1); /* isento */ --veu-hover: rgba(255, 255, 255, 0.06); /* realce de linha sob o ponteiro — isento */ --veu-codigo: rgba(255, 255, 255, 0.12); /* fundo do `` embutido na prosa — isento */ --veu-sombra-painel: rgba(0, 0, 0, 0.3); /* igual ao claro: ver o bloco acima — isento */ --veu-sombra-cartao: rgba(0, 0, 0, 0.5); /* igual ao claro: ver o bloco acima — isento */ --superficie-neutra: #2A2A2A; /* preenchimento cinza — isento */ --borda-neutra: #757575; /* 4,1:1 no fundo · 3,0:1 na elevada */ --borda-media: #757575; /* 4,1:1 no fundo · 3,0:1 na elevada */ --erro-fundo: #4E1414; /* superfície tingida — isento */ --erro-tinta: #FFCDD2; /* 10,4:1 sobre --erro-fundo */ --erro-tinta-media: #EF9A9A; /* 6,8:1 sobre --erro-fundo · 7,8:1 na superfície */ --erro-borda: #E57373; /* 5,6:1 na superfície (mín. 3) */ --erro-mensagem: #EF9A9A; /* 8,7:1 no fundo · 7,8:1 na superfície */ --atencao-fundo: #4A2E00; /* superfície tingida — isento */ --atencao-tinta: #FFE0B2; /* 9,8:1 sobre --atencao-fundo */ --atencao-tinta-media: #FFB74D; /* 7,2:1 sobre --atencao-fundo · 9,6:1 na superfície */ --sucesso-fundo: #12331A; /* superfície tingida — isento */ --sucesso-tinta: #A5D6A7; /* 8,4:1 sobre --sucesso-fundo */ --realce-fundo: #4A3A00; /* --texto por cima: 8,9:1 */ --panorama-painel-fundo: rgba(255, 255, 255, 0.96); /* superfície tingida — isento */ --panorama-painel-fundo-escuro: rgba(33, 33, 33, 0.96); /* --texto-alfa por cima: 12,6:1 */ --calor-1: #FFFFB2; /* superfície tingida — isento */ --calor-2: #FED976; /* superfície tingida — isento */ --calor-3: #FEB24C; /* superfície tingida — isento */ --calor-4: #FD8D3C; /* superfície tingida — isento */ --calor-5: #F03B20; /* superfície tingida — isento */ --calor-6: #BD0026; /* superfície tingida — isento */ --evento-agendado: #6B2667; /* --texto-sobre-acao por cima: 10,0:1 */ --evento-agendado-tinta: #D2A2CD; /* 8,7:1 no fundo · 6,5:1 na elevada */ --evento-em-andamento: #00695C; /* --texto-sobre-acao por cima: 6,6:1 */ --evento-em-andamento-tinta: #4DB6AC; /* 7,7:1 no fundo · 5,7:1 na elevada */ --evento-pendente: #B71C1C; /* --texto-sobre-acao por cima: 6,6:1 */ --evento-pendente-tinta: #EF9A9A; /* 8,7:1 no fundo · 6,5:1 na elevada */ --evento-reaberto: #A34600; /* --texto-sobre-acao por cima: 6,1:1 */ --evento-reaberto-tinta: #FFB74D; /* 10,8:1 no fundo · 8,1:1 na elevada */ --evento-finalizado: #1B5E20; /* --texto-sobre-acao por cima: 7,9:1 */ --evento-finalizado-tinta: #A5D6A7; /* 11,4:1 no fundo · 8,5:1 na elevada */ --evento-indefinido: #616161; /* --texto-sobre-acao por cima: 6,2:1 */ --evento-indefinido-tinta: #BDBDBD; /* 10,0:1 no fundo · 7,4:1 na elevada */ --evento-foco: #D2A2CD; /* 8,7:1 no fundo — anel, mín. 3 */ --evento-titulo-tinta: #D2A2CD; /* 8,7:1 no fundo · 6,5:1 na elevada */ --evento-leitura-fundo: #EF6C00; /* --texto-sobre-acao por cima: 3,1:1 */ --evento-atipica-tinta: #FFB74D; /* 10,8:1 no fundo · 8,1:1 na elevada */ --evento-encenado-borda: #FFD54F; /* 7,8:1 sobre --realce-fundo (mín. 3) */ --evento-encenado-tinta: #FFD8A8; /* 8,3:1 sobre --realce-fundo */ --evento-desatualizado-borda: #B8860B; /* 3,8:1 sobre --atencao-fundo (mín. 3) */ --evento-desatualizado-tinta: #FFD8A8; /* 9,3:1 sobre --atencao-fundo */ --evento-chip-fundo: #424242; /* --texto-corpo por cima: 7,1:1 */ --evento-dia-fundo: #2A2F33; /* --texto por cima: 10,6:1 */ --legado-destaque-fundo: #428BCA; /* --texto-sobre-acao por cima: 3,6:1 */ --legado-divisor: rgba(255, 255, 255, 0.18); /* isento */ --legado-divisor-suave: rgba(255, 255, 255, 0.12); /* isento */ --legado-link-hover: #8FB6D9; /* 6,7:1 sobre --superficie-neutra */ --legado-esmaecido: rgba(255, 255, 255, 0.7); /* 9,4:1 no fundo · 8,7:1 na superfície */ --upload-tinta: #9FC3D6; /* 8,8:1 sobre --upload-fundo */ --upload-alvo-fundo: #10222E; /* superfície tingida — isento */ --upload-alvo-borda: #5E7C8A; /* isento */ --lista-selecionada: #1F6323; /* --texto-alfa por cima: 6,0:1 */ --lista-selecionada-par: #2E7D32; /* --texto-alfa por cima: 4,3:1 */ --lista-realce: #A5241D; /* --texto-alfa por cima: 5,9:1 */ --lista-realce-par: #8C1D18; /* --texto-alfa por cima: 7,2:1 */ --lista-aviso: #7A4A00; /* --texto-alfa por cima: 6,1:1 */ --lista-aviso-par: #6B4000; /* --texto-alfa por cima: 7,2:1 */ --lista-zebra: #383838; /* --texto-alfa por cima: 9,3:1 */ --lista-hover: #4A4A4A; /* --texto-alfa por cima: 7,2:1 */ --login-cartao-fundo: rgba(255, 255, 255, 1); /* superfície tingida — isento */ --login-veu: rgba(0, 0, 0, 0.55); /* superfície tingida — isento */ --downloads-botao-fundo: #666666; /* branco por cima: 5,7:1 */ --downloads-botao-borda: #FFFFFF; /* superfície tingida — isento */ --aud-tinta: rgba(255, 255, 255, 0.87); /* 14,2:1 no fundo · 11,0:1 na elevada */ --aud-corpo: rgba(255, 255, 255, 0.8); /* 12,1:1 no fundo · 9,5:1 na elevada */ --aud-esmaecido: rgba(255, 255, 255, 0.7); /* 9,4:1 no fundo · 7,6:1 na elevada */ --aud-borda: rgba(255, 255, 255, 0.12); /* isento */ --aud-recuado: #383838; /* bloco recuado dentro do cartão — isento */ --aud-aviso-fundo: #3D2400; /* superfície tingida — isento */ --aud-aviso-borda: #B8860B; /* 5,1:1 na superfície (mín. 3) */ --aud-aviso-tinta: #FFD8A8; /* 10,8:1 sobre o próprio fundo */ --aud-erro-tinta: #F2B8B5; /* 11,0:1 no fundo · 9,8:1 na superfície */ --aud-sucesso-tinta: #81C784; /* 9,3:1 no fundo · 8,3:1 na superfície */ } /* * AS DIMENSÕES — espaço, raio, elevação, tipografia, movimento e camada. Não giram com a marca e * não mudam com o tema. Bloco `html` próprio, e não `:root`, porque `:root` é o mapa de COR e * é ele que os portões contam; os dois seletores casam o mesmo elemento e os conjuntos são * disjuntos, de modo que a especificidade nunca decide nada. */ html { --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --r-controle: 4px; --r-container: 8px; --r-pilula: 9999px; --contorno: 1px solid var(--borda); --sombra-ambiente: 0 1px 3px rgba(28, 32, 51, 0.10), 0 1px 2px rgba(28, 32, 51, 0.06); --sombra-elevada: 0 8px 24px rgba(28, 32, 51, 0.16); --t-display: 1.75rem; --t-headline: 1.375rem; --t-title: 1.0625rem; --t-corpo: 0.875rem; --t-dado: 0.8125rem; --t-rotulo: 0.75rem; --medida-prosa: 75ch; --alvo-toque: 40px; --campo-altura: 48px; --campo-mensagem: 20px; --campo-recuo: var(--e-3); --fundo-do-campo: var(--fundo); --trilha-altura: var(--e-6); --margem-moldura: 0px; --topo-colado: 0px; --dur-rapida: 150ms; --dur-media: 200ms; --dur-lenta: 250ms; --ease-padrao: cubic-bezier(0.25, 1, 0.5, 1); --camada-base: 0; --camada-realce: 1; --camada-suspenso: 10; --camada-fixo: 20; --camada-veu: 30; --camada-dialogo: 40; --camada-veu-sobreposto: 50; --camada-dialogo-sobreposto: 60; --camada-toast: 70; --camada-dica: 80; } /* * A Regra do Movimento Reduzido: toda duração vai a praticamente zero quando o sistema pede menos * movimento. As transições continuam existindo — o que desaparece é a espera —, e por isso o valor * não é `0`: uma transição de duração zero não dispara `transitionend`, e há código que espera * por ele. */ @media (prefers-reduced-motion: reduce) { html { --dur-rapida: 0.01ms; --dur-media: 0.01ms; --dur-lenta: 0.01ms; } }