/* ══════════════════════════════════════════════════════════════════ DESIGN TOKENS — fonte única de verdade para cor, tipografia, espaço, raio, sombra e movimento em todo o produto (app autenticado + onboarding). Importado por base.html e por registration/base_onboarding.html. Os nomes de variável já usados nos templates (--accent, --text-secondary, --border-color, --emerald etc.) foram PRESERVADOS de propósito — trocar o valor aqui já corrige o produto inteiro, sem precisar tocar em cada template. ── Reforma Apple HIG (redesign/apple-hig, P1) ────────────────────── A auditoria que motivou esta reforma mediu que só 5% dos font-size, 0% dos font-weight (token nem existia) e 9% dos border-radius do produto de fato liam um token — o resto era hardcoded. Esta fase entrega a ESCALA nova (Apple HIG real, não aproximada) para que as fases seguintes (P2 vidro, P3 aplicação no chrome, P5-P7 varredura) tenham uma fonte única de verdade a apontar. Plano completo, com a mecânica óptica e as citações da documentação Apple, em ~/.claude/plans/eu-quero-fazer-uma-functional-gem.md. Decisão de escopo desta fase: --emerald/--amber/--rose/--cyan NÃO mudam de valor aqui. Essas 4 cores já são usadas como TEXTO direto em dezenas de lugares (ex.: --cyan em 47 badges "PIX") — os hex atuais já foram calibrados nesta mesma sessão de trabalho pra passar WCAG AA nesse papel duplo (texto E fundo tintado). Os equivalentes literais da Apple (systemGreen/-Orange/-Red/-Teal) são claros/brilhantes demais pra funcionar como texto sobre fundo claro — trocar cegamente reintroduziria exatamente o bug que --cyan já corrigiu uma vez (era #0EA5E9, reprovava AA, virou #0369A1). ══════════════════════════════════════════════════════════════════ */ :root { /* ── Tipografia — Gotham único DENTRO do portal (decisão do cliente, 08/09/2026: depois de ver Snasm nos títulos por 5 dias, pediu uma família só pro produto — a mistura lia como inconsistente). Servida por frontend/static/css/fonts.css (@font-face), carregado ANTES deste arquivo. --font-sans → Gotham Rounded (corpo — herdado por tudo) --font-title → alias de --font-sans (Gotham). Era Snasm (2026-09-03 a 2026-09-08) — os call sites `var(--font-title)` (h1–h6, cabeçalhos) seguem no lugar marcando a intenção, só renderizam Gotham agora, mesmo padrão já usado por --font-display/--font-accent. --font-display → alias de --font-sans (Gotham): ênfase numérica (valores em R$, KPIs, preços de plano). --font-accent → alias de --font-sans (Gotham): rótulos em maiúsculas, deck do cabeçalho, citações. Snasm CONTINUA em uso fora do portal — login, cadastro, KYC, checkout, proposta pública e formulário público mantêm a identidade própria, cada um com :root separado (não lê este arquivo): registration/login.html, registration/ base_onboarding.html, crm/proposta_publica.html, projetos/ formulario_publico.html. Por isso fonts.css continua declarando o @font-face de Snasm e os .woff2 continuam no repo — não é resíduo, é o que essas telas usam. Só o preload de Snasm-Light.woff2 saiu de base.html (o portal não usa mais). ─ */ --font-sans: 'Gotham Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --font-display: var(--font-sans); --font-title: var(--font-sans); --font-accent: var(--font-sans); /* ── Escala tipográfica — Apple HIG (Dynamic Type, tamanho Large), não uma aproximação. Nomes de token PRESERVADOS (--text-xs .. --text-3xl já são lidos em ~50 lugares) — só os valores e o PAPEL de cada um mudam para bater com o degrau real da Apple. Três ficam com o número que já tinham (--text-xs, --text-sm, --text-2xl) — o resto sobe. A mudança que mais importa: --text-base sai de 14px pra 17px (Body da Apple) — é o piso de legibilidade "arm's-length" do HIG; o produto inteiro estava abaixo dele. --text-table é NOVO: por decisão do usuário ("tabelas densas"), tabela/lista opera em Subhead (15px) em vez de Body (17px) — mesma família Apple, degrau mais compacto, não um valor inventado. --text-2xs é NOVO: Caption 2, o PISO da Apple (11px) — reservar pra micro-rótulo raro, não pra uso corriqueiro (hoje 53% do produto está abaixo de 13px; essa escala existe pra isso legitimamente, não a rotina). ────────── */ --text-2xs: .6875rem; /* 11px — Caption 2, piso da Apple; raro */ --text-xs: .75rem; /* 12px — Caption 1: legenda, badge */ --text-sm: .8125rem; /* 13px — Footnote: texto secundário, cabeçalho de tabela */ --text-table: .9375rem;/* 15px — Subhead: corpo de tabela/lista densa (decisão do usuário) */ --text-base: 1.0625rem;/* 17px — Body: corpo padrão do produto (era 14px) */ --text-md: 1.0625rem; /* 17px — Body/Headline: inputs e ênfase (era 16px; alinhado ao Body — evita zoom automático de campo no iOS Safari, que dispara abaixo de 16px) */ --text-lg: 1.25rem; /* 20px — Title 3: título de card/seção (era 18px) */ --text-xl: 1.375rem; /* 22px — Title 2: título de página (mesmo valor de antes) */ --text-2xl: 1.75rem; /* 28px — Title 1: valor de KPI grande (mesmo valor de antes) */ --text-3xl: 2.125rem; /* 34px — Large Title: hero de onboarding (era 36px, ajustado ao valor exato da Apple) */ /* ── Peso — não existia token nenhum antes (466 declarações no produto, 100% hardcoded, 83% delas 600/700). A Apple faz o oposto do que este produto fazia: corpo em regular, semibold reservado a título/headline. Nomeados por peso, não por papel ("--fw-title" etc.) porque cada família de componente decide o próprio pareamento tamanho×peso — mais flexível que fixar o par no nome. ─────────────────────────────────────────────────── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Leading — três degraus, não um por tamanho. A proporção real da Apple varia pouco (1.18–1.39 entre os 11 estilos do HIG); três baldes cobrem a faixa sem inventar 11 tokens: tight pros extremos (título grande e legenda mínima), snug pra faixa de leitura principal (headline/body/callout/subhead — é onde a Apple realmente vive), normal como fallback de prosa mais longa (descrição/comentário em várias linhas, onde 1.3 fica apertado demais pra parágrafo). ──────────────────────────────────────── */ --leading-tight: 1.2; --leading-snug: 1.3; --leading-normal: 1.5; /* ── Tracking — a Apple ajusta opticamente por tamanho; três degraus aproximam sem precisar de um valor por estilo. Note a inversão proposital: hoje 90 das 109 ocorrências de letter-spacing no produto são POSITIVAS (o padrão "eyebrow uppercase" que dá cara de dashboard 2019) — a Apple faz o oposto: título grande fica NEGATIVO (mais apertado), corpo levemente negativo, texto pequeno neutro. Consumo real desses tokens começa na P3; aqui só a fundação. ────────────────────── */ --tracking-tight: -.02em; /* título ≥28px */ --tracking-snug: -.01em; /* corpo/headline 17px */ --tracking-normal: 0; /* texto pequeno — nunca positivo por padrão */ /* P3: as 5 letter-spacing positivas em design-system.css eram 4 valores diferentes (.1/.06/.05/.04em) pro MESMO papel — rótulo caixa-alta pequeno ("eyebrow"). Matar o eyebrow por inteiro é varredura de produto inteiro (P5-P7); aqui só consolida o que já existe num valor só, em vez de inventar mais um. */ --tracking-caps: .05em; /* rótulo uppercase pequeno — único ponto de consumo até P5-P7 */ /* ── Espaço (múltiplos de 4px) ─────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ── Raio — nomes PRESERVADOS (53 consumidores já leem sm/md/lg/ full pelo PAPEL certo: chip pequeno / botão-input / cartão-modal / cápsula) — só os valores sobem, pra bater com a linguagem mais arredondada da Apple. --radius-xs e --radius-xl são NOVOS: xs cobre o que hoje usa algo menor que 8px (etiqueta inline), xl cobre painel/sheet grande — a Apple aumenta o raio especificamente em seções/sheets maiores ("increased corner radius to match the curvature of controls"). Regra de concentricidade continua valendo: raio_interno = raio_externo − padding — filho tem que acompanhar a curvatura do pai. ────── */ --radius-xs: 6px; /* NOVO — etiqueta inline, controle mínimo */ --radius-sm: 8px; /* era 6px — chip, pill de status */ --radius-md: 12px; /* era 8px — botões, inputs */ --radius-lg: 16px; /* era 12px — cards, modais, painéis */ --radius-xl: 20px; /* NOVO — sheet/painel grande, superfície proeminente */ --radius-full: 999px;/* avatar, badge circular, pill — inalterado */ /* ── Alvo de toque — regra dura do HIG (44×44pt), não um número arbitrário. Consumo começa na P3 (botões/controles pequenos hoje usam 32px). ────────────────────────────────────────────── */ --tap-target-min: 44px; /* ── Sombra — discreta, nunca "cartão flutuando" ──────────── */ --shadow-xs: 0 1px 2px rgba(15, 15, 20, .04); --shadow-sm: 0 1px 3px rgba(15, 15, 20, .06), 0 1px 2px rgba(15, 15, 20, .04); --shadow-md: 0 4px 10px -2px rgba(15, 15, 20, .08), 0 2px 4px -2px rgba(15, 15, 20, .04); --shadow-lg: 0 12px 24px -6px rgba(15, 15, 20, .14), 0 4px 8px -4px rgba(15, 15, 20, .06); --shadow-xl: 0 24px 48px -10px rgba(15, 15, 20, .22), 0 8px 16px -6px rgba(15, 15, 20, .1); /* P2: material espesso (sheet/modal grande) */ /* ── Breakpoints — documental (media query não lê var()) ─── sm: 640px · md: 1024px (sidebar vira drawer abaixo disso) · lg: 1280px */ /* ── Movimento ─────────────────────────────────────────────── */ --dur-fast: .12s; --dur-base: .18s; --dur-slow: .3s; --ease: cubic-bezier(.4, 0, .2, 1); /* ── Z-index — escala única (evita a corrida de 999/1000/9999/10000). --z-drawer > --z-backdrop de propósito: .sidebar e .sidebar-backdrop (único consumidor de cada um — grep confirma) são IRMÃOS no DOM (pt-ui.js: document.body.appendChild(backdrop), não filho do drawer), diferente de .pt-modal/.pt-modal-backdrop (modal É filho do próprio backdrop, herda empilhamento sem precisar de z-index próprio). Com backdrop numericamente MAIOR (era 45 > drawer 40), o scrim pintava POR CIMA do drawer inteiro — inofensivo enquanto o scrim era só uma cor plana (tinta escura sobre sidebar já escura, imperceptível), mas com blur (Fase 3 do redesign Liquid Glass) o drawer inteiro — nav, texto, tudo — aparecia borrado através do próprio scrim, ilegível no mobile. Achado testando o drawer em viewport 390px. */ --z-sticky: 20; --z-dropdown: 30; --z-backdrop: 40; --z-drawer: 45; --z-modal: 50; --z-toast: 60; /* ── Fundos SÓLIDOS seguros para texto branco em cima ────────── --cyan/--emerald/--amber/--rose variam por tema pra funcionar bem como TEXTO sobre o fundo do tema (ver os 3 blocos [data-theme] e scripts/check_contrast.py) — mas usadas como FUNDO SÓLIDO com texto branco em cima (botão, banner, badge "ativo"), a maioria fica clara/saturada demais pra isso, sobretudo no tema escuro: branco sobre --cyan claro é o "azul claro com texto quase ilegível" relatado na tela Vender por PIX, e o mesmo padrão se repetia no botão de perigo (--rose) e nos badges de prioridade "ativo" (crm/tarefas). Nunca theme-dependente de propósito — a garantia é ser escura o bastante nos 3 temas. Todos passam >=4.5:1 contra branco (scripts/check_contrast.py). */ --cyan-solid: #0369A1; --emerald-solid: #047857; --amber-solid: #B45309; --rose-solid: #DC2626; --gray-solid: #475569; /* ── Geometria concêntrica — Liquid Glass exige que o filho acompanhe a curvatura do pai: raio_interno = raio_externo − padding. Não é token novo, é a REGRA de uso de --radius-* daqui pra frente (ex.: botão de 8px dentro de card de 12px com 4px de padding = concêntrico; um raio solto sem essa relação "descola" a forma — HIG §13). ──── */ /* ── Material Regular (Liquid Glass) — blur e saturação são a mesma física nos 3 temas; só a COR do material varia por tema (ver os blocos abaixo). Só existe a família Regular neste produto: atrás das superfícies funcionais há tabela/formulário/texto, não mídia rica — Clear seria ilegível aqui. Nunca misturar as duas variantes — a própria Apple: "Regular and Clear... should never be mixed". Escala de espessura (P2, WWDC25 "Meet Liquid Glass": "as Liquid Glass grows to larger sizes, it simulates a thicker material, with deeper shadows and more pronounced lensing") — superfície PEQUENA usa thin, a maioria (controles/barras/popovers de porte médio) usa regular, superfície GRANDE (sheet/modal cobrindo boa parte da tela) usa thick. `--material-blur`/`-saturate` sem sufixo continuam existindo com o valor de sempre — são o alias de "regular" e ~30 usos em CSS/templates já os leem direto. */ --material-blur-thin: 12px; --material-blur: 20px; --material-blur-regular: var(--material-blur); --material-blur-thick: 32px; --material-saturate: 180%; } /* ══════════════════════════════════════════════════════════════════ PRESETS DE ESCALA TIPOGRÁFICA — preferência do usuário (Fase 5 do plano de reforma de UX, 08/09/2026: o pedido foi "o que o celular já faz com tamanho de fonte"). Aplicados por ``, renderizado pelo SERVIDOR a partir de PerfilUsuario.escala_fonte (ver backend/context_processors.py + frontend/templates/base.html) — nunca por JS/fetch: é a única forma de não ter flash de tamanho no primeiro paint. Catálogo canônico em apps/empresas/preferencias.py. Cada preset é um degrau REAL do Dynamic Type da Apple (Small / Large / xLarge / xxLarge), não um multiplicador: a Apple faz corpo e título crescerem em TAXAS DIFERENTES (Body 17→21px = +24%; Large Title 34→38px = +12%) — um `calc(base * fator)` achataria essa curva e ainda geraria meio-pixel espalhado pela escala inteira. Um eixo só (não "tamanho de título" + "tamanho de texto" separados): a curva do Dynamic Type já MOVE os dois juntos, então o preset único entrega o que foi pedido sem 16 combinações. Os dois subconjuntos de tokens são disjuntos por trás disso (--text-lg/-xl/-2xl/-3xl = título; --text-2xs..--text-md + --text-table = texto), então se um dia precisar de controle independente, o bloco se parte em data-title-scale/data-text-scale mecanicamente — sem redesenhar nada. "medio" não tem bloco aqui: é o :root logo acima. Ele está no catálogo (apps/empresas/preferencias.py) e É renderizado no atributo mesmo assim — o valor no HTML sempre diz a verdade sobre a preferência gravada, nunca "ausência de atributo = médio implícito". Seletor SEM `:root` de propósito: mesma especificidade (0,1,0) que `:root`, vence por ordem (este bloco vem DEPOIS), e assim a mesma regra funciona também num elemento ANINHADO — é o que dá a amostra ao vivo da tela de Configurações de graça (`Aa` dentro de uma página renderizada em "médio"). `--leading-*` (razões sem unidade) e `--tracking-*` (em `em`) escalam sozinhos, não precisam de bloco aqui. `--space-*` são px FIXOS e NÃO escalam — é o ponto de atenção da Fase 7 (passada de alinhamento): em "muito-grande", um padding fixo ao lado de texto maior é a receita do "texto cortado" que o cliente relatou. ────────────────────────── */ [data-font-scale="pequeno"] { --text-2xs: .6875rem; /* 11px */ --text-xs: .6875rem; /* 11px */ --text-sm: .75rem; /* 12px */ --text-table: .8125rem; /* 13px */ --text-base: .9375rem; /* 15px */ /* 16px, NÃO 15 — é o token dos inputs (--text-md), e abaixo de 16px o iOS Safari dá zoom automático ao focar campo (mesmo motivo já documentado no próprio --text-md do :root, acima). Único desvio deliberado da tabela da Apple. */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.625rem; /* 26px */ --text-3xl: 2rem; /* 32px */ } [data-font-scale="grande"] { --text-2xs: .8125rem; /* 13px */ --text-xs: .875rem; /* 14px */ --text-sm: .9375rem; /* 15px */ --text-table: 1.0625rem; /* 17px */ --text-base: 1.1875rem; /* 19px */ --text-md: 1.1875rem; /* 19px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ } [data-font-scale="muito-grande"] { --text-2xs: .9375rem; /* 15px */ --text-xs: 1rem; /* 16px */ --text-sm: 1.0625rem; /* 17px */ --text-table: 1.1875rem; /* 19px */ --text-base: 1.3125rem; /* 21px */ --text-md: 1.3125rem; /* 21px */ --text-lg: 1.5rem; /* 24px */ --text-xl: 1.625rem; /* 26px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.375rem; /* 38px */ } /* ══════════════════════════════════════════════════════════════════ TEMA CLARO (padrão) — cor semântica Apple (UIKit). A Apple não publica hex garantido (cores são adaptativas); os valores abaixo são os medidos pela comunidade a partir do UIKit e são o padrão de facto — ver a seção de fontes do plano de redesign. O texto secundário/terciário passa a ser CINZA-BASE COM ALFA (não mais uma cor sólida) — é o detalhe que a documentação da Apple mais evidencia como "isto é Apple": o texto assenta DENTRO da superfície em vez de flutuar sobre ela, e o mesmo alfa funciona tanto sobre fundo opaco quanto sobre material translúcido (P2). O alfa de --text-secondary é .72, não o .60 "de fábrica" da Apple: rgba (60,60,67,.60) sobre branco mede 3.44:1 — reprova AA (4.5:1). A Apple pode se dar ao luxo de .60 porque o rótulo quase sempre está sobre systemGroupedBackground (#F2F2F7), não branco puro; aqui o mecanismo (alfa sobre cinza-base) é fiel à Apple, o número foi recalibrado pra não reprovar contra --bg-secondary. Resultado: 4.74:1 (calculado, WCAG). --text-tertiary mantém alfa baixo de propósito — é decorativo por natureza na própria Apple, e este produto já tinha um precedente documentado de aceitar essa camada abaixo de AA (ver scripts/check_contrast.py, "FALHA CONHECIDA"). ═════════════════════ */ :root, [data-theme="light"] { --bg-primary: #F8FAFC; --bg-secondary: #FFFFFF; --bg-tertiary: #F1F5F9; /* label — Apple usa preto puro no claro. Contraste trivial (21:1). */ --text-primary: #000000; /* secondaryLabel recalibrado — ver nota acima (.72, não .60) */ --text-secondary: rgba(60, 60, 67, .72); /* tertiaryLabel — decorativo por design, mesmo na Apple; mantido abaixo de AA de propósito (ver check_contrast.py) */ --text-tertiary: rgba(60, 60, 67, .42); /* separator/opaqueSeparator — o Apple.separator é alfa (funciona sob vidro na P2); border-strong é a versão sólida quando é preciso um traço firme independente do que está atrás. */ --border-color: rgba(60, 60, 67, .29); --border-strong: #C6C6C8; --card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Accent — systemIndigo da Apple (era #4F46E5, indigo do Tailwind). Ponto de injeção do white-label preservado: quando o tenant define cor_primaria, base.html seta --tenant-accent inline; sem tenant, cai no systemIndigo. Branco sobre #5856D6 mede 5.63:1 (WCAG) — passa AA sem precisar de variante -solid dedicada. */ --accent: var(--tenant-accent, #5856D6); --accent-hover: color-mix(in srgb, var(--accent) 85%, black); --accent-light: rgba(88, 86, 214, .08); --accent-ring: rgba(88, 86, 214, .25); --emerald: #10B981; --emerald-light: rgba(16, 185, 129, .1); --amber: #F59E0B; --amber-light: rgba(245, 158, 11, .1); --rose: #EF4444; --rose-light: rgba(239, 68, 68, .1); /* Era #0EA5E9 — reprovava WCAG AA como texto sobre --bg-secondary (2.77:1, precisa 4.5:1; ~47 badges "PIX" usam --cyan como texto direto). #0369A1 passa (5.93:1) e, por ser a mesma cor mais escura, agora também serve como fundo sólido com texto branco (era só --cyan-solid que resolvia isso; aqui os dois papéis convergem). */ --cyan: #0369A1; --cyan-light: rgba(3, 105, 161, .1); /* ── Material Regular — superfície clara translúcida ───────────── */ --material-bg: rgba(255, 255, 255, .68); --material-bg-solid: #FFFFFF; --material-border: rgba(15, 23, 42, .08); --material-highlight: rgba(255, 255, 255, .85); --material-shadow-over-plain: var(--shadow-sm); --material-shadow-over-content: var(--shadow-lg); /* ── Sidebar adaptativa — superfície de material como qualquer outra (--material-bg/-bg-solid, acima), e SEGUE o tema. --sidebar-label agora É var(--text-secondary) (antes um hex dedicado #64748B, 4.76:1) — a recalibração acima de --text-secondary já entrega contraste equivalente (4.74:1), então o token dedicado deixou de ser necessário; alinhado ao padrão que o tema escuro já usava (--sidebar-label: var( --text-secondary) lá embaixo). ─────────────────────────────── */ --sidebar-text: var(--text-primary); --sidebar-text-hover: var(--text-primary); --sidebar-text-active: var(--accent); --sidebar-label: var(--text-secondary); --sidebar-separator: var(--border-color); --sidebar-hover-bg: rgba(15, 23, 42, .05); --sidebar-active-bg: var(--accent-light); } /* ══════════════════════════════════════════════════════════════════ TEMA ESCURO — neutro da Apple (era slate azulado #0A0F1A/#111827/ #1E293B). Fundo #000000 puro, superfícies #1C1C1E/#2C2C2E — a hierarquia systemGroupedBackground/secondarySystemGroupedBackground/ tertiarySystemGroupedBackground exata do UIKit escuro. É o que faz o escuro parecer iOS em vez de "tema escuro de dashboard". O alfa de secondaryLabel/tertiaryLabel da Apple funciona SEM recalibrar aqui — diferente do claro, o par sobre #1C1C1E mede 5.91:1 (secondaryLabel) e passa longe do problema que o claro teve (o preto de fundo dá muito mais margem de contraste pro mesmo alfa). ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg-primary: #000000; --bg-secondary: #1C1C1E; --bg-tertiary: #2C2C2E; --text-primary: #FFFFFF; --text-secondary: rgba(235, 235, 245, .60); /* Era .30 (o alfa de fábrica da Apple) — subido pra .42, o MESMO alfa usado no tema claro (ver bloco acima), por consistência de tier entre os 2 temas. Ainda fica abaixo de AA (~3.6:1) de propósito: terciário é decorativo por design mesmo na Apple, e subir mais (teria que ir a .50 pra cravar 4.5:1) o deixaria visualmente quase igual ao secundário — perderia a própria razão de existir como tier. Ver scripts/check_contrast.py, "FALHA CONHECIDA" — o mesmo padrão que o terciário claro já tinha antes desta reforma. */ --text-tertiary: rgba(235, 235, 245, .42); --border-color: rgba(84, 84, 88, .60); --border-strong: #38383A; --card-shadow: 0 1px 3px rgba(0, 0, 0, .6); --card-shadow-hover: 0 10px 25px rgba(0, 0, 0, .7); /* systemIndigo escuro da Apple. Como TEXTO/ícone sobre --bg-secondary mede 3.39:1 — abaixo de AA-normal (4.5:1), mas acima de AA-large/componente-de-UI (3:1), que é o patamar que este mesmo script já usava pro papel de "accent como ícone/texto" (era #036BA8 contra o mesmo --bg-secondary, também testado em 3.0 — ver scripts/check_contrast.py). Como FUNDO sólido com texto branco em cima (botão primário) passa com folga: 5.63:1 (mesmo par calculado ao contrário). */ --accent: var(--tenant-accent-dark, #5E5CE6); --accent-hover: color-mix(in srgb, var(--accent) 85%, white); --accent-light: rgba(94, 92, 230, .14); --accent-ring: rgba(94, 92, 230, .3); --emerald: #34D399; --emerald-light: rgba(52, 211, 153, .1); --amber: #FBBF24; --amber-light: rgba(251, 191, 36, .1); --rose: #F87171; --rose-light: rgba(248, 113, 113, .1); --cyan: #38BDF8; --cyan-light: rgba(56, 189, 248, .1); /* ── Material Regular — superfície escura translúcida ───────────── */ --material-bg: rgba(28, 28, 30, .68); --material-bg-solid: var(--bg-secondary); --material-border: rgba(255, 255, 255, .10); --material-highlight: rgba(255, 255, 255, .16); --material-shadow-over-plain: var(--shadow-sm); --material-shadow-over-content: var(--shadow-lg); /* ── Sidebar adaptativa — --sidebar-text usa --text-secondary (5.91:1 sobre o fundo sólido da sidebar), não --text-primary: precisa ficar abaixo do estado ativo/hover em hierarquia. ───── */ --sidebar-text: var(--text-secondary); --sidebar-text-hover: var(--text-primary); --sidebar-text-active: #fff; --sidebar-label: var(--text-secondary); --sidebar-separator: var(--border-color); --sidebar-hover-bg: rgba(255, 255, 255, .06); --sidebar-active-bg: color-mix(in srgb, var(--accent) 45%, transparent); } /* Respeita a preferência do sistema por menos movimento — nenhuma parte do produto tinha isso antes (auditoria: 0 ocorrências). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }