/* ══════════════════════════════════════════════════════════════════════════════ DATTA — Material Design 3 (M3) tokens https://m3.material.io Seed color: #018BFF (DATTA brand blue, sampled from the favicon) Tonal palettes generated against M3 spec (HCT tonal stops 0/10/20/30/40/50/60/70/80/90/95/99/100). This file is the SINGLE source of truth for DATTA design work. It mirrors the structure already present in the codebase but swaps the seed to the DATTA brand color. Includes: • Color roles (primary / secondary / tertiary / error / surface / outline) • Surface tonal elevation (5 levels) • Shape scale (none → full) • Elevation (5 levels — tonal + shadow combined) • Type scale (Roboto Flex — display / headline / title / body / label, 3 sizes each) • Motion durations + easings • State layers (hover 8% / focus 10% / pressed 12% / dragged 16%) ══════════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────────────────── FONTS — as @font-face NAO sao importadas aqui. Cada DOCUMENTO linka o `vendor/fonts/fonts.css` no proprio ``: §6: as fontes vem do fonts.css vendorizado (vendor/fonts/), nunca do CDN. Material Symbols nao entra — nao e usado (a plataforma usa icones SVG 2D, §3). POR QUE O @import SAIU DAQUI Este arquivo trazia `@import url('vendor/fonts/fonts.css')` para que toda pagina que o carregasse herdasse o stack sem editar cada HTML. Isso deixou de ser necessario e passou a custar caro: - Deixou de ser necessario porque as telas viraram FRAGMENTO do shell (SPEC-157). As 78 paginas de `static/screens/` nao tem `` proprio — quem tem e o `index.html`, que linka o fonts.css direto desde sempre. Os unicos documentos autonomos que restam (shell, `dattabi-share.html`, `kyb-evidencia.html`, `__rolagem.html` e as paginas do site publico) linkam o arquivo eles mesmos. - Passou a custar caro porque o link direto do documento e reescrito para `fonts.css?v=` pelo AssetVersionResolver, e o @import daqui NAO e (a reescrita so alcanca o HTML). Duas URLs para o mesmo arquivo sao duas entradas de cache: o fonts.css era baixado DUAS vezes, 48KB cada. Medido em producao em 2026-08-31 com cache quente, a copia sem `?v=` era o ULTIMO CSS a liberar o render (354ms-514ms) — ou seja, era ela que definia quando a primeira pintura acontecia, enquanto a copia versionada ja estava em cache. O CONTRATO QUE FICA NO LUGAR Documento novo que use estes tokens precisa do `` acima no ``. Sem ele a pagina cai na fonte do sistema. Em compensacao a fonte entra pelo caminho mais curto que existe — uma requisicao, iniciada junto com o HTML — em vez de esperar a cadeia `theme.css` -> `colors_and_type.css` -> `fonts.css`. ──────────────────────────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────────────────────────── M3 Light Theme — DEFAULT ──────────────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* ── Primary (marca) ── */ --md-primary: #2f5fd0; --md-on-primary: #ffffff; --md-primary-container: #dde7fb; --md-on-primary-container: #0b2e77; /* ── Secondary (selecao neutra) ── */ --md-secondary: #4a5b7a; --md-on-secondary: #ffffff; --md-secondary-container: #e4ecfa; --md-on-secondary-container: #1b3a73; /* ── Tertiary (acento alternativo) ── */ --md-tertiary: #6d4bc4; --md-on-tertiary: #ffffff; --md-tertiary-container: #eae2fb; --md-on-tertiary-container: #2d1a63; /* ── Error ── */ --md-error: #c0342e; --md-on-error: #ffffff; --md-error-container: #fbe1df; --md-on-error-container: #5c110e; /* ── Surface / Background ── ATENCAO: background e surface sao cores DIFERENTES. Ate 2026-08-17 as duas valiam #FDFCFF, e por isso nada na plataforma distinguia chao de pagina de superficie de card — modal, toast, card e input pareciam corretos por acidente. Separa-las e o que produz a profundidade do redesign, e e tambem o que exige que cada elemento use o PAPEL certo (ver o quadro no fim deste arquivo). Trocar o papel por engano nao gera erro: gera elemento que some no fundo. */ --md-background: #fbfbfc; /* chao da pagina */ --md-on-background: #16181c; --md-surface: #ffffff; /* card, painel, linha de tabela */ --md-on-surface: #16181c; --md-surface-variant: #e4e8ee; --md-on-surface-variant: #5a6270; /* Surface tonal elevation (M3 — preferred over shadows for elevation) */ --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f6f7f9; /* sidebar, topbar, toolbar, input */ --md-surface-container: #eff1f4; --md-surface-container-high: #e9ecf0; /* modal, popover, dropdown, toast */ --md-surface-container-highest:#e2e6ec; /* Outlines — a divisoria precisa se separar de #ffffff E de #f6f7f9, as duas superficies mais usadas. #e2e5ea dava ~1,2:1 contra o branco e sumia; #c3c9d3 fica em ~1,7:1, visivel sem virar traco pesado. */ --md-outline: #98a1af; --md-outline-variant: #c3c9d3; /* Inverse */ --md-inverse-surface: #2b2f36; --md-inverse-on-surface: #f2f3f5; --md-inverse-primary: #a9c2ff; /* Other roles */ --md-shadow: #000000; --md-scrim: #000000; --md-surface-tint: var(--md-primary); /* DATTA-specific semantic extras (not part of M3 baseline) */ --md-success: #1c7a4d; --md-on-success: #ffffff; --md-success-container: #d9f2e3; --md-on-success-container: #04321c; --md-warning: #96631a; --md-on-warning: #ffffff; --md-warning-container: #fbeed4; --md-on-warning-container: #3a2703; --md-info: #1d6b96; --md-on-info: #ffffff; --md-info-container: #d9edf8; --md-on-info-container: #062b3f; /* ── Acao primaria — papel de COMPONENTE, nao de cor do sistema ── O preenchimento do botao primario e quase-preto de proposito: o elemento mais alto de cada tela e deliberadamente acromatico. --md-primary continua sendo a cor de MARCA (foco, selecao, logo, acento de titulo) e nunca deve ser trocada por preto. */ --action-primary: #16181c; --action-primary-hover: #33383f; --action-primary-active: #06070a; --action-on-primary: #ffffff; /* Dosagem da paleta categorica e do glow — ver as secoes correspondentes */ --cat-fill-amt: 60%; --cat-ink-amt: 34%; --glow-opacity: .75; color-scheme: light; } /* ──────────────────────────────────────────────────────────────────────── M3 Dark Theme ──────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --md-primary: #a9c2ff; --md-on-primary: #06255f; --md-primary-container: #2a4d99; --md-on-primary-container: #dbe5ff; --md-secondary: #b6c4dd; --md-on-secondary: #21304a; --md-secondary-container: #27364f; --md-on-secondary-container: #d9e4f8; --md-tertiary: #cdb7ff; --md-on-tertiary: #37206e; --md-tertiary-container: #4a3785; --md-on-tertiary-container: #e8ddff; --md-error: #ffb3ab; --md-on-error: #5f1410; --md-error-container: #7d2620; --md-on-error-container: #ffdad5; /* background != surface tambem no escuro — ver a nota no bloco claro */ --md-background: #101317; /* chao da pagina */ --md-on-background: #e4e7ec; --md-surface: #171a1f; /* card, painel, linha de tabela */ --md-on-surface: #e4e7ec; --md-surface-variant: #2a2f38; --md-on-surface-variant: #a8b0bc; --md-surface-container-lowest: #0c0e12; --md-surface-container-low: #1b1f25; /* sidebar, topbar, toolbar, input */ --md-surface-container: #20242b; --md-surface-container-high: #262b33; /* modal, popover, dropdown, toast */ --md-surface-container-highest:#2e343d; --md-outline: #808896; /* no escuro a divisoria precisa de mais separacao do fundo do que a conversao direta do tema claro sugere: em #333a44 ela sumia contra surface (#171a1f) e container-low (#1b1f25) */ --md-outline-variant: #414a58; --md-inverse-surface: #e4e7ec; --md-inverse-on-surface: #1b1f25; --md-inverse-primary: #2f5fd0; --md-shadow: #000000; --md-scrim: #000000; --md-surface-tint: var(--md-primary); --md-success: #7fd6a5; --md-on-success: #04321c; --md-success-container: #1d4432; --md-on-success-container: #a9ecc6; --md-warning: #e6bf78; --md-on-warning: #3a2703; --md-warning-container: #4a381a; --md-on-warning-container: #f6dfb4; --md-info: #8ecbe9; --md-on-info: #062b3f; --md-info-container: #17394d; --md-on-info-container: #c3e5f5; /* acao primaria invertida: pill quase-branco sobre fundo escuro */ --action-primary: #f2f3f5; --action-primary-hover: #ffffff; --action-primary-active: #cfd4db; --action-on-primary: #16181c; /* no escuro o pastel vira tingimento de fundo e o texto e o pastel puro */ --cat-fill-amt: 18%; --cat-ink-amt: 88%; --glow-opacity: .28; color-scheme: dark; } /* ──────────────────────────────────────────────────────────────────────── PALETA CATEGORICA — NAO semantica Cor para elementos que precisam se distinguir ENTRE SI sem comunicar significado: legenda de grafico, tag de categoria, campos decorativos do .aurora. Status continua sendo exclusividade de --green/--amber/--red — nunca use --cat-mint para "sucesso". Os 8 matizes sao identidade de marca e nao mudam entre temas; so a dosagem muda. Por isso os derivados sao declarados UMA vez e se adaptam sozinhos: --cat-fill-amt/--cat-ink-amt e --md-surface/--md-on-surface sao redefinidos por tema acima, e o var() dentro do color-mix resolve no tema ativo. -fill → fundo suave (tag, faixa, celula) -ink → texto/icone sobre o -fill correspondente puro → ponto de legenda, gradiente decorativo (nunca texto) ──────────────────────────────────────────────────────────────────────── */ :root { --cat-peach: #fac299; --cat-pink: #f2b2d1; --cat-lavender: #c7b8f5; --cat-sky: #a3d1fa; --cat-mint: #b5ead7; --cat-yellow: #fae29f; --cat-teal: #9fd9d9; --cat-coral: #f4afa9; --cat-peach-fill: color-mix(in srgb, var(--cat-peach) var(--cat-fill-amt), var(--md-surface)); --cat-pink-fill: color-mix(in srgb, var(--cat-pink) var(--cat-fill-amt), var(--md-surface)); --cat-lavender-fill: color-mix(in srgb, var(--cat-lavender) var(--cat-fill-amt), var(--md-surface)); --cat-sky-fill: color-mix(in srgb, var(--cat-sky) var(--cat-fill-amt), var(--md-surface)); --cat-mint-fill: color-mix(in srgb, var(--cat-mint) var(--cat-fill-amt), var(--md-surface)); --cat-yellow-fill: color-mix(in srgb, var(--cat-yellow) var(--cat-fill-amt), var(--md-surface)); --cat-teal-fill: color-mix(in srgb, var(--cat-teal) var(--cat-fill-amt), var(--md-surface)); --cat-coral-fill: color-mix(in srgb, var(--cat-coral) var(--cat-fill-amt), var(--md-surface)); --cat-peach-ink: color-mix(in srgb, var(--cat-peach) var(--cat-ink-amt), var(--md-on-surface)); --cat-pink-ink: color-mix(in srgb, var(--cat-pink) var(--cat-ink-amt), var(--md-on-surface)); --cat-lavender-ink: color-mix(in srgb, var(--cat-lavender) var(--cat-ink-amt), var(--md-on-surface)); --cat-sky-ink: color-mix(in srgb, var(--cat-sky) var(--cat-ink-amt), var(--md-on-surface)); --cat-mint-ink: color-mix(in srgb, var(--cat-mint) var(--cat-ink-amt), var(--md-on-surface)); --cat-yellow-ink: color-mix(in srgb, var(--cat-yellow) var(--cat-ink-amt), var(--md-on-surface)); --cat-teal-ink: color-mix(in srgb, var(--cat-teal) var(--cat-ink-amt), var(--md-on-surface)); --cat-coral-ink: color-mix(in srgb, var(--cat-coral) var(--cat-ink-amt), var(--md-on-surface)); /* Glow do .aurora. O blur precisa ser PEQUENO em relacao ao campo: espalhar a cor por area muito maior que a pintada dilui o pigmento ate sumir. 48px pressupoe campo de ~600px ou mais — .aurora sempre atras de um BLOCO, nunca de um titulo solto. A opacidade e por tema (blocos acima). */ --glow-blur: 48px; } /* ──────────────────────────────────────────────────────────────────────── M3 Shape Scale (border-radius tokens) ──────────────────────────────────────────────────────────────────────── */ :root { --md-shape-none: 0; --md-shape-xs: 4px; /* chips, dense list items */ --md-shape-sm: 8px; /* small components */ --md-shape-md: 12px; /* cards, buttons */ --md-shape-lg: 16px; /* navigation drawer, FAB extended */ --md-shape-xl: 28px; /* dialogs, bottom sheets */ --md-shape-full: 9999px; /* pills, FAB */ /* Per-component shape mapping (M3 reference) */ --md-shape-button: var(--md-shape-full); /* M3 buttons are pill-shaped */ --md-shape-card: var(--md-shape-md); --md-shape-dialog: var(--md-shape-xl); --md-shape-fab: var(--md-shape-lg); --md-shape-chip: var(--md-shape-sm); --md-shape-textfield: var(--md-shape-xs); /* Filled text fields */ /* ── Elevation — tema claro (o escuro sobrescreve logo abaixo) ── Sombra quase preta a 30% pertence ao fundo escuro; sobre superficie clara ela le como sujeira. Aqui o pigmento e o proprio on-surface (#16181c) em opacidade baixa, o que mantem a sombra fria e discreta. */ --md-elev-0: none; --md-elev-1: 0 1px 2px rgba(16,20,28,.06), 0 1px 3px rgba(16,20,28,.05); --md-elev-2: 0 2px 4px rgba(16,20,28,.06), 0 4px 10px rgba(16,20,28,.06); --md-elev-3: 0 4px 8px rgba(16,20,28,.08), 0 12px 28px rgba(16,20,28,.10); --md-elev-4: 0 8px 16px rgba(16,20,28,.10), 0 24px 48px rgba(16,20,28,.14); --md-elev-5: 0 12px 24px rgba(16,20,28,.12), 0 32px 64px rgba(16,20,28,.18); /* ── State layer opacities (M3 spec) ── */ --md-state-hover-opacity: 0.08; --md-state-focus-opacity: 0.10; --md-state-pressed-opacity: 0.12; --md-state-dragged-opacity: 0.16; /* ── M3 Spacing scale (4-grid) ── */ --md-sp-1: 4px; --md-sp-2: 8px; --md-sp-3: 12px; --md-sp-4: 16px; --md-sp-5: 20px; --md-sp-6: 24px; --md-sp-8: 32px; --md-sp-10: 40px; --md-sp-12: 48px; --md-sp-16: 64px; /* App-shell metrics (M3 layout) */ --md-sidebar-w: 280px; /* Navigation drawer expanded */ --md-rail-w: 80px; /* Navigation rail collapsed */ --md-topbar-h: 64px; /* Top app bar — small */ --md-topbar-h-medium: 112px; /* Top app bar — medium */ --md-topbar-h-large: 152px; /* Top app bar — large */ /* ── Typography — Plus Jakarta Sans (titulos e corpo), JetBrains Mono (codigo), Hanken Grotesk (logotipo, so o peso 600). Servidas de vendor/fonts/ (§6: nunca CDN). Roboto Flex fica no fallback para o intervalo entre o deploy do CSS e a chegada do woff2 novo. ── */ --md-font-brand: 'Plus Jakarta Sans', 'Roboto Flex', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* O LOGOTIPO tem fonte propria — Hanken Grotesk SemiBold. Nao e o mesmo que `--md-font-brand`: aquele veste titulos e display da plataforma inteira, e o logotipo e uma assinatura, uma palavra so. Sao tokens separados de proposito, para que trocar a tipografia dos titulos nao mexa na marca (nem o contrario). Vendorizada so no peso 600 — usar outro peso aqui cai no fallback e descaracteriza a marca. */ --md-font-logo: 'Hanken Grotesk', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --md-font-plain: 'Plus Jakarta Sans', 'Roboto Flex', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --md-font-mono: 'JetBrains Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, monospace; /* M3 Type Scale — single shorthand vars usable with `font:` Os TAMANHOS sao os mesmos de antes de proposito: mudar corpo de 14 para 16px reflowaria as 85 paginas, e varias sao telas operacionais densas (tabela, console). O que muda e o PESO — 600/700 onde o M3 usa 400/500 —, que e a assinatura tipografica do redesign e nao move layout. */ --md-type-display-l: 700 57px/64px var(--md-font-brand); --md-type-display-m: 700 45px/52px var(--md-font-brand); --md-type-display-s: 700 36px/44px var(--md-font-brand); --md-type-headline-l: 600 32px/40px var(--md-font-brand); --md-type-headline-m: 600 28px/36px var(--md-font-brand); --md-type-headline-s: 600 24px/32px var(--md-font-brand); --md-type-title-l: 600 22px/28px var(--md-font-brand); --md-type-title-m: 600 16px/24px var(--md-font-plain); --md-type-title-s: 600 14px/20px var(--md-font-plain); --md-type-body-l: 400 16px/24px var(--md-font-plain); --md-type-body-m: 400 14px/20px var(--md-font-plain); --md-type-body-s: 400 12px/16px var(--md-font-plain); --md-type-label-l: 500 14px/20px var(--md-font-plain); --md-type-label-m: 500 12px/16px var(--md-font-plain); --md-type-label-s: 500 11px/16px var(--md-font-plain); /* M3 Type Scale — letter spacing (must be applied separately) Texto grande fecha o espacamento; texto pequeno abre. */ --md-tracking-display-l: -1.4px; --md-tracking-display-m: -1.2px; --md-tracking-display-s: -1px; --md-tracking-headline: -0.6px; --md-tracking-title-l: -0.3px; --md-tracking-title-m: 0.15px; --md-tracking-title-s: 0.10px; --md-tracking-body-l: 0.50px; --md-tracking-body-m: 0.25px; --md-tracking-body-s: 0.40px; --md-tracking-label-l: 0.10px; --md-tracking-label-m: 0.50px; --md-tracking-label-s: 0.50px; /* ── M3 Motion — durations ── */ --md-motion-duration-short1: 50ms; --md-motion-duration-short2: 100ms; --md-motion-duration-short3: 150ms; --md-motion-duration-short4: 200ms; --md-motion-duration-medium1: 250ms; --md-motion-duration-medium2: 300ms; --md-motion-duration-medium3: 350ms; --md-motion-duration-medium4: 400ms; --md-motion-duration-long1: 450ms; --md-motion-duration-long2: 500ms; --md-motion-duration-long3: 550ms; --md-motion-duration-long4: 600ms; /* ── M3 Motion — easings ── */ --md-easing-linear: cubic-bezier(0, 0, 1, 1); --md-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --md-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --md-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --md-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); } /* ──────────────────────────────────────────────────────────────────────── ELEVATION — tema escuro Precisa vir DEPOIS do :root acima: `:root` e `[data-theme="dark"]` tem a MESMA especificidade (0,1,0), entao quem decide e a ordem no arquivo. Posto antes, o :root venceria e o escuro herdaria sombra clara. No escuro nao ha o que "escurecer" com pigmento frio — a sombra volta a ser preta, e com alfa alto, senao desaparece contra #101317. ──────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --md-elev-1: 0 1px 2px rgba(0,0,0,.40); --md-elev-2: 0 2px 4px rgba(0,0,0,.40), 0 4px 10px rgba(0,0,0,.34); --md-elev-3: 0 4px 8px rgba(0,0,0,.44), 0 12px 28px rgba(0,0,0,.40); --md-elev-4: 0 8px 16px rgba(0,0,0,.48), 0 24px 48px rgba(0,0,0,.46); --md-elev-5: 0 12px 24px rgba(0,0,0,.52), 0 32px 64px rgba(0,0,0,.50); } /* ──────────────────────────────────────────────────────────────────────── TOKENS DO REDESIGN — nomes curtos Convivem com os --md-* acima em vez de substitui-los: as 85 paginas legadas referenciam os --md-*, e as telas novas usam estes. Onde os dois descrevem a mesma coisa, o curto e alias do longo — ha um valor so, nao dois que podem divergir (§20). ──────────────────────────────────────────────────────────────────────── */ :root { /* Espacamento — grid de 4px (alias de --md-sp-*) */ --sp-1: var(--md-sp-1); --sp-2: var(--md-sp-2); --sp-3: var(--md-sp-3); --sp-4: var(--md-sp-4); --sp-5: var(--md-sp-5); --sp-6: var(--md-sp-6); --sp-8: var(--md-sp-8); --sp-10: var(--md-sp-10); --sp-12: var(--md-sp-12); --sp-16: var(--md-sp-16); /* As familias (--font-brand/--font-body/--font-mono) vivem no bloco de aliases legados, no fim deste arquivo — um lugar so, para nao existirem duas definicoes que possam divergir. Escala tipografica do redesign. Ao contrario dos --md-type-*, que mantem os tamanhos legados para nao reflowar, estes sao os tamanhos do STYLE_GUIDE e sao o que as telas NOVAS devem usar. */ --type-display: 700 48px/56px var(--font-brand); --type-h1: 700 36px/44px var(--font-brand); --type-h2: 600 30px/38px var(--font-brand); --type-h3: 600 24px/32px var(--font-brand); --type-h4: 600 20px/28px var(--font-brand); --type-title-lg: 600 18px/28px var(--font-brand); --type-title-md: 600 16px/24px var(--font-brand); --type-body-lg: 400 18px/28px var(--font-body); --type-body-md: 400 16px/24px var(--font-body); --type-body-sm: 400 14px/20px var(--font-body); --type-caption: 400 12px/16px var(--font-body); --type-label-lg: 500 14px/20px var(--font-body); --type-label-md: 500 12px/16px var(--font-body); --type-label-sm: 500 11px/16px var(--font-body); --type-code-md: 500 14px/20px var(--font-mono); --type-code-sm: 500 12px/16px var(--font-mono); --ls-display: -1.4px; --ls-h1: -1px; --ls-h2: -.6px; --ls-caps: .8px; /* Motion — alias dos --md-motion-duration-*/--md-easing-* correspondentes */ --dur-short: var(--md-motion-duration-short2); /* 100ms — hover, toggle */ --dur-medium: var(--md-motion-duration-medium1); /* 250ms — collapse/expand */ --dur-long: var(--md-motion-duration-medium4); /* 400ms — raro */ --ease-std: var(--md-easing-standard); --ease-decel: var(--md-easing-standard-decelerate); /* Shell — o redesign usa sidebar mais estreita e rail mais fino que o M3 */ --sidebar-w: 264px; /* cabe o card de workspace com 16px de folga */ --sidebar-rail-w: 68px; --topbar-h: var(--md-topbar-h); } /* ════════════════════════════════════════════════════════════════════════ SEMANTIC TYPE CLASSES — apply directly in markup Usage:

