/* ===================================================================== token.css — a camada portátil do Design System do ecossistema --------------------------------------------------------------------- Contrato de valor : spec-base/codigo-base-tokens.md v2.3.0 Este arquivo : v2.3.0 - o contrato COMPLETO, sem uma linha de valor propria. Data : 2026-08-31 Status : normativo para .claude/documents/interface/ REGRA ZERO — nível 1 (primitivo) só existe aqui. CSS de componente toca EXCLUSIVAMENTE o nível 2 (semântico). Um `#hex` em CSS de componente é um defeito de tema esperando o primeiro cliente que ligar o modo claro. O gate procura por `#[0-9a-fA-F]{3,6}`, `rgb(`, `rgba(255,255,255`, `rgba(0,0,0,0.[3-9]`, `hsl(` — e a única isenção é a linha marcada com um comentário `theme-exempt: `. NOTA AO PRÓXIMO QUE EDITAR ESTE CABEÇALHO: não escreva a sequência de FECHAR comentário aqui dentro, nem para citar um exemplo. CSS não aninha comentários — o primeiro fechamento encerra o bloco, e todo o resto do cabeçalho passa a ser lido como seletor. O sintoma é silencioso e desconcertante: a regra seguinte (o TEMA ESCURO inteiro) é engolida como parte de um seletor inválido e descartada, o tema claro continua funcionando, e a tela some só no escuro. Custou um render para achar. --------------------------------------------------------------------- A EMENDA v2.2.0 — o que este arquivo acrescenta ao contrato, e por quê Todos os itens abaixo já eram usados pelos mocks e pelas implementações de referência, e nenhum estava declarado no contrato. Enquanto ficarem fora da norma, cada produto os reinventa com um valor próprio — que é exatamente o mecanismo que o contrato §1 existe para impedir. | Token | Onde já era usado | Papel | ----------------------------- | ------------------------- | ------------------ | --ds--text (4) | mock canônico, referência | status COMO texto | --ds-canvas | mock do painel (FAM-06) | o palco da Zona 3 | --ds-fs-* (6) | mock canônico, LGN-16 | escala tipográfica | --ds-tooltip-bg / -text | mock canônico, referência | etiqueta de sistema | --ds-z4-nav-w | wireframe §8.1 (só prosa) | nav interna da Z4 | --ds-z5-h | spec do painel (PAN-02) | rodapé de status | --ds-mark-* / --ds-wordmark-* | spec de login (LGN-09) | reserva de marca | --ds-seal / --ds-seal-gap | inédito | reserva do selo PROMOVIDA em 2026-08-21: o contrato subiu para a v2.2.0 e passou a declarar as sete famílias (§6.5 e §6.6). Este arquivo deixou de acrescentar e voltou a ser o que deve ser — o contrato EXECUTÁVEL, sem uma linha de valor própria. Quando os dois discordarem, vence o contrato, e este arquivo é que se corrige. --------------------------------------------------------------------- A 2.3.0 - o que a implementacao de referencia ja tinha e a norma nao Sete familias que existiam no produto de referencia e nunca haviam subido para o contrato. Enquanto ficarem fora da norma, cada produto as reinventa com um valor proprio - que e exatamente o mecanismo que o contrato existe para impedir. | Familia | Papel | ------------------------------ | -------------------------------- | --ds-overlay-* (7) | veu interno de componente | --ds-avatar-* + on-avatar (11) | paleta de identidade, tinta pareada | --ds-gold / --ds-on-gold | categorica de auditoria | --ds-on- (5) | tinta sobre preenchimento categorico | --ds-on-accent-strong | tinta funda sobre o accent | --ds-surface-sticky | faixa que gruda ao rolar | --ds-banner-h | altura da faixa de condicao QUATRO VALORES MUDARAM, e nao foi gosto: rose no escuro, cyan, teal e emerald no claro nao passavam AA com tinta NENHUMA - nem branca nem escura. O ajuste e de luminancia, entre 0,009 e 0,016 em OKLCH, e a olho nu nao se ve. O que se ve e a lista de pares do gate: ate a 2.2.0 ninguem media tinta sobre categorica, e o que nao esta na lista passa verde por ausencia. ===================================================================== */ /* ───────────────────────────────────────────────────────────────────── 1. TEMA ESCURO — o padrão O escuro é o default de :root: um produto que nunca escreva data-theme nasce escuro, que é a postura da família. ───────────────────────────────────────────────────────────────────── */ :root, :root[data-theme="dark"]{ color-scheme: dark; /* ── 1.1 Superfícies — seis degraus. No escuro, quanto mais ELEVADO, mais CLARO: não há luz para projetar sombra sobre #121317, então o que aproxima do usuário é a luminância. O campo é a exceção deliberada — ele RECUA, porque não é um objeto elevado, é um buraco onde se escreve. */ --ds-rail: #0D0E10; /* Zona 1 — o degrau mais fundo */ --ds-bg: #121317; /* fundo da área de trabalho */ --ds-surface: #1F2025; /* cromo das zonas: Z0, Z2, Z4, Z5, dock */ --ds-raised: #25262C; /* cartão, hover, painel elevado */ --ds-raised-2: #2D2E35; /* elevação sobre elevação (raro) */ --ds-input: #16171C; /* campo de formulário — recua, não sobe */ /* v2.3.0 - a faixa que GRUDA ao rolar: cabecalho de tabela, barra de filtro, topo de lista. Recua como o campo, pelo mesmo motivo: ela nao subiu ate o usuario, ela ficou parada enquanto o conteudo passou por baixo. Usar --ds-surface aqui faz a linha rolante desaparecer atras do cabecalho no exato tom dele. */ --ds-surface-sticky: #16171C; /* v2.2.0 — o palco da Zona 3. É a MESMA cor do backdrop da tela de entrada por construção, e não um token de fundo próprio: 66% de preto sobre --ds-bg. É o que faz a Zona 3 e o véu de entrada serem visualmente o mesmo plano dentro do mesmo produto. */ --ds-canvas: color-mix(in srgb, black 66%, var(--ds-bg)); /* ── 1.2 Bordas — três forças, e só a terceira passa no contraste. B-4.42: contorno de controle interativo é SEMPRE --ds-border-strong. --ds-border existe para SEPARAR áreas; um separador com 3:1 vira uma grade de linhas gritando. São trabalhos diferentes. */ --ds-border: #36373F; --ds-border-hover: #545663; --ds-border-strong: #6d6f7d; /* 2.1.0 — era #686A78 (2,82:1 s/ raised) */ /* ── 1.3 Texto — três degraus, e um quarto é PROIBIDO. B-4.43: rótulo de campo é --ds-text-2. Rótulo em --ds-text-3 faz o formulário inteiro parecer desabilitado, e a queixa que chega ("o sistema está apagado") não aponta para lugar nenhum. */ --ds-text: #E6EDF6; /* conteúdo */ --ds-text-2: #B3B7BD; /* rótulo, subtítulo, cabeçalho de tabela */ --ds-text-3: #A3A7AF; /* hint e placeholder — e nada além disso */ /* ── 1.4 Accent — o único token que o whitelabel troca. */ --ds-accent: #FF8C00; /* IGUAL nos dois temas — é a marca */ --ds-accent-hover: #FFB340; --ds-accent-active: #DB8400; --ds-accent-soft: #251E15; /* wash de superfície (estado ativo) */ --ds-accent-medium: #2E2314; /* wash + 1 (ativo sob ponteiro) */ --ds-on-accent: #2A1D08; /* B-4.44 — tinta ESCURA: 7,05:1 (AAA). Branco sobre o âmbar dá 2,33:1 e reprova AA. É o erro mais caro do sistema porque é o mais bonito. */ --ds-on-accent-strong: #1F1500; /* v2.3.0 - a mesma tinta, um degrau mais funda: 7,72:1. Para rotulo em corpo pequeno e glifo fino sobre o accent, onde 7,05 ja se le apagado. */ /* B-4.51 — accent COMO texto ou COMO contorno de identidade sobre superfície neutra. No escuro coincide com o accent; no claro escurece, porque lá o âmbar puro dá ~2,1:1 e o contorno some. */ --ds-accent-text: var(--ds-accent); /* ── 1.5 Status — TRÊS tokens por status, e eles não se substituem: --ds- preenchimento (chip sólido, ponto, barra) --ds--text o status COMO texto sobre fundo neutro [v2.2.0] --ds-on- o texto que vai POR CIMA do preenchimento B-4.45: on- NÃO é sempre branco — info e success INVERTEM entre os temas, e fixar branco reprova metade dos pares. */ --ds-online: #3FB950; --ds-success: #0D7A0D; --ds-danger: #E00000; /* não é #ff0d00: o puro dava 3,96:1 c/ branco */ --ds-warning: #FBBF24; --ds-info: #4EA0FF; --ds-success-text: #3FB950; /* v2.2.0 */ --ds-danger-text: #ff7d73; /* v2.2.0 */ --ds-warning-text: #FBBF24; /* v2.2.0 */ --ds-info-text: #7FB4E4; /* v2.2.0 */ /* `online` NÃO tem -text, e a ausência é deliberada: ele é indicador (dot de saúde, anel de janela), nunca texto. Precisou de texto verde? é `success`. */ --ds-on-online: #2A1D08; --ds-on-success: #ffffff; --ds-on-danger: #ffffff; --ds-on-warning: #2A1D08; --ds-on-info: #2A1D08; --ds-on-fill: #ffffff; /* tinta genérica p/ preenchimento CATEGÓRICO — nunca sobre accent nem sobre status */ /* ── 1.6 Categóricas — distinguem N coisas EQUIVALENTES. B-4.47: categórica não significa estado, e status não identifica série. Verde e vermelho num gráfico de comparação fazem o leitor ler "bom" e "ruim" antes de olhar a legenda. */ --ds-purple: #C084FC; --ds-cyan: #5EEAD4; --ds-teal: #41CFA9; --ds-rose: #EE4E65; /* 2.3.0 - era #e84860, e com ele NENHUMA tinta passava AA: branca 3,80, escura 4,33 */ --ds-emerald: #22b07a; --ds-gold: #E6A313; /* 2.3.0 - auditoria, qualidade, destaque. NAO e status: dourado ao lado do ambar de um alerta faz o leitor procurar uma diferenca que nao existe. Origem em oklch(76% .155 78), gravado em hex porque o gate resolve hex, var e color-mix - e nao oklch. */ /* A categorica tambem recebe tinta POR CIMA quando vira preenchimento solido: chip, pastilha, anel com inicial. Sem estes seis, cada tela escolhe branco por habito - e branco reprova em cinco das seis. */ --ds-on-purple: #2A1D08; --ds-on-cyan: #2A1D08; --ds-on-teal: #2A1D08; --ds-on-rose: #2A1D08; --ds-on-emerald: #2A1D08; --ds-on-gold: #2A1D08; /* ── 1.7 Tintas — FÓRMULA, não cor. `rgba(255,140,0,.14)` é o accent de hoje congelado: o cliente que troca para azul recebe trinta manchinhas laranja, cada uma num arquivo diferente. color-mix sobre a VARIÁVEL acompanha a troca sozinho. No escuro a base é `transparent`; no claro, `white`. */ --ds-accent-tint: color-mix(in srgb, var(--ds-accent) 14%, var(--ds-surface)); --ds-success-tint: color-mix(in srgb, var(--ds-success) 14%, var(--ds-surface)); --ds-danger-tint: color-mix(in srgb, var(--ds-danger) 14%, var(--ds-surface)); --ds-warning-tint: color-mix(in srgb, var(--ds-warning) 14%, var(--ds-surface)); --ds-info-tint: color-mix(in srgb, var(--ds-info) 14%, var(--ds-surface)); --ds-hover: color-mix(in srgb, var(--ds-text) 4%, var(--ds-surface)); /* v2.3.0 - VEU: a mesma tinta preta em sete forcas. Nao e o scrim; o scrim e UM veu, o da camada modal. Estes sao material de dentro do componente - listra de linha alternada, cabecalho de flutuante, degrau entre rodape e corpo. Sete forcas porque quem tem tres arredonda para a mais proxima e a hierarquia colapsa em duas. */ --ds-overlay-xs: rgba(0,0,0,.03); --ds-overlay-sm: rgba(0,0,0,.05); --ds-overlay-md: rgba(0,0,0,.08); --ds-overlay-lg: rgba(0,0,0,.12); --ds-overlay-xl: rgba(0,0,0,.16); --ds-overlay-2xl: rgba(0,0,0,.22); --ds-overlay-3xl: rgba(0,0,0,.50); /* ── 1.8 Sombra — cinco degraus, um por ALTURA DE VOO. Um token único obriga o cartão a usar a sombra do modal, e aí tudo flutua igual: a hierarquia que a sombra existe para comunicar deixa de existir. */ --ds-shadow-xs: 0 .125rem .25rem rgba(0,0,0,.25); --ds-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.40); --ds-shadow-md: 0 .25rem 1rem rgba(0,0,0,.40); --ds-shadow-lg: 0 .5rem 2rem rgba(0,0,0,.50); --ds-shadow-xl: 0 0 0 1px hsl(0 0% 100%/.08), 0 12px 24px hsl(0 0% 0%/.24); --ds-modal-shadow: 0 24px 64px -12px rgba(0,0,0,.55); --ds-scrim: rgba(0,0,0,.66); /* ── 1.9 Tooltip — ISENTO de tema por contrato. [v2.2.0] A etiqueta não é superfície do app: ela paira SOBRE a interface, e inverter com o tema faz um balão claro sobre uma tela clara. */ --ds-tooltip-bg: #0D0E10; --ds-tooltip-text: #E6EDF6; } /* ───────────────────────────────────────────────────────────────────── 2. TEMA CLARO Só o que MUDA é redeclarado. A regra da inversão de superfícies não é reescrita — os VALORES é que trocam, e a ordem se inverte sozinha. ───────────────────────────────────────────────────────────────────── */ :root[data-theme="light"]{ color-scheme: light; --ds-rail: #f8f9fa; --ds-bg: #f8f9fa; --ds-surface: #fefdfb; /* branco QUENTE, não #fff: branco puro em área grande cansa em jornada de 8h. O desvio é de três pontos; o olho percebe. */ --ds-raised: #f1f3f5; --ds-raised-2: #e9ecef; --ds-input: #fefdfb; --ds-surface-sticky: #f1f3f5; --ds-canvas: var(--ds-bg); /* no claro o palco NÃO escurece */ --ds-border: #dee2e6; --ds-border-hover: #ced4da; --ds-border-strong: #878d93; /* 2.1.0 — era #adb5bd (1,87:1) */ --ds-text: #212529; --ds-text-2: #495057; --ds-text-3: #677078; /* 2.1.0 — era #6c757d (4,22:1) */ --ds-accent-soft: #FBF2E6; --ds-accent-medium: #F9ECDA; /* derivado, não uma segunda cor cadastrada: o whitelabel troca UM token e este acompanha. */ --ds-accent-text: color-mix(in srgb, var(--ds-accent) 60%, black); --ds-online: #1da151; /* 2.1.0 — era #1ea855 (2,94:1) */ --ds-success: #16a34a; --ds-danger: #dc2626; --ds-warning: #d97706; --ds-info: #2563eb; --ds-success-text: #166534; --ds-danger-text: #b91c1c; --ds-warning-text: #92400e; --ds-info-text: #175893; --ds-on-online: #2A1D08; --ds-on-success: #2A1D08; /* INVERTE em relação ao escuro */ --ds-on-danger: #ffffff; --ds-on-warning: #2A1D08; --ds-on-info: #ffffff; /* INVERTE em relação ao escuro */ --ds-purple: #9333ea; --ds-cyan: #1194B5; /* 2.3.0 - era #0891b2: nenhuma tinta em AA */ --ds-teal: #17988C; /* 2.3.0 - era #0d9488: idem */ --ds-rose: #e11d48; --ds-emerald: #139B6D; /* 2.3.0 - era #059669: idem */ --ds-gold: #9F6100; /* 2.3.0 - o dourado do escuro sobre branco da 1,9:1 e some */ --ds-on-purple: #ffffff; /* INVERTE em relacao ao escuro */ --ds-on-cyan: #2A1D08; --ds-on-teal: #2A1D08; --ds-on-rose: #ffffff; /* INVERTE em relacao ao escuro */ --ds-on-emerald: #2A1D08; --ds-on-gold: #ffffff; /* INVERTE em relacao ao escuro */ /* No claro a base da mistura é BRANCO: misturar com `transparent` sobre fundo já claro devolve uma cor lavada, sem contorno. */ --ds-accent-tint: color-mix(in srgb, var(--ds-accent) 8%, var(--ds-surface)); --ds-success-tint: color-mix(in srgb, var(--ds-success) 8%, var(--ds-surface)); --ds-danger-tint: color-mix(in srgb, var(--ds-danger) 8%, var(--ds-surface)); --ds-warning-tint: color-mix(in srgb, var(--ds-warning) 8%, var(--ds-surface)); --ds-info-tint: color-mix(in srgb, var(--ds-info) 8%, var(--ds-surface)); --ds-hover: color-mix(in srgb, var(--ds-text) 4%, var(--ds-surface)); --ds-overlay-xs: rgba(0,0,0,.02); --ds-overlay-sm: rgba(0,0,0,.04); --ds-overlay-md: rgba(0,0,0,.06); --ds-overlay-lg: rgba(0,0,0,.10); --ds-overlay-xl: rgba(0,0,0,.14); --ds-overlay-2xl: rgba(0,0,0,.20); --ds-overlay-3xl: rgba(0,0,0,.45); --ds-shadow-xs: 0 1px 2px rgba(0,0,0,.06); --ds-shadow-sm: 0 2px 6px rgba(0,0,0,.08); --ds-shadow-md: 0 4px 12px rgba(0,0,0,.10); --ds-shadow-lg: 0 8px 24px rgba(0,0,0,.12); --ds-shadow-xl: 0 16px 48px rgba(0,0,0,.14); --ds-modal-shadow: 0 24px 64px -12px rgba(0,0,0,.18); --ds-scrim: rgba(15,15,25,.45); /* --ds-tooltip-* NÃO é redeclarado aqui: ver §1.9. */ } /* O terceiro estado: nenhum data-theme escrito. Um produto que respeite a preferência do sistema herda o claro sem decidir no boot — e a marca `[data-theme="dark"]` continua vencendo em qualquer direção. */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ color-scheme: light; --ds-rail:#f8f9fa; --ds-bg:#f8f9fa; --ds-surface:#fefdfb; --ds-raised:#f1f3f5; --ds-raised-2:#e9ecef; --ds-input:#fefdfb; --ds-canvas:var(--ds-bg); --ds-border:#dee2e6; --ds-border-hover:#ced4da; --ds-border-strong:#878d93; --ds-text:#212529; --ds-text-2:#495057; --ds-text-3:#677078; --ds-accent-soft:#FBF2E6; --ds-accent-medium:#F9ECDA; --ds-accent-text:color-mix(in srgb, var(--ds-accent) 60%, black); --ds-online:#1da151; --ds-success:#16a34a; --ds-danger:#dc2626; --ds-warning:#d97706; --ds-info:#2563eb; --ds-success-text:#166534; --ds-danger-text:#b91c1c; --ds-warning-text:#92400e; --ds-info-text:#175893; --ds-on-success:#2A1D08; --ds-on-danger:#ffffff; --ds-on-info:#ffffff; /* Os TRES que faltavam, achados em 2026-08-23 pelo teste-espelho do hsna-obolo ao migrar os tokens para o hsna-core. Eles existiam no bloco do tema claro ESCOLHIDO e nao aqui — entao quem tem o sistema em claro e nunca tocou no interruptor recebia o valor do tema ESCURO nestes tres. E o defeito que duas listas paralelas produzem. */ --ds-on-warning:#2A1D08; --ds-on-online:#2A1D08; --ds-hover: color-mix(in srgb, var(--ds-text) 4%, var(--ds-surface)); --ds-purple:#9333ea; --ds-cyan:#1194B5; --ds-teal:#17988C; --ds-rose:#e11d48; --ds-emerald:#139B6D; --ds-gold:#9F6100; --ds-on-purple:#ffffff; --ds-on-cyan:#2A1D08; --ds-on-teal:#2A1D08; --ds-on-rose:#ffffff; --ds-on-emerald:#2A1D08; --ds-on-gold:#ffffff; --ds-surface-sticky:#f1f3f5; --ds-overlay-xs:rgba(0,0,0,.02); --ds-overlay-sm:rgba(0,0,0,.04); --ds-overlay-md:rgba(0,0,0,.06); --ds-overlay-lg:rgba(0,0,0,.10); --ds-overlay-xl:rgba(0,0,0,.14); --ds-overlay-2xl:rgba(0,0,0,.20); --ds-overlay-3xl:rgba(0,0,0,.45); --ds-accent-tint: color-mix(in srgb, var(--ds-accent) 8%, var(--ds-surface)); --ds-success-tint:color-mix(in srgb, var(--ds-success) 8%, var(--ds-surface)); --ds-danger-tint: color-mix(in srgb, var(--ds-danger) 8%, var(--ds-surface)); --ds-warning-tint:color-mix(in srgb, var(--ds-warning) 8%, var(--ds-surface)); --ds-info-tint: color-mix(in srgb, var(--ds-info) 8%, var(--ds-surface)); --ds-shadow-xs:0 1px 2px rgba(0,0,0,.06); --ds-shadow-sm:0 2px 6px rgba(0,0,0,.08); --ds-shadow-md:0 4px 12px rgba(0,0,0,.10); --ds-shadow-lg:0 8px 24px rgba(0,0,0,.12); --ds-shadow-xl:0 16px 48px rgba(0,0,0,.14); --ds-modal-shadow:0 24px 64px -12px rgba(0,0,0,.18); --ds-scrim:rgba(15,15,25,.45); } } /* ───────────────────────────────────────────────────────────────────── 3. O QUE NÃO MUDA COM O TEMA Forma, tipografia, camadas e grade são iguais nos dois temas. Ficam num :root separado para que ninguém precise duplicá-los ao mexer em cor. ───────────────────────────────────────────────────────────────────── */ :root{ /* ── 3.1 Raio — quatro degraus, UM POR CLASSE DE OBJETO. O raio comunica tamanho: 18px num campo de 34px faz o campo virar pílula e some com o canto que diz onde a área clicável termina. */ --ds-radius-sm: 6px; /* campo, badge, chip pequeno */ --ds-radius-md: 10px; /* botão, botão-ícone, menu */ --ds-radius-lg: 14px; /* cartão, container */ --ds-radius-xl: 18px; /* painel */ --ds-modal-radius: 16px; --ds-modal-blur: blur(8px) saturate(140%); /* o saturate acompanha o blur porque desfoque puro deslava a cor do que está atrás */ /* ── 3.2 Foco — anel DUAL-TONE (B-4.48). Anel de cor única é proibido. Quem cumpre a norma é o FIO na cor do texto, não a camada accent: um anel só de accent desaparece quando o accent do cliente se aproxima da superfície, e o whitelabel garante que um dia isso acontece. Um gate que cobrar 3:1 das DUAS camadas reprova um anel conforme. */ --ds-focus-ring: 0 0 0 2px var(--ds-accent), 0 0 0 3px var(--ds-text); /* ── 3.3 Tipografia — pilha do SISTEMA, nunca webfont. Uma webfont custa um request bloqueante e um FOUT na primeira tela — e a primeira tela é a de entrada, a única que todo usuário vê sempre. */ --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ds-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* A escala — NOVE degraus desde a 2.4.0, e os tres do meio nao sao invencao: sao o que os produtos ja escreviam. Ate a 2.3.0 a norma declarava seis e pulava de 14 direto para 10,5. Medido em 2026-08-31: na implementacao de referencia, 846 de 1.323 declaracoes de tamanho (64%) caem entre 11 e 13,5px — contra 93 no corpo de 14. O buraco nao era do produto; era da escala, que descrevia uma tela mais folgada do que a que o ecossistema constroi. REGRA que sobrevive: o corpo de LEITURA continua 14. Os tres degraus densos sao para superficie densa — grade, painel lateral, metadado — e nao para o texto que a pessoa le por minutos. */ --ds-fs-display: 22px; /* 700 · lh 1.25 · ls .01em */ --ds-fs-headline: 18px; /* 700 · lh 1.30 · ls .01em */ --ds-fs-title: 15px; /* 600 · lh 1.40 · ls .01em */ --ds-fs-body: 14px; /* 400 · lh 1.50 — o corpo de LEITURA */ --ds-fs-body-sm: 13px; /* 400 · lh 1.45 — corpo em superficie densa [2.4.0] */ --ds-fs-caption: 12px; /* 400 · lh 1.40 — metadado, legenda, apoio [2.4.0] */ --ds-fs-micro: 11px; /* 600 · lh 1.35 — contador, carimbo, badge. Peso maior compensa o tamanho: 11px em 400 sobre superficie escura desaparece [2.4.0] */ --ds-fs-label: 10.5px; /* 700 · lh 1.40 · ls .04em · CAIXA ALTA */ --ds-fs-mono: 12px; /* 400 · lh 1.50 — mesmo TAMANHO do caption e papel diferente: um e' fonte, o outro e' hierarquia. Nao se substituem. */ --ds-ls-label: .04em; /* os quatro atributos do rótulo andam JUNTOS: o peso compensa o tamanho, o espaçamento compensa a caixa alta, e a cor o separa do conteúdo */ /* ── 3.4 Rolagem. B-4.50: os dois caminhos NÃO convivem. Um valor não-inicial de `scrollbar-width` ou `scrollbar-color` faz o Chromium ignorar todo `::-webkit-scrollbar*` naquele elemento — e `*` casa com html e body, então uma linha em `*` desliga o app inteiro. O sintoma é a barra do sistema voltando em tudo, ou os tamanhos abaixo simplesmente não chegando à tela. Medido em §5. */ --ds-scrollbar-size: 6px; --ds-scrollbar-size-lg: 10px; /* modal e diálogo */ --ds-scrollbar-radius: 3px; --ds-scrollbar-track: transparent; --ds-scrollbar-thumb: var(--ds-border); --ds-scrollbar-thumb-hover: var(--ds-text-3); /* ── 3.5 A GRADE — dimensões do cromo. B-4.8: são valores ÚNICOS declarados como token. Não são faixas, não são "aproximadamente", e não são decisão de módulo. Uma norma que diz "o rail tem ~76–82px" produz, com total obediência, três apps com três rails — e nenhum errado. Um número é a decisão; uma faixa é o adiamento dela. */ --ds-z0-h: 72px; /* Zona 0 — header (opcional) */ --ds-z1-w: 56px; /* Zona 1 — rail só-ícone */ --ds-z1-w-labeled: 80px; /* Zona 1 — variante rotulada (opt-in) */ --ds-z2-w: 340px; /* Zona 2 — lista ancorada */ --ds-z2-w-compact: 56px; /* Zona 2 — solta */ --ds-z4-w: 400px; /* Zona 4 — painel contextual */ --ds-z4-nav-w: 108px; /* Zona 4 — nav interna de seções [v2.2.0] */ --ds-z5-h: 28px; /* Zona 5 — rodapé de status [v2.2.0] */ --ds-dock-h: 56px; /* faixa de atividade (opcional) */ --ds-banner-h: 40px; /* faixa de condicao de sessao [2.3.0] */ --ds-head-h: 54px; /* cabeçalho de módulo, dentro da Zona 3 */ --ds-content-max:1600px; /* teto de LAYOUT */ --ds-reading-max:1180px; /* teto de MEDIDA — prosa continua ilegível em 1600px */ /* ── 3.6 Reserva de marca — a ÁREA, não a arte. [v2.2.0] O mock não veste marca nenhuma; ele RESERVA o espaço com estas medidas, para que a arte real entre sem mover um pixel do layout. */ --ds-mark-sm: 34px; /* glifo no cromo interno */ --ds-mark-lg: 56px; /* glifo na tela de entrada */ --ds-wordmark-h: 26px; /* altura do lettering */ --ds-wordmark-w: 152px; /* largura resultante na proporção 5,86:1 */ /* Selo de certificação (DS-24). Quatro deles cabem lado a lado na Zona 4 — 4×48 + 3×10 = 222 na faixa útil de ~236 —, e caber numa linha é o que preserva a ORDEM FIXA legível de relance: quebrada em 3+1 ela vira um agrupamento que ninguém pediu. */ --ds-seal: 48px; --ds-seal-gap: 10px; /* -- 3.7 Paleta de identidade - dez cores para DISTINGUIR pessoas. [2.3.0] Nao muda com o tema, de proposito: a cor de uma pessoa e o atalho que o olho usa para acha-la numa lista, e troca-la junto com o tema destroi o atalho. A tinta vem PAREADA porque a paleta nao e uniforme em luminancia - nove pedem tinta escura e duas pedem branca. Escolher uma tinta so reprova metade da paleta, e foi o que a implementacao de referencia fazia: branco em todas, nove abaixo de 4,5:1. EM ABERTO: o 1 e praticamente o accent padrao. Num cliente de marca laranja, a inicial de uma pessoa fica com a cor do botao primario. */ --ds-avatar-1: #FF7A00; --ds-on-avatar-1: #2A1D08; --ds-avatar-2: #5a9cf5; --ds-on-avatar-2: #2A1D08; --ds-avatar-3: #2ab55c; --ds-on-avatar-3: #2A1D08; --ds-avatar-4: #e8a020; --ds-on-avatar-4: #2A1D08; --ds-avatar-5: #A06DEC; --ds-on-avatar-5: #2A1D08; --ds-avatar-6: #EE4E65; --ds-on-avatar-6: #2A1D08; --ds-avatar-7: #28b0a0; --ds-on-avatar-7: #2A1D08; --ds-avatar-8: #EB5352; --ds-on-avatar-8: #2A1D08; --ds-avatar-9: #4a8ad4; --ds-on-avatar-9: #2A1D08; --ds-avatar-10: #7c4dba; --ds-on-avatar-10: #ffffff; --ds-avatar-fallback: #6c757d; --ds-on-avatar-fallback: #ffffff; /* ── 3.8 Camadas — z-index é uma ESCALA, não um número por componente. B-4.41: todo z-index vem de um token daqui. Sem a escala, cada componente escolhe olhando os vizinhos que conhece, e nasce o `z-index: 9999` de quem precisa ficar acima de tudo e NÃO SABE O QUE É TUDO — depois dele, o próximo precisa de 10000. B-4.41-a: a ordem NÃO é "quanto bloqueia". · toast ACIMA do modal — um save que falha dentro de um modal renderiza o erro atrás do overlay, o usuário não vê nada, conclui que o clique não pegou e salva de novo; · popover ACIMA do modal — um