/* * Erisen Studio — Design Tokens * ============================================================ * v1.9 fatia 5 criou este arquivo (sistema de tokens). * v2.0 (15/09/2026, fatia A2) trocou os VALORES para a linguagem visual * dos 10 mockups do Apps Framework. O sistema não mudou: os mesmos nomes * de token continuam valendo, e studio.css continua remapeando as * variáveis antigas (--bg/--surface/--panel/--fg/--brand/--accent...) * para cá. Trocar valor, não destruir sistema — foi a instrução. * * ┌─ Por que o accent mudou de branco para lima ───────────────────────┐ * │ A versão anterior deste arquivo dizia, textualmente: │ * │ "Os mockups v2.0 usam amarelo como accent — é a direção visual │ * │ dos 10 Apps futuros, documentada mas NÃO aplicada aqui: trocar │ * │ o accent do hub inteiro é decisão de produto." │ * │ Essa decisão foi tomada pelo dono em 15/09/2026, olhando o Hub │ * │ implantado ao lado do mockup: "o visual nao entrou no modelo do │ * │ v2.0". Onde v1.9 e v2.0 discordam no visual, v2.0 manda. O accent │ * │ branco do v1.9 §8.2 fica REGISTRADO aqui e deixa de valer. │ * └────────────────────────────────────────────────────────────────────┘ * * ┌─ De onde vem cada número (medido, não estimado) ───────────────────┐ * │ Cada cor abaixo foi AMOSTRADA pixel a pixel de │ * │ `01_long_to_short.png` (1600x900) com canvas/Chromium, │ * │ não escolhida a olho. Coordenada de origem anotada em cada linha. │ * │ As 10 imagens usam a MESMA paleta — conferido nas 10. │ * │ │ * │ Uma correção que a amostragem pegou e o olho não: o botão │ * │ "Conversar com Argos" NÃO é lima sólido. É contorno lima 1px sobre │ * │ fundo oliva escuro (#171c12) com texto lima. O lima sólido está │ * │ nos CTAs de ação da tela ("Analisar conteúdo", "Gerar storyboard", │ * │ "Renderizar · R$ 2,90"), no círculo do passo ativo do stepper e no │ * │ selo do Argos. Ver --accent-outline-*. │ * └────────────────────────────────────────────────────────────────────┘ * * Fontes: a arquitetura de front v1.9 (§8-§12, o sistema), * o framework de Apps v2.0 + os 10 PNGs (os valores), * o documento interno de tokens (histórico da fatia v1.9). */ :root { /* ============ COR — superfícies (valores medidos no mockup v2.0) ============ O v2.0 é mais frio e mais azulado do que o cinza neutro do v1.9: todas as superfícies têm um viés de azul, e o contraste entre card e linha interna é menor (13→17) do que era antes. Isso é o que faz a tela parecer "um painel só" em vez de "caixas empilhadas". */ --bg-base: #090b0e; /* área de conteúdo — (900,880) */ --bg-shell: #0c1015; /* barra do topo — (800,60) */ --bg-sidebar: #0a0d12; /* coluna da navegação — (100,700) */ --surface-1: #131820; /* card / pílula do topo — (700,700) */ --surface-2: #171d26; /* linha interna, chip inativo, citação do Argos — (1417,396) */ --surface-3: #20262e; /* hover e campo de busca — (470,32) */ --border-soft: #29313d; /* borda de card e de chip — (210,253) e (300,535) */ --border-strong: #3a4454; /* ============ COR — texto ============ */ --text-primary: #f2f4f7; /* título e valor do Teto — (1160,788) */ --text-secondary: #9aa4b2; /* rótulo de passo inativo, subtítulo — (643,165) */ /* DESVIO CONSCIENTE DO MOCKUP — o único da paleta, e a razão está aqui. O valor amostrado do PNG é #6b6f75. Ele dá 3,52:1 sobre --surface-1 e reprova em WCAG AA para texto pequeno (o mínimo é 4,5:1). Não é preciosismo: este token pinta "Teto", "Estimativa" e o aviso de custo — justamente os números que protegem o bolso de quem usa. Preço apagado é defeito de produto, não estilo. (O terceiro rótulo que ele pintava em 15/09 saiu da tela em 16/09, na auditoria UX §2.1: o cartão de App não anuncia mais teto por rodada, anuncia estimativa. Ver `apps.js`.) Um PNG não mede contraste; é imagem, não teste. Mantive a matiz e subi só a claridade: #848992 dá 5,07:1 sobre --surface-1 e 4,82:1 sobre --surface-2 (o pior caso), passando AA nos dois. A diferença a olho é de uma sombra; a diferença para quem enxerga mal é ler ou não ler. */ --text-muted: #848992; /* era #6b6f75 no PNG — (100,853); ver nota acima */ /* ============ COR — feedback semântico (§12) ============ Já existia em espírito no admin.css (.state-pill.ok/.warn/.bad com verde/âmbar/vermelho "soltos"); os valores abaixo são os sugeridos pelo v1.9 §8.2 e ficam muito próximos dos que já estavam em uso — não é uma mudança de linguagem, é a mesma linguagem virando token para as próximas fatias reaproveitarem. */ --success: #54d38a; /* score 9.2 e "Aprovado ✓" — (1168,323) */ --success-soft: rgba(84, 211, 138, 0.14); --warning: #e0b94f; --warning-soft: rgba(224, 185, 79, 0.16); --danger: #e16060; --danger-soft: rgba(225, 96, 96, 0.16); /* ============ COR — accent único (AZUL ELÉTRICO ERISEN) ============ ┌─ 15/09/2026, noite: o accent deixou de ser AMARELO e passou a AZUL ────┐ │ DECISÃO DO DONO, verbatim, quando perguntado se HUB e STUDIO eram o │ │ mesmo produto: │ │ "sim sao o mesmo produto, seguir pro Azul, pois é um produto da │ │ Erisen" │ │ │ │ A consequência é maior do que a cor. O `ERISEN_UI_UX_Master_v1.0` │ │ (15/09/2026, 18:17) se autolimitava às "novas telas" porque parecia │ │ ser de OUTRO produto. Com "são o mesmo produto", ele passa a valer │ │ como especificação deste produto inteiro — e é o documento visual mais │ │ recente, então manda. │ │ │ │ VALORES — todos medidos nas 6 imagens do Master (1672x941), duas vezes:│ │ uma pelo agente da medição e outra, independente, na aplicação. │ │ │ │ --accent-primary #3842fd. Média das modas dos 6 CTAs sólidos: │ │ #4448fd (image1 "Explorar apps") · #3341fb (image2 "Enviar para AI │ │ Film Director") · #333bfd (image3 "Gerar mockups") · #313cfd (image3 │ │ "Guiado" ativo) · #313dfc (image5 "Processar") · #414cfd (image6 │ │ "Gerar frame"). Os CTAs do Master são GRADIENTE (varrem de ~#0d16f9 │ │ a ~#4a5cfe), por isso a moda e não um pixel só. │ │ Segunda medição, cega: a moda global dos pixels saturados de cada │ │ imagem cai em #4549fe/#212fa7/#333bfd/#3552fe/#313dfd/#404afd, e │ │ 100% da massa saturada fica entre 210° e 240° de matiz. Amarelo │ │ (55-60°) tem ZERO pixels nas seis. O bucket de 20-30° da image6 é a │ │ FOTOGRAFIA do render em golden hour, não a interface. │ │ │ │ --accent-primary-soft #141b28. Fundo do item ativo da sidebar, moda │ │ de 26 linhas na image1 (y119-153, "Home") e #121b2a em 24 linhas da │ │ image6 — 1/255 de diferença. Navy quase preto; é o equivalente exato │ │ do oliva #202217 que o amarelo usava. │ │ │ │ ┌─ A TINTA: a parte que NÃO é trocar o matiz ─────────────────────────┐│ │ │ No Master o accent é PREENCHIMENTO, nunca tinta. Medido: ││ │ │ · CTA sólido: texto BRANCO sobre o azul. No amarelo era quase ││ │ │ preto (#0a0d12). Trocar só o matiz pintaria preto sobre azul: ││ │ │ 2,1:1, ilegível. ││ │ │ · Item ativo da sidebar: fundo navy + ícone e rótulo BRANCOS ││ │ │ (tinta do ícone: moda #e4eafd, sat. média 0,26 — o azul que ││ │ │ aparece ali é só antialiasing do traço fino sobre o navy; o ││ │ │ rótulo dá sat. média 0,097, branco puro). O item INATIVO é ││ │ │ cinza (#717790). Ou seja: o ativo se distingue pelo FUNDO e pelo ││ │ │ brilho da tinta, não por tinta colorida. ││ │ │ · Não existe no Master um azul claro de TEXTO: varri os 6 arquivos ││ │ │ procurando azul de matiz 200-260° com luminância de texto e só ││ │ │ achei borda de antialiasing dos CTAs e o cinza-azulado ││ │ │ #7989ac/#8296b9, que é o --text-secondary. ││ │ │ ││ │ │ Isso obriga um token novo. O amarelo #fdf547 (L=0,866) servia de ││ │ │ tinta em qualquer superfície escura; o azul #3842fd (L=0,118) NÃO ││ │ │ serve em NENHUMA: contra preto puro o teto é 3,37:1, abaixo dos ││ │ │ 4,5:1 do AA. Por isso --accent-primary-text existe — ver abaixo. ││ │ └─────────────────────────────────────────────────────────────────────┘│ │ │ │ O amarelo #fdf547 fica REGISTRADO como --legacy-accent-v191-yellow e │ │ deixa de valer. A bandeira de URL foi INVERTIDA em vez de removida: │ │ `?accent=erisen-yellow` repinta a tela de amarelo para conferência, │ │ sem redeploy (bloco no fim deste arquivo). O histórico do amarelo │ │ continua abaixo, na íntegra — a cor mudou, a história não. │ └────────────────────────────────────────────────────────────────────────┘ ┌─ LEGADO · 15/09/2026, tarde: o accent deixou de ser LIMA e passou a AMARELO ┐ │ Não é ajuste de gosto. A fonte de verdade trocou. │ │ │ │ Este arquivo foi construído de manhã a partir do mockup mestre — as │ │ 10 telas do Apps Framework. Ali o accent é #e7f541, e isso está certo: │ │ o pixel (285,765) de `01_long_to_short.png` é exatamente #e7f541, │ │ 10.333 pixels contíguos dele. O erro não foi a medição, foi a FONTE. │ │ │ │ A identidade do produto está nas │ │ referências visuais — 3 telas de 13/09/2026 │ │ (Início, Criar com assistência, Spaces), 1672x941, │ │ que são as telas que o dono reclamou duas vezes de não reconhecer. │ │ Nelas o accent NÃO é lima. Medido pela moda dos pixels dentro do │ │ retângulo de cada CTA sólido: │ │ · "Gerar · R$ 5,82" (ref. Criar, bbox 530-850 x 845-893) → #fff94b │ │ · "Executar fluxo" (ref. Spaces, bbox 1175-1320 x 183-212)→ #fef54e│ │ · CTA do hero (ref. Início) → #fef879 (é mais claro: gradiente)│ │ │ │ A diferença com o lima é de MATIZ, não de brilho: #e7f541 tem G > R │ │ (245 > 231, puxa para o verde) e o amarelo medido tem R > G │ │ (255 > 249). É por isso que a tela inteira "não parecia a referência" │ │ mesmo com todas as superfícies certas — o accent é a única cor │ │ saturada da interface, e ela estava no matiz errado. │ │ │ │ SEGUNDA FONTE, independente: o relatório visual de UX │ │ (v1.9.1, que ninguém havia lido) chama a cor de "Accent (ERISEN │ │ yellow)" e dá a faixa #F5E94A–#FDF547, com realce até #FEF979. │ │ O valor adotado abaixo, #fdf547, é o limite superior citado no │ │ relatório E está a no máximo 4/255 em cada canal da moda que eu medi │ │ nas imagens. Duas fontes independentes no mesmo ponto — por isso este │ │ número, e não o meu pixel cru. │ │ │ │ O lima #e7f541 fica REGISTRADO como --legacy-accent-v20-lime e deixa │ │ de valer. o teste de tela dos Apps v2.0 media o lima; foi atualizado │ │ junto, com esta mesma justificativa — não foi o teste que cedeu ao │ │ código, foi a fonte de verdade que mudou de dono. │ └────────────────────────────────────────────────────────────────────────┘ LEGADO, sobre o oliva: --accent-primary-soft era #202217, o fundo do item ativo da sidebar nas TRÊS referências de 13/09: #1f1f18 (Início), #1f2318 (Criar), #222416 (Spaces) — a média dos três. Não era o amarelo com opacidade: era cor própria (oliva quase preto), e por isso continua token em vez de color-mix, que daria outro resultado sobre cada superfície. O valor mais antigo (#252a16) era mais claro e mais verde, pelo mesmo motivo do accent. O navy #141b28 de hoje ocupa exatamente esse papel. */ --accent-primary: #3842fd; /* Tinta sobre o accent sólido: BRANCA, medida nos 6 CTAs do Master. 6,24:1 — o inverso do amarelo, que pedia tinta quase preta. */ --accent-primary-ink: #ffffff; /* Hover. Não é mensurável num PNG estático (mockup não tem estado): é o topo do gradiente dos CTAs do Master (~#4a5cfe), um passo além. Mantém 4,55:1 com a tinta branca — o clareamento do hover ANDA CONTRA o contraste quando a tinta é clara, então este é o limite: não clarear mais que isto. */ --accent-primary-hover: #5a62fe; --accent-primary-soft: #141b28; --accent-primary-line: rgba(56, 66, 253, 0.52); /* ┌─ --accent-primary-text: por que o accent tem DUAS cores ───────────────┐ │ Este token não existia no amarelo e não é preferência: é a única saída │ │ aritmética. O accent pinta ~27 pedaços de TEXTO no produto (rótulo de │ │ chip ativo, link, número de crédito, selo do Argos...). Com o amarelo │ │ (L=0,866) isso dava 14-17:1 em qualquer superfície. Com o azul │ │ (L=0,118) daria 2,8-3,2:1 — reprovado em todas, e sem conserto: contra │ │ PRETO PURO o #3842fd só alcança 3,37:1, abaixo dos 4,5:1 exigidos. │ │ │ │ #7b86ff é o mesmo azul com a claridade subida até passar: mesmo matiz │ │ (235° contra 237° do accent), mesma família, 4,86:1 na PIOR superfície │ │ do produto (--surface-3 #20262e) e 5,50:1 sobre o navy do item ativo. │ │ É o mesmo procedimento que --text-muted já sofreu hoje (#6b6f75 → │ │ #848992): manter o matiz, subir só a claridade até o mínimo do AA. │ │ │ │ Onde usar cada um: --accent-primary PREENCHE (fundo de CTA, fundo de │ │ estado ativo, borda, barra); --accent-primary-text é TINTA. Nunca │ │ pintar texto com --accent-primary. │ └────────────────────────────────────────────────────────────────────────┘ */ --accent-primary-text: #7b86ff; --legacy-accent-v191-yellow: #fdf547; --legacy-accent-v20-lime: #e7f541; /* Botão de contorno do accent (o "Conversar com Argos" do topo). Histórico: o mockup mestre dava fundo oliva visível (#171c12); nas referências de 13/09 esse fundo não existia — a moda dos pixels DENTRO do botão era #080c0e, ou seja, contorno sobre quase-preto sem preenchimento próprio perceptível. O azul mantém a mesma ideia com o viés frio das superfícies do Master: #080c12. O hover NÃO é mensurável num PNG estático; é derivado — um passo frio a partir da base, o mínimo para o botão responder ao ponteiro. A BORDA continua sendo --accent-primary (3,14:1 sobre #080c12, acima dos 3:1 que o WCAG 1.4.11 pede para componente); só a TINTA do rótulo migra para --accent-primary-text. */ --accent-outline-bg: #080c12; --accent-outline-bg-hover: #121a2c; /* Estados de IA. No v1.9 isto era roxo (#5e6ad2) "reservado a estados de IA". No v2.0 o Argos passou a usar o mesmo accent do resto — o selo do painel "Argos — Assistente deste App" é o MESMO tom do CTA. Manter dois accents concorrentes contradiria a regra de "um único token de accent" que o próprio v1.9 criou, então --accent-ai aponta para o accent. O roxo fica registrado abaixo como --legacy-accent-ai: nenhum arquivo o usa; está aqui para quem precisar auditar de onde veio a cor antiga. Curiosidade que o azul reabre: o --legacy-accent-ai #5e6ad2 é da MESMA família do accent novo (matiz 234°). O roxo "de IA" do v1.9 e o azul do Master concordam; quem discordava era o amarelo. */ --accent-ai: var(--accent-primary); --accent-ai-hover: var(--accent-primary-hover); --accent-ai-soft: var(--accent-primary-soft); --accent-ai-text: var(--accent-primary-text); --accent-ai-glow: 0 0 0 1px var(--accent-primary-line), 0 0 24px rgba(56, 66, 253, 0.22); --legacy-accent-ai: #5e6ad2; /* ============ COR — categoria de destino (referências de 13/09) ============ "Ícones desenhados e coloridos por categoria (azul/roxo/verde) · hoje monocromáticos" é uma das queixas nominais do dono. ┌─ ONDE a cor entra, e onde NÃO entra ───────────────────────────────────┐ │ Medi a saturação de cada ícone da SIDEBAR da referência de Início │ │ (caixa de 29x23 px em volta de cada glifo, item por item): │ │ Projetos 0,062 · Criar 0,060 · Spaces 0,060 · Biblioteca 0,064 · │ │ Comunidade 0,047 · Academy 0,038 · Ganhos 0,084 · Config 0,059 · │ │ Admin 0,058 — todos BRANCOS. Só o item ativo (Início) dá 0,666, │ │ e o pixel mais claro dele é #ffff66: amarelo. │ │ Ou seja: na sidebar o ícone é monocromático e só o ATIVO é accent. │ │ Colorir a sidebar por categoria deixaria a tela mais colorida que a │ │ referência — seria trocar um erro por outro. │ │ │ │ A cor por categoria está nos ÍCONES DE CARTÃO — as fileiras "Comece │ │ agora" e "Explore mais da Erisen" da Home. Medido o pixel mais │ │ saturado de cada quadrado de ícone (y 436..466): │ │ Criar #fcef49 (é o próprio accent, quadrado PREENCHIDO) │ │ Novo projeto #60b4f4 azul │ │ Entrar Space #9c77e0 roxo │ │ Biblioteca #72f7a8 verde │ │ E o fundo de cada quadrado, pela moda dos cantos, longe do glifo: │ │ azul #182845 · roxo #372454 · verde #1b352b │ └────────────────────────────────────────────────────────────────────────┘ Um accent SÓ continua valendo: o §8.2 fala do accent de AÇÃO, e ação continua sendo só o amarelo. Estas são cores de IDENTIFICAÇÃO de destino — nunca pintam um botão, só o quadrado do ícone. É a distinção que permite as duas regras coexistirem sem accent concorrente. */ --cat-blue: #60b4f4; --cat-blue-soft: #182845; --cat-purple: #9c77e0; --cat-purple-soft: #372454; --cat-green: #72f7a8; --cat-green-soft: #1b352b; /* ============ TIPOGRAFIA (§9/9.1) ============ --font-family-ui troca "Inter" por "Geist, Inter, ..." — como o Geist não está carregado/self-hosted ainda, o navegador cai direto no Inter: ZERO mudança visual hoje, mas já fica pronto para quando o Geist for provisionado (decisão de produto/licença, fora desta fatia). A escala Display/H1/H2/H3 abaixo é a do documento; ela NÃO foi aplicada aos h1/h2/h3 atuais nesta rodada (ver docs) para não arriscar reflow em telas que o App Shell (fatia pesada, outro agente) vai redesenhar de qualquer forma. Body 14/21/400 já batia exatamente com o que studio.css já usava no . ┌─ 16/09/2026 · A ESCALA PASSOU A SER APLICADA (auditoria UX §1.1) ──────┐ │ O parágrafo acima descreve a fatia de 15/09, quando a escala foi só │ │ DECLARADA. A auditoria de UX de 16/09 pede "corrigir escala e │ │ hierarquia" e propõe uma tabela nova. MEDI antes de obedecer, e a │ │ tabela dela quase não muda nada aqui: │ │ H1 28–32 → temos 30 ✅ · H2 20–24 → temos 24 ✅ · body ≥14 com │ │ entrelinha 1,45–1,55 → temos 14/21 = 1,50 ✅ · metadata 12–13 → │ │ temos 12 ✅ · "evitar abaixo de 12px" → --text-caption-size era 11 🔴│ │ │ │ Ou seja: o defeito NÃO era a escala, era que os componentes a │ │ ignoravam. Medido no dia, contando `font-size` E o atalho `font:` e │ │ ignorando comentário: 456 declarações de tamanho, das quais 51 usavam │ │ `var(--text-*)` e 405 cravavam pixel — 106 em 12px, 74 em 13px, 73 em │ │ 11px, 32 em 10px, mais 7 em 11,5px, 7 em 9/9,5px e 1 em 10,5px. Ao │ │ todo 120 abaixo do piso de 12px. Trocar os NÚMEROS da tabela não teria │ │ consertado uma única tela. │ │ │ │ O que foi feito: 362 declarações passaram a apontar para um token │ │ (413 por token agora, contra 51), 119 SUBIRAM para o piso de 12px e │ │ sobrou 1 abaixo dele — o "STUDIO" do logotipo, que é marca desenhada. │ │ O token é escolhido pela FUNÇÃO do texto. A régua, para quem vier: │ │ · o token é escolhido pela função (título de card → h3; corpo → │ │ body; rótulo/metadata → label), e o tamanho medido só desempata; │ │ · texto de LEITURA, rótulo e metadata nunca DESCEM de tamanho — quem │ │ estava abaixo de 12px subiu para 12; │ │ · TÍTULO pode descer, e desce de propósito, para caber na faixa da │ │ auditoria (24 desceram: h1 36→30, títulos de card 20→18, 17→16); │ │ · `h1`/`h2`/`h3` SEM classe são o padrão do documento e recebem o │ │ degrau do próprio nível (30/24/18) — é ali que a hierarquia mora; │ │ uma regra com escopo (`.chat-header h2`) recebe o degrau mais │ │ próximo do tamanho dela, porque painel comprimido pode fixar um │ │ título num nível abaixo de propósito. │ │ · font-size que dimensiona GLIFO, não texto, fica em px e não é │ │ tipografia: o logotipo (.wordmark, .mcp-brand), o ícone de conector │ │ (.provider-symbol) e o selo redondo do Argos (.app-argos-seal). │ │ São 5 declarações aqui, anotadas como exceção no lugar delas. │ │ · e há DUAS folhas fora do sistema, por motivo MECÂNICO e não estético:│ │ `studio/mcp.css` (21) e o bloco legado de `index.html` (16). As duas │ │ vestem páginas servidas SEM studio.css — e studio.css é quem importa │ │ este arquivo. `var()` ali resolveria para nada e o texto herdaria o │ │ tamanho do pai. A razão está escrita dentro das duas. Total que fica │ │ em pixel de propósito: 42, e nenhuma delas é tela do Studio. │ │ │ │ ⚠️ Interação com a COR, medida e não estimada: --text-muted subiu de │ │ #6b6f75 para #848992 hoje para passar AA. Subir tamanho NÃO piora │ │ contraste (a cor não mudou) e ainda ajuda no limite de "texto grande" │ │ do WCAG. o teste de contraste do accent continua sendo o juiz: │ │ ele calcula o mínimo (3:1 ou 4,5:1) a partir do px COMPUTADO, e │ │ nenhuma declaração cruzou 24px para baixo nesta rodada. │ └────────────────────────────────────────────────────────────────────────┘ */ --font-family-ui: Geist, Inter, "Segoe UI", system-ui, sans-serif; --font-family-mono: ui-monospace, "SFMono-Regular", Consolas, monospace; --text-display-size: 36px; --text-display-line: 42px; --text-display-weight: 600; --text-h1-size: 30px; --text-h1-line: 36px; --text-h1-weight: 600; --text-h2-size: 24px; --text-h2-line: 30px; --text-h2-weight: 600; --text-h3-size: 18px; --text-h3-line: 24px; --text-h3-weight: 600; /* O DEGRAU NOVO, e é o único número que esta rodada acrescentou à tabela. A escala tinha um vão entre body 14 e h3 18, e a auditoria §1.1 pede duas coisas que caem exatamente nele: "Título de card: 15–17px, semibold" e "Body mobile: 15px quando for leitura". Medido: 18 declarações viviam em 15, 16 e 17px sem token nenhum (título de card dos Apps, texto do palco, cabeçalho de painel, parágrafo de seção da Home). Sem este degrau elas teriam de escolher entre encolher para 14 ou inflar para 18 — as duas erradas. O peso fica 400 porque só o TAMANHO é compartilhado: título de card pede 600 e o põe na própria regra (é o que `strong` já fazia). */ --text-body-lg-size: 16px; --text-body-lg-line: 24px; --text-body-lg-weight: 400; --text-body-size: 14px; --text-body-line: 21px; --text-body-weight: 400; --text-body-sm-size: 13px; --text-body-sm-line: 19px; --text-body-sm-weight: 400; --text-label-size: 12px; --text-label-line: 16px; --text-label-weight: 500; /* ┌─ --text-caption-* FOI ELIMINADO em 16/09/2026 — e por que não virou 12px ┐ │ Existia como 11px/15px/400 e tinha 12 consumidores em studio.css. A │ │ auditoria §1.1 põe o piso em 12px ("evitar abaixo de 12px"), então ele │ │ só tinha dois futuros: subir para 12 ou sair. │ │ │ │ Subir para 12 o tornaria IDÊNTICO a --text-label-size — dois nomes para │ │ o mesmo valor, e é assim que uma escala volta a ser ignorada: quem │ │ escreve regra nova escolhe pelo nome que soa bem, os dois divergem na │ │ próxima mexida e a hierarquia racha sem ninguém decidir nada. │ │ │ │ Conferi os 12 consumidores um a um antes de apagar: `.recent-card │ │ small`, `.kill-banner-badge`, `.kill-state`, `.kill-card-head code`, │ │ `.kill-col h4`, `.appsec-row-head div`, `.appsec-state`, │ │ `.appsec-facts dt`, `.appsec-subhead`, `.appsec-code`, │ │ `.runs-item-name small`, `.runs-item-expiry`. TODOS são rótulo, estado │ │ ou metadata — a função do `label`. Nenhum era legenda de mídia, que │ │ seria o único uso em que eu defenderia 11px. Os 12 apontam para │ │ --text-label-size e subiram 11→12px. │ │ │ │ Se um dia aparecer legenda de verdade (crédito sob imagem, nota de │ │ rodapé de tabela densa), o degrau para ela é `label` em --text-muted, │ │ não um 11px novo: 11px reprova o piso da auditoria e, com cor apagada, │ │ falha duas vezes — tamanho e contraste. │ └─────────────────────────────────────────────────────────────────────────┘ */ /* ============ RADIUS (§10) ============ "Cards principais 14-16px, Inputs 10-12px, evitar cada componente ter radius diferente." Escala aplicada em studio.css substituindo os valores soltos 4px/8px/16px que já existiam (mesma intenção, agora nomeada e consistente). */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 9999px; /* ============ ESPAÇAMENTO — escala de 4px ============ Documentada para as próximas fatias (App Shell etc.) consumirem; aplicada nesta rodada só em pontos aditivos (não reescreve gaps existentes tela a tela, ver docs). */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ============ SOMBRA ============ Base do produto é "sem sombra" (comentário original em studio.css: "superfícies neutras, sem sombra"). Mantido como filosofia — estes tokens existem para os poucos casos de elevação real (dialog, toast, glow de IA), não para uso geral em cards. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.44); /* ============ DENSIDADE / CONTROLES (§11) ============ "Primary: altura 42-44px". input/select/textarea já usavam 44px; button usava 40px (inconsistente) — unificado em control-height-md. */ --control-height-sm: 36px; --control-height-md: 44px; --control-height-lg: 52px; /* ============ MOTION ============ */ --transition-fast: 120ms ease; --transition-base: 180ms ease; } /* * ════════════════════════════════════════════════════════════════════════════ * O MESMO SISTEMA, NO ESTREITO (auditoria UX §1.1 · 16/09/2026) * ════════════════════════════════════════════════════════════════════════════ * A auditoria pede "H1 mobile: 25–28px" — um número diferente do desktop para * o MESMO papel. Isso é degrau de escala, não exceção de tela, então mora aqui * e não em 15 media queries. * * Antes desta rodada o encolhimento do título era feito à mão, e o resultado * media a bagunça: `.page-heading h1` valia 28px no desktop, 32px dentro de * `@media (max-width:1200px)` (regra MORTA — a de 28px vem depois no arquivo e * ganha por ordem) e 28px de novo em dois blocos de 760px; `.app-title` valia * 34 e 26. Cinco declarações para dizer "título grande, um pouco menor no * celular". Agora são duas, aqui. * * Por que 760px e não 640: é onde o shell do produto já vira coluna única (13 * media queries de studio.css usam esse ponto). Escolher um breakpoint novo * criaria uma faixa em que o layout é de celular e a tipografia é de desktop. * * O que NÃO subiu de propósito: a auditoria também sugere "body mobile 15px * quando for leitura". Não apliquei — `--text-body-size` pinta rótulo, botão, * campo e parágrafo no mesmo token, então subir o body no estreito mexeria em * tudo que é clicável junto com o texto de leitura, e "quando for leitura" é * uma distinção que o código ainda não tem como fazer. Fica registrado como * pendência de quem separar "texto de leitura" de "texto de interface". */ @media (max-width: 760px) { :root { --text-display-size: 30px; --text-display-line: 36px; --text-h1-size: 26px; --text-h1-line: 32px; } } /* * Utilitários novos, aditivos. Nenhuma regra existente foi removida ou * renomeada — estas classes não são usadas por nenhuma tela ainda, * ficam prontas para a fatia de App Shell (v1.9 fatias 1-2) e para * Apps v2.0 consumirem sem reinventar a paleta. */ .surface-1 { background: var(--surface-1); } .surface-2 { background: var(--surface-2); } .surface-3 { background: var(--surface-3); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .text-secondary { color: var(--text-secondary); } /* * ════════════════════════════════════════════════════════════════════════════ * TEMA OPCIONAL — o AMARELO ERISEN, agora legado (`?accent=erisen-yellow`) * ════════════════════════════════════════════════════════════════════════════ * ESTE BLOCO ESTÁ INERTE. Nada muda sem `data-accent="erisen-yellow"` na raiz. * O default do produto é o AZUL #3842fd declarado acima. * * Este bloco é a INVERSÃO do que existia até 15/09/2026 à noite. Antes, o azul * é que era o tema opcional, sob `?accent=hub-blue`, porque o amarelo era a * decisão vigente e o Master v1.0 parecia ser de outro produto. O dono * resolveu as duas dúvidas de uma vez ("sim sao o mesmo produto, seguir pro * Azul"), então o azul virou o default e o amarelo passou a ser o tema de * conferência. A bandeira NÃO foi apagada de propósito: se ele olhar a tela * azul e quiser rever o amarelo lado a lado, é uma URL, não um deploy. * * Como VER o amarelo: * qualquer tela + `?accent=erisen-yellow` na URL. Ex.: * http://127.0.0.1:4173/?accent=erisen-yellow * Como VOLTAR ao amarelo de vez: mover as linhas de valor abaixo para o * `:root` de cima, apagando as do azul, e devolver --accent-primary-text ao * valor do accent (no amarelo os dois são a mesma cor: #fdf547 dá 14-17:1 de * tinta em qualquer superfície, e o token de texto existe só por causa do * azul). Nenhum outro arquivo muda — as declarações do accent moram todas * neste arquivo, e as duas únicas ocorrências de amarelo cravado fora dele * (studio.css e studio.js) estão dentro de COMENTÁRIO, não em valor. * Como REMOVER: apagar este bloco e o trecho `accent=` de studio.js. * * Proveniência dos valores (não apagar — é a história da cor): * #fdf547 vem de duas fontes independentes que batem no mesmo ponto: a moda * dos CTAs sólidos das 3 telas de referência visual de 13/09/2026 * (#fff94b, #fef54e, #fef879) e a faixa "Accent (ERISEN yellow) * #F5E94A–#FDF547, realce até #FEF979" do relatório visual * de UX (v1.9.1). O oliva #202217 é a média do fundo do item ativo nas três. */ :root[data-accent="erisen-yellow"] { --accent-primary: #fdf547; --accent-primary-ink: #0a0d12; --accent-primary-hover: #fef979; --accent-primary-soft: #202217; --accent-primary-line: rgba(253, 245, 71, 0.42); /* No amarelo a tinta do accent É o accent: 14,07:1 sobre o oliva e 15,54:1 sobre --surface-1. O token existe para o azul; aqui ele só reaponta. */ --accent-primary-text: var(--accent-primary); --accent-outline-bg: #080c0e; --accent-outline-bg-hover: #1a1f10; --accent-ai-glow: 0 0 0 1px var(--accent-primary-line), 0 0 24px rgba(253, 245, 71, 0.18); }