DATTA

════════════════════════════════════════════════════════════════════════ */ .md-display-l { font: var(--md-type-display-l); letter-spacing: var(--md-tracking-display-l); } .md-display-m { font: var(--md-type-display-m); letter-spacing: var(--md-tracking-display-m); } .md-display-s { font: var(--md-type-display-s); letter-spacing: var(--md-tracking-display-s); } .md-headline-l { font: var(--md-type-headline-l); letter-spacing: var(--md-tracking-headline); } .md-headline-m { font: var(--md-type-headline-m); letter-spacing: var(--md-tracking-headline); } .md-headline-s { font: var(--md-type-headline-s); letter-spacing: var(--md-tracking-headline); } .md-title-l { font: var(--md-type-title-l); letter-spacing: var(--md-tracking-title-l); } .md-title-m { font: var(--md-type-title-m); letter-spacing: var(--md-tracking-title-m); } .md-title-s { font: var(--md-type-title-s); letter-spacing: var(--md-tracking-title-s); } .md-body-l { font: var(--md-type-body-l); letter-spacing: var(--md-tracking-body-l); } .md-body-m { font: var(--md-type-body-m); letter-spacing: var(--md-tracking-body-m); } .md-body-s { font: var(--md-type-body-s); letter-spacing: var(--md-tracking-body-s); } .md-label-l { font: var(--md-type-label-l); letter-spacing: var(--md-tracking-label-l); } .md-label-m { font: var(--md-type-label-m); letter-spacing: var(--md-tracking-label-m); } .md-label-s { font: var(--md-type-label-s); letter-spacing: var(--md-tracking-label-s); } .md-mono { font-family: var(--md-font-mono); } /* ════════════════════════════════════════════════════════════════════════ STATE LAYER MIXIN-AS-CLASS M3 components use a translucent overlay rather than swapping bg colors. Add `.md-state-layer` to a child positioned over the surface; the layer inherits color from the parent's `--md-state-on` and animates opacity. ════════════════════════════════════════════════════════════════════════ */ .md-interactive { position: relative; overflow: hidden; isolation: isolate; } .md-interactive::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: currentColor; opacity: 0; transition: opacity var(--md-motion-duration-short2) var(--md-easing-standard); z-index: 0; } .md-interactive:hover::before { opacity: var(--md-state-hover-opacity); } .md-interactive:focus-visible::before { opacity: var(--md-state-focus-opacity); } .md-interactive:active::before { opacity: var(--md-state-pressed-opacity); } /* ════════════════════════════════════════════════════════════════════════ BASE RESET — applies M3 body-medium and surface colors globally ════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font: var(--md-type-body-m); letter-spacing: var(--md-tracking-body-m); color: var(--md-on-background); background: var(--md-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: var(--md-primary); text-decoration: none; cursor: pointer; } a:hover { text-decoration: underline; text-underline-offset: 3px; } *:focus-visible { outline: 3px solid color-mix(in srgb, var(--md-primary) 40%, transparent); outline-offset: 2px; border-radius: var(--md-shape-xs); } /* ════════════════════════════════════════════════════════════════════════ LEGACY ALIASES — keep simple `--accent` / `--bg` / `--text` working so existing DATTA static pages can reference this file without refactor. ┌── QUAL FUNDO USAR ─────────────────────────────────────────────────┐ │ body, area de conteudo, shell --bg / --md-background │ │ sidebar, topbar, toolbar, input --bg2 / --md-surface-container-low│ │ card, painel, linha de tabela --md-surface │ │ modal, popover, dropdown, toast --bg4 / --md-surface-container-high│ └────────────────────────────────────────────────────────────────────┘ `--bg` e o CHAO DA PAGINA, nao "a cor de fundo de qualquer coisa". Ate 2026-08-17 --md-background e --md-surface valiam a mesma cor, entao usar --bg num card ou num modal parecia funcionar. Agora nao: o elemento recebe o tom do chao e some nele. O erro nao gera aviso em lugar nenhum — quem procura o defeito ve "o modal ficou sem destaque", nao uma mensagem. ════════════════════════════════════════════════════════════════════════ */ :root { --bg: var(--md-background); /* chao da pagina */ --bg2: var(--md-surface-container-low); /* toolbar, input, sidebar */ --bg3: var(--md-surface-container); --bg4: var(--md-surface-container-high);/* modal, popover, toast */ --text: var(--md-on-surface); --text2: var(--md-on-surface-variant); --text3: var(--md-outline); --accent: var(--md-primary); --accent2: var(--md-on-primary-container); --accent-soft: color-mix(in srgb, var(--md-primary) 16%, transparent); --ring: color-mix(in srgb, var(--md-primary) 40%, transparent); --border: var(--md-outline-variant); --border2: var(--md-outline); --green: var(--md-success); --green-soft: var(--md-success-container); --amber: var(--md-warning); --amber-soft: var(--md-warning-container); --red: var(--md-error); --red-soft: var(--md-error-container); --purple: var(--md-tertiary); --purple-soft: var(--md-tertiary-container); --shadow-sm: var(--md-elev-1); --shadow-md: var(--md-elev-2); --shadow-lg: var(--md-elev-3); --radius-xs: var(--md-shape-xs); --radius-sm: var(--md-shape-sm); --radius: var(--md-shape-md); --radius-dialog: var(--md-shape-xl); --font-display: var(--md-font-brand); --font-brand: var(--md-font-brand); --font-logo: var(--md-font-logo); --font-body: var(--md-font-plain); --font-mono: var(--md-font-mono); } /* ════════════════════════════════════════════════════════════════════════ MATERIAL SYMBOLS — base class (M3 default outlined, weight 400, 24dp) Use: search favorite (active) close (size) ════════════════════════════════════════════════════════════════════════ */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; user-select: none; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } .material-symbols-outlined.fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .material-symbols-outlined.s-18 { font-size: 18px; } .material-symbols-outlined.s-20 { font-size: 20px; } .material-symbols-outlined.s-40 { font-size: 40px; } .material-symbols-outlined.s-48 { font-size: 48px; } /* ════════════════════════════════════════════════════════════════════════ M3 BUTTON VARIANTS — pill shape, sentence-case label, 5 estilos canonicos Use direta em