/* seed-material.css — gerado por 06-validacao/geradores/gen-registry.py (SEED Design System, F10.6, 2026-09-13). A CAMADA DE MATERIAL do design system (seed-componentes.md §93: vidro, metal, luz do fundo e dois micro-movimentos) como classes instaláveis, EMITIDA por 06-validacao/ferramentas/material_bloco.py — a mesma receita que veste as telas de referência, com nome de classe no lugar do seletor de molde. Tokens: seed-tokens.css v1.26 (@seed/tokens), que já traz os fallbacks executáveis (sem backdrop-filter, reduzir transparência, mais contraste, reduzir movimento). NÃO EDITAR À MÃO: a próxima geração sobrescreve. COMO USAR (o LEIA-ME do registry tem o passo a passo): 1. — sem o atributo nada aqui pinta um pixel (é o interruptor); 2. a classe no elemento que faz o papel: .seed-mat-casca (a casca da aplicação, UMA por tela), .seed-mat-vidro (barra superior, sidebar), .seed-mat-vidro-cartao (cartão que flutua no canvas), .seed-mat-metal-rail (o rail, sobre --seed-rail-background), .seed-mat-metal-acao (botão primário, avatar — a cor continua o token de ação), .seed-mat-kpi (número grande), .seed-mat-pilula-success| danger|warning|info (pílula com luz), .seed-mat-trilho + .seed-mat-trilho-cheio (barra), .seed-mat-reflexo; 3. onde NÃO usar (§93 MA3): conteúdo denso — tabela, lista longa, texto corrido, formulário, diálogos, menus e tudo que rola dentro de si; e-mail e impresso nunca (MA12); 4. quem cria um fundo novo mede o contraste sobre ele (MA7): a régua rasterizada da casa é 06-validacao/contraste/contraste-raster.mjs — texto sobre vidro ou luz sai pelo pior pixel. Vidro fora do chrome e dos cartões de painel espera a medição de GPU em máquina de campo (MA-P2). */ /* ===== CAMADA DE MATERIAL (vidro e metal) — GERADA POR SCRIPT por ferramentas/material_bloco.py, consumindo só os tokens --seed-mat-* do seed-tokens.css v1.26 (F10.4, 2026-09-12; regra no seed-componentes.md §93). NÃO EDITAR À MÃO: a próxima geração sobrescreve. Sem data-material="vidro-metal" no , nada aqui pinta um pixel. ===== */ html[data-material="vidro-metal"] .seed-mat-casca { /* a casca GUARDA o canvas do CP1 (`surface-subtle`) como cor de fundo declarada — é o que os instrumentos por cor declarada (render-contraste, contraste-composicao) leem; a luz por cima é pintada pelos dois pseudo-elementos, e quem a mede é a régua RC (pixel). */ background: var(--seed-surface-subtle); position: relative; overflow: clip; /* `isolation: isolate`: a casca vira contexto de empilhamento para os pseudo-elementos com z-index -1 ficarem ACIMA do fundo dela e ABAIXO de todo o conteúdo. Medido antes de adotar: o que a casca prende dentro do próprio contexto é só o que já vive dentro dela (a topbar do shell, z 60; a barra de ações em massa do painel, sticky z 20); os diálogos e o menu de contexto ficam fora da casca nos dois moldes. */ isolation: isolate; } html[data-material="vidro-metal"] .seed-mat-casca::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--seed-mat-canvas); } html[data-material="vidro-metal"] .seed-mat-casca::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--seed-mat-canvas); opacity: .35; animation: seed-mat-respira var(--seed-mat-breath-duration) ease-in-out infinite alternate; } @keyframes seed-mat-respira { from { transform: translate3d(-2%, -1%, 0) scale(1.04); } to { transform: translate3d(2%, 1.5%, 0) scale(1.08); } } html[data-material="vidro-metal"] .seed-mat-vidro { background: var(--seed-mat-grain) 0 0 / 160px 160px, var(--seed-mat-glass); -webkit-backdrop-filter: var(--seed-mat-glass-filter); backdrop-filter: var(--seed-mat-glass-filter); box-shadow: 0 0 0 1px var(--seed-mat-glass-border), var(--seed-mat-glass-shadow); } html[data-material="vidro-metal"] .seed-mat-vidro-cartao { background: var(--seed-mat-grain) 0 0 / 160px 160px, var(--seed-mat-metal-specular) 100% 0 / 220% 100% no-repeat, var(--seed-mat-glass); -webkit-backdrop-filter: var(--seed-mat-glass-filter); backdrop-filter: var(--seed-mat-glass-filter); box-shadow: 0 0 0 1px var(--seed-mat-glass-border), var(--seed-mat-glass-shadow); transition: box-shadow var(--seed-dur-productive-fast) var(--seed-ease-productive), transform var(--seed-dur-productive-fast) var(--seed-ease-productive), background-position var(--seed-mat-sheen-duration) var(--seed-ease-productive); /* A TINTA DE MARCA DENTRO DO VIDRO É A "STRONG" (seed-tokens.md §5-g: `text-brand` só mede 4,60 contra o BRANCO puro; o vidro nunca é branco puro — é surface-raised a 80 % sobre a luz do fundo, mais o grão). Medido pela régua RC em 2026-09-12 no painel: `text-brand` sobre o cartão de vidro caiu a 4,42–4,49 em 9 textos (títulos-insight em itálico e os links "abrir →"); `text-brand-strong` (turquesa-700 no claro; no escuro os dois tokens já são iguais) devolve todos acima do piso. O remapeamento é POR ESCOPO, como o painel já faz com `[data-tinta="familia"]`: todo consumidor de `text-brand`/`text-link` dentro do cartão herda, sem reescrever regra nenhuma. `text-link` tem o MESMO valor de `text-brand` nos dois temas (medido no gêmeo v1.24), por isso o mesmo destino. */ --seed-text-brand: var(--seed-text-brand-strong); --seed-text-link: var(--seed-text-brand-strong); } html[data-material="vidro-metal"] .seed-mat-vidro-cartao:hover { box-shadow: 0 0 0 1px var(--seed-mat-glass-border), var(--seed-mat-glass-shadow-hover); background-position: 0 0, 0 0; /* o reflexo desliza: 100% → 0 */ } html[data-material="vidro-metal"] .seed-mat-metal-rail { background: var(--seed-mat-grain) 0 0 / 160px 160px, var(--seed-mat-metal-specular), var(--seed-mat-metal-sheen), var(--seed-mat-metal-curve), var(--seed-rail-background); box-shadow: var(--seed-mat-metal-edge); } html[data-material="vidro-metal"] .seed-mat-metal-acao { background-image: var(--seed-mat-metal-action); box-shadow: var(--seed-mat-metal-action-edge); transition: background-color var(--seed-dur-productive-fast) var(--seed-ease-productive), transform var(--seed-dur-productive-fast) var(--seed-ease-productive), box-shadow var(--seed-dur-productive-fast) var(--seed-ease-productive); } html[data-material="vidro-metal"] .seed-mat-metal-acao:hover { background-image: var(--seed-mat-metal-action); /* o :hover do molde usa o shorthand `background` e apagaria a imagem */ } html[data-material="vidro-metal"] .seed-mat-metal-acao:active { transform: translateY(1px) scale(.985); /* pressionado AFUNDA (HV1: pressionado distinto) */ } html[data-material="vidro-metal"] .seed-mat-kpi { /* brilho: tinta em gradiente entre dois tokens de TEXTO, os dois medidos AA; a régua RC mede pela pior parada */ background: linear-gradient(180deg, var(--seed-text-primary) 0%, var(--seed-text-primary) 48%, var(--seed-text-secondary) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-material="vidro-metal"] .seed-mat-pilula-success { background: color-mix(in srgb, var(--seed-feedback-success-bg) var(--seed-mat-glass-alpha), transparent); box-shadow: inset 0 1px 0 var(--seed-mat-glass-specular); } html[data-material="vidro-metal"] .seed-mat-pilula-danger { background: color-mix(in srgb, var(--seed-feedback-danger-bg) var(--seed-mat-glass-alpha), transparent); box-shadow: inset 0 1px 0 var(--seed-mat-glass-specular); } html[data-material="vidro-metal"] .seed-mat-pilula-warning { background: color-mix(in srgb, var(--seed-feedback-warning-bg) var(--seed-mat-glass-alpha), transparent); box-shadow: inset 0 1px 0 var(--seed-mat-glass-specular); } html[data-material="vidro-metal"] .seed-mat-pilula-info { background: color-mix(in srgb, var(--seed-feedback-info-bg) var(--seed-mat-glass-alpha), transparent); box-shadow: inset 0 1px 0 var(--seed-mat-glass-specular); } html[data-material="vidro-metal"] .seed-mat-trilho { box-shadow: inset 0 0 0 1px var(--seed-mat-glass-border); } html[data-material="vidro-metal"] .seed-mat-trilho-cheio { box-shadow: inset 0 1px 0 var(--seed-mat-glass-specular); } html[data-material="vidro-metal"] .seed-mat-reflexo { isolation: isolate; /* o reflexo vai ao nível negativo do contexto da própria peça: abaixo do texto */ } html[data-material="vidro-metal"] .seed-mat-reflexo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--seed-mat-metal-specular) 100% 0 / 220% 100% no-repeat; transition: background-position var(--seed-mat-sheen-duration) var(--seed-ease-productive); } html[data-material="vidro-metal"] .seed-mat-reflexo:hover::after { background-position: 0 0; } @media (prefers-contrast: more), (forced-colors: active) { html[data-material="vidro-metal"] .seed-mat-casca { background: var(--seed-surface-subtle); /* o canvas do CP1 volta quando --seed-mat-canvas vira none */ } html[data-material="vidro-metal"] .seed-mat-casca::before { display: none; } html[data-material="vidro-metal"] .seed-mat-casca::after { display: none; } html[data-material="vidro-metal"] .seed-mat-kpi { background: none; color: var(--seed-text-primary); } } @media (forced-colors: active) { html[data-material="vidro-metal"] .seed-mat-vidro, html[data-material="vidro-metal"] .seed-mat-vidro-cartao { -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { html[data-material="vidro-metal"] .seed-mat-casca::after { animation: none; /* o token já zera a duração; aqui a cópia móvel some de vez */ display: none; } }