/* CÓPIA de ~/developer/17-padrao-visual/cores-e-letras/tokens.css (v2), copiada em 2026-11-02. Não edite aqui: mude no 17 e copie de novo. O site força o tema claro (data-theme="light" no ). */ /* ========================================================================= PAPEL E TINTA — tokens do padrão visual do Rafael v2 · 2026-09-04 · ~/developer/17-padrao-visual/cores-e-letras/tokens.css O QUE MUDOU NA v2 (Lote 1a) e por quê: + as cores viraram ESCALA de 10 degraus. Antes eram 3 níveis por cor (base, fundo, borda) + 1 de texto. Três bastam para badge e cartão; não bastam para estado de interação nem para gráfico. + camada SEMÂNTICA separada da primitiva. Antes --petroleo era as duas coisas ao mesmo tempo, e por isso não existia 'petróleo apertado'. O semântico aponta para degraus OPOSTOS em cada tema: --petroleo-fundo é o degrau 50 no claro e o 900 no escuro. + tokens de ESTADO: hover, selecionado, ativo, foco, desabilitado. Medido no 13 em 04/09: 26 hover escritos na mão, 1 foco em 36 componentes, 2 desabilitados. Foco é exigência de acessibilidade. O QUE NÃO MUDOU, de propósito: nenhum valor existente. Os 28 tokens de cor da v1 continuam com o mesmo hex — viraram alias de um degrau. Conferido token a token em 04/09: 0 sumiram, 0 mudaram de valor, nos dois temas. O 13 tem cópia própria em app/globals.css e não é afetado até alguém copiar este arquivo para lá. A REGRA CONTÁVEL (medida nesta escala, não estimada): · 7 degraus de distância garantem 4,5:1 — texto pequeno · 5 degraus de distância garantem 3,0:1 — texto grande, borda, gráfico Vale para qualquer par dentro da mesma família. É o que substitui 'escureça até o tom 600', que é regra que ninguém consegue conferir. ========================================================================= */ /* ------------------------------------------------------------------------- 1. PRIMITIVOS — a escala. Número maior = mais escuro, e isso vale nos três estados de tema: o 900 é sempre o mais escuro da família, o 50 sempre o mais claro. É o que permite dizer "um degrau mais escuro" e a frase significar a mesma coisa em toda parte. ⚠️ O VALOR muda com o tema; o SIGNIFICADO do número não. Tentei manter uma escala só para os dois temas e medi que não dá: o fundo tonal do tema escuro tem croma 0,02 e o degrau equivalente no claro tem 0,09 — de 1,4 a 3,1 vezes mais. Não é descuido do tema escuro: fundo saturado numa tela escura sangra. Forçar uma escala única mudaria 3 cores de forma visível (ΔE até 0,079) para ganhar simetria. A seção 4 traz os valores do escuro. ------------------------------------------------------------------------- */ :root { /* --- petróleo — ação, link, foco, valor --- */ --petroleo-50: #edf1f3; /* era --petroleo-fundo */ --petroleo-100: #d9e3e8; --petroleo-200: #c5d5dc; /* era --petroleo-borda */ --petroleo-300: #abbec7; --petroleo-400: #8ca3ad; --petroleo-500: #6d8895; --petroleo-600: #577382; --petroleo-700: #3b5b6b; /* era --petroleo */ --petroleo-800: #2c4753; /* era --petroleo-escuro */ --petroleo-900: #1b313b; /* --- âmbar — atenção, parado, envelheceu --- */ --ambar-50: #f6ecdf; /* era --ambar-fundo */ --ambar-100: #eedfcb; --ambar-200: #e6cfb4; /* era --ambar-borda */ --ambar-300: #d7b38f; --ambar-400: #c69264; --ambar-500: #b5703a; /* era --ambar */ --ambar-600: #8f5628; /* era --ambar-texto */ --ambar-700: #7f491d; --ambar-800: #64370f; --ambar-900: #472302; /* --- verde-sálvia — conforme, resolvido, no prazo --- */ --verde-50: #eaf0eb; /* era --verde-fundo */ --verde-100: #dae4dc; --verde-200: #c6d6c9; /* era --verde-borda */ --verde-300: #adc1b1; --verde-400: #8ea693; --verde-500: #6f8c76; --verde-600: #5e7d66; /* era --verde */ --verde-700: #4a6551; /* era --verde-texto */ --verde-800: #344a3a; --verde-900: #213326; /* --- carmim — não conforme, vencido, quebrado --- */ --carmim-50: #f7ebe9; /* era --carmim-fundo */ --carmim-100: #f0dcd9; --carmim-200: #e8c9c5; /* era --carmim-borda */ --carmim-300: #daaea9; --carmim-400: #c88d86; --carmim-500: #b46d65; --carmim-600: #a4524a; /* era --carmim */ --carmim-700: #8c4139; /* era --carmim-texto */ --carmim-800: #6c2d27; --carmim-900: #4e1b17; /* --- papel: a superfície. Quente de propósito (matiz ~90°). --- */ --papel-0: #ffffff; /* era --superficie */ --papel-50: #fafaf7; /* era --papel */ --papel-100: #f1f0ea; /* era --papel-2 */ --papel-200: #e5e2da; /* era --linha */ --papel-300: #d3cfc4; /* era --linha-forte */ --papel-400: #c0bdb6; --papel-500: #afaca3; /* --- tinta: o texto. Fria de propósito (matiz ~266°). O contraste entre papel quente e tinta fria é o que dá nome ao sistema. --- */ --tinta-400: #989ead; --tinta-500: #7e8696; --tinta-600: #666e7b; /* era --tinta-fraca */ --tinta-700: #5a6172; /* era --tinta-suave */ --tinta-800: #39404e; --tinta-900: #1a1f2e; /* era --tinta */ --tinta-950: #0e111a; } /* ------------------------------------------------------------------------- 2. SEMÂNTICOS — o papel, não o valor. MUDAM com o tema. Aqui mora o "para que serve"; ali em cima, o "que cor é". A separação é o que permite trocar o tema sem reescrever componente, e o que faz existir um estado de hover — que a v1 não tinha como expressar. ⚠️ Cuidado de leitura: --papel-2 (v1, alias) e --papel-200 (v2, degrau) são tokens DIFERENTES. --papel-2 aponta para --papel-100. ------------------------------------------------------------------------- */ :root { /* --- superfícies (nomes da v1, valores idênticos) --- */ --superficie: var(--papel-0); --papel: var(--papel-50); --papel-2: var(--papel-100); --linha: var(--papel-200); --linha-forte: var(--papel-300); /* --- tinta (nomes da v1, valores idênticos) --- */ --tinta: var(--tinta-900); --tinta-suave: var(--tinta-700); --tinta-fraca: var(--tinta-600); /* --- as quatro famílias (nomes da v1, valores idênticos) --- */ --petroleo: var(--petroleo-700); --petroleo-escuro: var(--petroleo-800); --petroleo-fundo: var(--petroleo-50); --petroleo-borda: var(--petroleo-200); --petroleo-texto: var(--petroleo-800); --ambar: var(--ambar-500); --ambar-fundo: var(--ambar-50); --ambar-borda: var(--ambar-200); --ambar-texto: var(--ambar-600); --verde: var(--verde-600); --verde-fundo: var(--verde-50); --verde-borda: var(--verde-200); --verde-texto: var(--verde-700); --carmim: var(--carmim-600); --carmim-fundo: var(--carmim-50); --carmim-borda: var(--carmim-200); --carmim-texto: var(--carmim-700); /* --- bloco de código (nomes da v1, valores idênticos) --- */ --codigo-fundo: #f7f6f1; --codigo-borda: #e0ddd2; --sombra: 0 1px 2px rgba(26, 31, 46, 0.05), 0 1px 8px rgba(26, 31, 46, 0.04); } /* ------------------------------------------------------------------------- 3. ESTADOS DE INTERAÇÃO — o que a v1 não tinha Medido no 13 em 04/09/2026: 26 hover escritos à mão em 12 padrões diferentes, 1 (um) estado de foco em 36 componentes, 2 desabilitados resolvidos com opacidade. Foco visível não é estilo: é exigência de acessibilidade em todo elemento interativo. A REGRA, em degraus — para quando você precisar de um estado que não está aqui: hover 1 degrau · no claro escurece, no escuro clareia selecionado 1 degrau · na propriedade de fundo ativo 2 degraus · o clique, entre apertar e soltar foco cor própria · borda de 2px, mínimo 3:1, nunca some desabilitado família neutra · ignora a cor base, sempre Só entraram aqui os estados com 3 ou mais usos medidos no 13. Os de uso único (opacity-90, ring-2, bg-petroleo-fundo) ficam no componente até um terceiro consumidor aparecer — globalizar cedo é dívida, não sistema. ------------------------------------------------------------------------- */ :root { /* superfície sob o cursor — 5 usos no 13 (hover:bg-papel-2) */ --superficie-hover: var(--papel-100); --superficie-ativa: var(--papel-200); /* texto secundário que ganha ênfase no hover — 4 usos (hover:text-tinta) */ --tinta-hover: var(--tinta-900); /* a cor de ação e seus estados — 3 usos (hover:text-petroleo) */ --acao: var(--petroleo-700); --acao-hover: var(--petroleo-800); --acao-ativa: var(--petroleo-900); --acao-sobre: var(--papel-0); /* o que se escreve EM CIMA da ação */ /* borda que reage — 3 usos (hover:border-petroleo) */ --linha-hover: var(--petroleo-700); /* A BORDA DE CONTROLE, e por que ela é diferente de --linha-forte. WCAG 1.4.11 exige 3:1 na fronteira de um controle — botão, campo, caixa de seleção. Divisória de tabela e borda de badge são decorativas e ficam isentas. Medido em 04/09: --linha-forte dá 1,49:1 sobre o papel, e NENHUM degrau da família papel fecha 3:1 — nem o mais escuro (2,17). A borda de controle tem que vir da tinta. O botão secundário da vitrine usa --linha-forte hoje: é o caso real que este token conserta. */ --linha-controle: var(--tinta-500); /* foco: uma cor só, e ela não muda por componente */ --foco: var(--petroleo-700); --foco-interno: var(--papel-0); --foco-largura: 2px; --foco-recuo: 2px; /* desabilitado: sempre neutro, qualquer que seja a cor de origem */ --desabilitado-texto: var(--tinta-400); --desabilitado-superficie: var(--papel-100); --desabilitado-linha: var(--papel-300); } /* ------------------------------------------------------------------------- 4. ESCURO POR PREFERÊNCIA DO SISTEMA Só os SEMÂNTICOS são redefinidos. Os primitivos da seção 1 valem nos dois temas — é isso que faz "um degrau mais escuro" significar a mesma coisa aqui e lá em cima. O guard :not([data-theme="light"]) faz a escolha explícita do usuário ganhar de um sistema operacional no escuro. ⚠️ DÍVIDA DECLARADA (04/09/2026): os valores abaixo são literais, não apontam para a escala. Medi: 8 dos 12 valores de cor do tema escuro caem FORA dos degraus da seção 1 — as bases ficam em L≈0.75, entre o 300 e o 400, e os fundos em L≈0.26, abaixo do 900. Encaixá-los exige ou mover degraus (e mudar o tema claro) ou uma segunda escala só para o escuro. É decisão do Rafael, e está no fio aberto. Até lá, literal e funcionando. ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* os degraus, redefinidos. O NOME significa a mesma coisa: 900 é o mais escuro da família, 50 o mais claro — aqui e no tema claro. O que muda é o valor, porque a curva de croma é outra: fundo tonal no escuro é quase neutro (C≈0,02) e no claro é saturado. Fundo saturado em tela escura sangra. Medido em 04/09. */ --petroleo-50: #deecf4; --petroleo-100: #c3dae5; --petroleo-200: #a9c7d6; --petroleo-300: #8fb4c6; --petroleo-400: #759bae; --petroleo-500: #5b8296; --petroleo-600: #48687b; --petroleo-700: #3b5669; --petroleo-800: #31485a; --petroleo-900: #1e2a33; --ambar-50: #fce5d2; --ambar-100: #f2ceb0; --ambar-200: #e6b78f; --ambar-300: #d9a271; --ambar-400: #b88a5f; --ambar-500: #99734f; --ambar-600: #7a5d3e; --ambar-700: #664d33; --ambar-800: #54402a; --ambar-900: #2c2419; --verde-50: #dfeee2; --verde-100: #c6ddca; --verde-200: #accbb3; --verde-300: #93b89b; --verde-400: #7f9e84; --verde-500: #6a846c; --verde-600: #556a55; --verde-700: #475846; --verde-800: #334031; --verde-900: #1c261e; --carmim-50: #ffe2de; --carmim-100: #f6cac4; --carmim-200: #ebb1aa; --carmim-300: #d99189; --carmim-400: #c2817a; --carmim-500: #a36b65; --carmim-600: #835551; --carmim-700: #6e4643; --carmim-800: #523330; --carmim-900: #2b1a18; --papel-0: #1a1f28; --papel-50: #14181f; --papel-100: #1b2028; --papel-200: #2a303b; --papel-300: #3a4250; --papel-400: #535b6a; --papel-500: #687180; --tinta-400: #4a505c; --tinta-500: #606673; --tinta-600: #828a9a; --tinta-700: #a0a7b5; --tinta-800: #b1b8c4; --tinta-900: #eceae4; --tinta-950: #faf8f2; /* os semânticos: mesmo papel, degrau diferente. As neutras nem aparecem aqui — --superficie continua sendo --papel-0 nos dois temas, porque o degrau já mudou de valor. Só as quatro famílias invertem de ponta. */ --petroleo: var(--petroleo-300); --petroleo-fundo: var(--petroleo-900); --petroleo-borda: var(--petroleo-800); --petroleo-escuro: var(--petroleo-500); --petroleo-texto: var(--petroleo-300); --ambar: var(--ambar-300); --ambar-fundo: var(--ambar-900); --ambar-borda: var(--ambar-800); --ambar-texto: var(--ambar-300); --verde: var(--verde-300); --verde-fundo: var(--verde-900); --verde-borda: var(--verde-800); --verde-texto: var(--verde-300); --carmim: var(--carmim-300); --carmim-fundo: var(--carmim-900); --carmim-borda: var(--carmim-800); --carmim-texto: var(--carmim-300); --codigo-fundo: #10141a; --codigo-borda: #272e39; --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 8px rgba(0, 0, 0, 0.2); /* estados: no escuro o movimento é para CLAREAR */ --superficie-hover: var(--papel-200); --superficie-ativa: var(--papel-300); --tinta-hover: var(--tinta-950); --acao: var(--petroleo-300); --acao-hover: var(--petroleo-200); --acao-ativa: var(--petroleo-100); --acao-sobre: var(--papel-50); --linha-hover: var(--petroleo-300); --linha-controle: var(--tinta-600); /* foco: branco. 16,5:1 sobre a superfície. Uma cor de marca no escuro raramente fecha 3:1 — o Carbon chega na mesma conclusão. */ --foco: #ffffff; --foco-interno: var(--papel-50); --desabilitado-texto: var(--tinta-500); --desabilitado-superficie: var(--papel-100); --desabilitado-linha: var(--papel-200); /* sequencial e divergente INVERTEM a ponta: no claro o maior valor é o mais escuro; no escuro é o mais claro. O número do token continua querendo dizer a mesma coisa — 8 é sempre o maior valor. */ --sequencial-1: var(--petroleo-800); --sequencial-2: var(--petroleo-700); --sequencial-3: var(--petroleo-600); --sequencial-4: var(--petroleo-500); --sequencial-5: var(--petroleo-400); --sequencial-6: var(--petroleo-300); --sequencial-7: var(--petroleo-200); --sequencial-8: var(--petroleo-100); --divergente-neg-4: var(--carmim-300); --divergente-neg-3: var(--carmim-500); --divergente-neg-2: var(--carmim-700); --divergente-neg-1: var(--carmim-800); --divergente-pos-1: var(--petroleo-800); --divergente-pos-2: var(--petroleo-700); --divergente-pos-3: var(--petroleo-500); --divergente-pos-4: var(--petroleo-300); --grafico-eixo: var(--papel-300); --grafico-grade: var(--papel-200); --grafico-rotulo: var(--tinta-700); --grafico-apagado: var(--papel-300); } } /* ------------------------------------------------------------------------- 5. ESCURO POR ESCOLHA EXPLÍCITA (o botão de tema) Repetido de propósito: sem este bloco, o botão não funciona para quem está num sistema operacional no claro. ------------------------------------------------------------------------- */ :root[data-theme="dark"] { /* os degraus, redefinidos. O NOME significa a mesma coisa: 900 é o mais escuro da família, 50 o mais claro — aqui e no tema claro. O que muda é o valor, porque a curva de croma é outra: fundo tonal no escuro é quase neutro (C≈0,02) e no claro é saturado. Fundo saturado em tela escura sangra. Medido em 04/09. */ --petroleo-50: #deecf4; --petroleo-100: #c3dae5; --petroleo-200: #a9c7d6; --petroleo-300: #8fb4c6; --petroleo-400: #759bae; --petroleo-500: #5b8296; --petroleo-600: #48687b; --petroleo-700: #3b5669; --petroleo-800: #31485a; --petroleo-900: #1e2a33; --ambar-50: #fce5d2; --ambar-100: #f2ceb0; --ambar-200: #e6b78f; --ambar-300: #d9a271; --ambar-400: #b88a5f; --ambar-500: #99734f; --ambar-600: #7a5d3e; --ambar-700: #664d33; --ambar-800: #54402a; --ambar-900: #2c2419; --verde-50: #dfeee2; --verde-100: #c6ddca; --verde-200: #accbb3; --verde-300: #93b89b; --verde-400: #7f9e84; --verde-500: #6a846c; --verde-600: #556a55; --verde-700: #475846; --verde-800: #334031; --verde-900: #1c261e; --carmim-50: #ffe2de; --carmim-100: #f6cac4; --carmim-200: #ebb1aa; --carmim-300: #d99189; --carmim-400: #c2817a; --carmim-500: #a36b65; --carmim-600: #835551; --carmim-700: #6e4643; --carmim-800: #523330; --carmim-900: #2b1a18; --papel-0: #1a1f28; --papel-50: #14181f; --papel-100: #1b2028; --papel-200: #2a303b; --papel-300: #3a4250; --papel-400: #535b6a; --papel-500: #687180; --tinta-400: #4a505c; --tinta-500: #606673; --tinta-600: #828a9a; --tinta-700: #a0a7b5; --tinta-800: #b1b8c4; --tinta-900: #eceae4; --tinta-950: #faf8f2; /* os semânticos: mesmo papel, degrau diferente. As neutras nem aparecem aqui — --superficie continua sendo --papel-0 nos dois temas, porque o degrau já mudou de valor. Só as quatro famílias invertem de ponta. */ --petroleo: var(--petroleo-300); --petroleo-fundo: var(--petroleo-900); --petroleo-borda: var(--petroleo-800); --petroleo-escuro: var(--petroleo-500); --petroleo-texto: var(--petroleo-300); --ambar: var(--ambar-300); --ambar-fundo: var(--ambar-900); --ambar-borda: var(--ambar-800); --ambar-texto: var(--ambar-300); --verde: var(--verde-300); --verde-fundo: var(--verde-900); --verde-borda: var(--verde-800); --verde-texto: var(--verde-300); --carmim: var(--carmim-300); --carmim-fundo: var(--carmim-900); --carmim-borda: var(--carmim-800); --carmim-texto: var(--carmim-300); --codigo-fundo: #10141a; --codigo-borda: #272e39; --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 8px rgba(0, 0, 0, 0.2); /* estados: no escuro o movimento é para CLAREAR */ --superficie-hover: var(--papel-200); --superficie-ativa: var(--papel-300); --tinta-hover: var(--tinta-950); --acao: var(--petroleo-300); --acao-hover: var(--petroleo-200); --acao-ativa: var(--petroleo-100); --acao-sobre: var(--papel-50); --linha-hover: var(--petroleo-300); --linha-controle: var(--tinta-600); /* foco: branco. 16,5:1 sobre a superfície. Uma cor de marca no escuro raramente fecha 3:1 — o Carbon chega na mesma conclusão. */ --foco: #ffffff; --foco-interno: var(--papel-50); --desabilitado-texto: var(--tinta-500); --desabilitado-superficie: var(--papel-100); --desabilitado-linha: var(--papel-200); /* sequencial e divergente INVERTEM a ponta: no claro o maior valor é o mais escuro; no escuro é o mais claro. O número do token continua querendo dizer a mesma coisa — 8 é sempre o maior valor. */ --sequencial-1: var(--petroleo-800); --sequencial-2: var(--petroleo-700); --sequencial-3: var(--petroleo-600); --sequencial-4: var(--petroleo-500); --sequencial-5: var(--petroleo-400); --sequencial-6: var(--petroleo-300); --sequencial-7: var(--petroleo-200); --sequencial-8: var(--petroleo-100); --divergente-neg-4: var(--carmim-300); --divergente-neg-3: var(--carmim-500); --divergente-neg-2: var(--carmim-700); --divergente-neg-1: var(--carmim-800); --divergente-pos-1: var(--petroleo-800); --divergente-pos-2: var(--petroleo-700); --divergente-pos-3: var(--petroleo-500); --divergente-pos-4: var(--petroleo-300); --grafico-eixo: var(--papel-300); --grafico-grade: var(--papel-200); --grafico-rotulo: var(--tinta-700); --grafico-apagado: var(--papel-300); } /* ------------------------------------------------------------------------- 6. TEXTO — nomeado pelo PAPEL, não pelo tamanho Cada tamanho carrega o entrelinha junto. Foi a lacuna que mais dispersa quando o sistema cresce: no 13 convivem 0.72rem, 0.8125rem e 1.15rem escolhidos na mão, componente a componente. Não muda com o tema. ------------------------------------------------------------------------- */ :root { --texto-nano: 0.6875rem; --texto-nano-lh: 1rem; /* 11px · etiqueta, eyebrow */ --texto-micro: 0.75rem; --texto-micro-lh: 1.125rem; /* 12px · legenda, metadado */ --texto-mini: 0.8125rem; --texto-mini-lh: 1.3rem; /* 13px · corpo denso, tabela */ --texto-base: 0.875rem; --texto-base-lh: 1.4rem; /* 14px · corpo */ --texto-medio: 1rem; --texto-medio-lh: 1.5rem; /* 16px · destaque em prosa */ --texto-titulo: 1.25rem; --texto-titulo-lh: 1.6rem; /* 20px · título de seção */ --texto-display: 1.75rem; --texto-display-lh: 2.1rem; /* 28px · título de página */ --texto-numero: 2.25rem; --texto-numero-lh: 2.4rem; /* 36px · big number */ --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; /* Rastreio só em caixa alta pequena. Em texto normal, atrapalha. */ --rastreio-etiqueta: 0.06em; /* --- 7. ESPAÇO — base 4px. Toda margem sai daqui. --- */ --e-1: 0.25rem; /* 4px */ --e-2: 0.5rem; /* 8px */ --e-3: 0.75rem; /* 12px */ --e-4: 1rem; /* 16px */ --e-6: 1.5rem; /* 24px */ --e-8: 2rem; /* 32px */ --e-10: 2.5rem; /* 40px */ --e-12: 3rem; /* 48px */ /* v2: o que faltava acima de 48px. Sem estes, todo espaçamento grande de página era escolhido na mão — que é como a escala de texto estava antes de virar token. O nome segue a regra de sempre: N = px / 4. */ --e-16: 4rem; /* 64px */ --e-20: 5rem; /* 80px */ --e-24: 6rem; /* 96px */ --e-40: 10rem; /* 160px */ /* --- 8. RAIO — teto de 8px. Template de admin abusa de canto redondo; papel e tinta não tem canto de plástico. --- */ --raio-min: 3px; /* código inline, etiqueta */ --raio: 4px; /* botão, campo */ --raio-card: 6px; /* cartão, modal */ --raio-pill: 999px; /* só em contador e badge circular */ } /* ------------------------------------------------------------------------- 9. GRÁFICO — a paleta de série, e por que ela é separada do resto REGRA UM: cor de estado não é cor de série. Verde no papel-e-tinta quer dizer "conforme". Se ele virar a série 3 de um gráfico de faturamento, passa a não querer dizer nada — e aí não quer dizer nada em lugar nenhum. Gráfico usa ESTA paleta. Status usa --verde / --ambar / --carmim. REGRA DOIS: a paleta muda com o tema, inteira. Não é o mesmo hex num fundo diferente — são dois conjuntos. Medido: no claro as séries ficam em L 0,39–0,60; no escuro, em L 0,67–0,86. Um conjunto só reprovaria contraste em um dos dois temas, sempre. REGRA TRÊS: a cor nunca é o único canal. Rótulo direto no traço é melhor que legenda; quando a legenda for inevitável, ela não passa de 30% da altura do gráfico. Daltonismo não se resolve escolhendo "cores seguras" — não existem. Resolve-se tendo um segundo canal. COMO ESCOLHER: use o grupo do tamanho que você tem, não os primeiros da lista. Um gráfico de 3 séries usa o grupo de 3 — que não é serie-1,2,3. 1 série : serie-1 2 séries: serie-1 · serie-2 3 séries: serie-1 · serie-4 · serie-8 4 séries: serie-1 · serie-4 · serie-6 · serie-8 5 séries: serie-1 · serie-2 · serie-4 · serie-6 · serie-7 6 séries: serie-1 · serie-2 · serie-4 · serie-5 · serie-6 · serie-7 Critério de construção, medido em 04/09/2026: todas fecham no mínimo 3:1 contra o fundo (piso WCAG para elemento gráfico), e a menor distância perceptual entre qualquer par é ΔE 0.127 no claro e 0.110 no escuro, em OKLab — acima de 0,10, que é o limiar de "claramente diferentes". ------------------------------------------------------------------------- */ :root { --serie-1: #005d7e; /* petroleo */ --serie-2: #a24e46; /* carmim */ --serie-3: #0d5f30; /* verde */ --serie-4: #663912; /* ambar */ --serie-5: #6e6c9f; /* roxo */ --serie-6: #00928c; /* ciano */ --serie-7: #703a6c; /* magenta */ --serie-8: #846e00; /* oliva */ /* sequencial — intensidade de UMA grandeza (mapa de calor, densidade). No tema claro o mais ESCURO é o maior valor. No escuro isso inverte: o mais CLARO é o maior. Não é preciosismo — é o que o olho lê como "mais" em cada fundo. */ --sequencial-1: var(--petroleo-100); --sequencial-2: var(--petroleo-200); --sequencial-3: var(--petroleo-300); --sequencial-4: var(--petroleo-400); --sequencial-5: var(--petroleo-500); --sequencial-6: var(--petroleo-600); --sequencial-7: var(--petroleo-700); --sequencial-8: var(--petroleo-800); /* divergente — distância de um ponto neutro: acima/abaixo da meta, ganho/perda, antes/depois. Carmim de um lado, petróleo do outro, e o miolo claro é o zero. */ --divergente-neg-4: var(--carmim-800); --divergente-neg-3: var(--carmim-600); --divergente-neg-2: var(--carmim-400); --divergente-neg-1: var(--carmim-200); --divergente-pos-1: var(--petroleo-200); --divergente-pos-2: var(--petroleo-400); --divergente-pos-3: var(--petroleo-600); --divergente-pos-4: var(--petroleo-800); /* o desenho do gráfico em si */ --grafico-eixo: var(--papel-300); --grafico-grade: var(--papel-200); --grafico-rotulo: var(--tinta-600); --grafico-apagado: var(--papel-400); /* série sem foco, quando outra é destacada */ } /* as séries no escuro — conjunto próprio, não o mesmo com opacidade */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --serie-1: #88caeb; /* petroleo */ --serie-2: #ca7e75; /* carmim */ --serie-3: #99d6a8; /* verde */ --serie-4: #e5a97d; /* ambar */ --serie-5: #9896d4; /* roxo */ --serie-6: #4db3ad; /* ciano */ --serie-7: #eac0e5; /* magenta */ --serie-8: #ab9747; /* oliva */ } } :root[data-theme="dark"] { --serie-1: #88caeb; /* petroleo */ --serie-2: #ca7e75; /* carmim */ --serie-3: #99d6a8; /* verde */ --serie-4: #e5a97d; /* ambar */ --serie-5: #9896d4; /* roxo */ --serie-6: #4db3ad; /* ciano */ --serie-7: #eac0e5; /* magenta */ --serie-8: #ab9747; /* oliva */ } /* ------------------------------------------------------------------------- 10. MOVIMENTO O Carbon separa motion "produtivo" de "expressivo" e mantém seis curvas. Aqui ficam três: o papel-e-tinta é produtivo por definição — é sistema de trabalho, não de encantamento. Se um dia existir um momento expressivo (uma tela de boas-vindas, um relatório que se monta), o eixo entra então. As durações vieram do Carbon e foram encurtadas em um degrau: 70/110/240 /400 lá contra 90/150/240 aqui. Motivo declarado: micro-interação abaixo de 90ms o olho não registra como movimento, registra como corte. O melhor movimento de interface passa despercebido. Se o usuário médio nota com frequência, considere remover — não ajustar. ------------------------------------------------------------------------- */ :root { --dur-rapida: 90ms; /* cor de hover, foco, troca de estado */ --dur-base: 150ms; /* botão, cartão, o que muda de tamanho pouco */ --dur-lenta: 240ms; /* modal, painel lateral, o que entra na tela */ /* padrão: o elemento está visível do começo ao fim (ordenar tabela) */ --curva-padrao: cubic-bezier(0.2, 0, 0.38, 0.9); /* entrada: aparece rápido e desacelera até parar (modal, toast) */ --curva-entrada: cubic-bezier(0, 0, 0.38, 0.9); /* saída: acelera ao sair, dizendo que a saída é definitiva */ --curva-saida: cubic-bezier(0.2, 0, 1, 0.9); } /* Não é sugestão: é o sistema respeitando quem pediu para não ver movimento. Vale para toda superfície que importar este arquivo. */ @media (prefers-reduced-motion: reduce) { :root { --dur-rapida: 1ms; --dur-base: 1ms; --dur-lenta: 1ms; } } /* ------------------------------------------------------------------------- 11. ELEVAÇÃO ⚠️ Estes tokens existem e a superfície dashboard NÃO os usa — ver a decisão 4 do CLAUDE.md: lá é borda, não sombra, e o raio tem teto de 8px. Quem usa é a superfície aula, que é documento longo. O núcleo oferece; a superfície decide. ------------------------------------------------------------------------- */ :root { --elev-1: 0 1px 2px rgba(26, 31, 46, 0.05); --elev-2: 0 1px 2px rgba(26, 31, 46, 0.05), 0 1px 8px rgba(26, 31, 46, 0.04); --elev-3: 0 6px 16px rgba(26, 31, 46, 0.08), 0 2px 4px rgba(26, 31, 46, 0.04); --elev-4: 0 16px 36px rgba(26, 31, 46, 0.12), 0 4px 10px rgba(26, 31, 46, 0.06); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3); --elev-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 8px rgba(0, 0, 0, 0.2); --elev-3: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25); --elev-4: 0 16px 36px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3); } } :root[data-theme="dark"] { --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3); --elev-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 8px rgba(0, 0, 0, 0.2); --elev-3: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25); --elev-4: 0 16px 36px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3); } /* ------------------------------------------------------------------------- 12. PONTE PARA O TAILWIND v4 Só necessário em projeto Next/Tailwind (o 13 e os que vierem). Em HTML puro, ignore este bloco — as variáveis acima já funcionam sozinhas. ⚠️ EXCETO AS QUATRO DE LETRA (corrigido em 12/10/2026): elas só existiam aqui dentro, e o navegador ignora o @theme inteiro. Agora também estão num :root normal, na seção 12b, logo abaixo deste bloco. ------------------------------------------------------------------------- */ @theme inline { --color-papel: var(--papel); --color-papel-2: var(--papel-2); --color-superficie: var(--superficie); --color-tinta: var(--tinta); --color-tinta-suave: var(--tinta-suave); --color-tinta-fraca: var(--tinta-fraca); --color-petroleo: var(--petroleo); --color-petroleo-escuro: var(--petroleo-escuro); --color-petroleo-fundo: var(--petroleo-fundo); --color-petroleo-borda: var(--petroleo-borda); --color-ambar: var(--ambar); --color-ambar-fundo: var(--ambar-fundo); --color-ambar-borda: var(--ambar-borda); --color-verde: var(--verde); --color-verde-fundo: var(--verde-fundo); --color-verde-borda: var(--verde-borda); --color-carmim: var(--carmim); --color-carmim-fundo: var(--carmim-fundo); --color-carmim-borda: var(--carmim-borda); --color-petroleo-texto: var(--petroleo-texto); --color-ambar-texto: var(--ambar-texto); --color-verde-texto: var(--verde-texto); --color-carmim-texto: var(--carmim-texto); --color-linha: var(--linha); --color-linha-forte: var(--linha-forte); --color-codigo-fundo: var(--codigo-fundo); --color-codigo-borda: var(--codigo-borda); /* --- v2: os degraus e os estados, como classe Tailwind --- */ --color-acao: var(--acao); --color-acao-hover: var(--acao-hover); --color-acao-ativa: var(--acao-ativa); --color-acao-sobre: var(--acao-sobre); --color-superficie-hover: var(--superficie-hover); --color-superficie-ativa: var(--superficie-ativa); --color-tinta-hover: var(--tinta-hover); --color-linha-hover: var(--linha-hover); --color-linha-controle: var(--linha-controle); --color-serie-1: var(--serie-1); --color-serie-2: var(--serie-2); --color-serie-3: var(--serie-3); --color-serie-4: var(--serie-4); --color-serie-5: var(--serie-5); --color-serie-6: var(--serie-6); --color-serie-7: var(--serie-7); --color-serie-8: var(--serie-8); --color-sequencial-1: var(--sequencial-1); --color-sequencial-2: var(--sequencial-2); --color-sequencial-3: var(--sequencial-3); --color-sequencial-4: var(--sequencial-4); --color-sequencial-5: var(--sequencial-5); --color-sequencial-6: var(--sequencial-6); --color-sequencial-7: var(--sequencial-7); --color-sequencial-8: var(--sequencial-8); --color-divergente-neg-1: var(--divergente-neg-1); --color-divergente-neg-2: var(--divergente-neg-2); --color-divergente-neg-3: var(--divergente-neg-3); --color-divergente-neg-4: var(--divergente-neg-4); --color-divergente-pos-1: var(--divergente-pos-1); --color-divergente-pos-2: var(--divergente-pos-2); --color-divergente-pos-3: var(--divergente-pos-3); --color-divergente-pos-4: var(--divergente-pos-4); --color-grafico-eixo: var(--grafico-eixo); --color-grafico-grade: var(--grafico-grade); --color-grafico-rotulo: var(--grafico-rotulo); --color-grafico-apagado: var(--grafico-apagado); --color-foco: var(--foco); --color-desabilitado-texto: var(--desabilitado-texto); --color-desabilitado-superficie: var(--desabilitado-superficie); --color-desabilitado-linha: var(--desabilitado-linha); --color-petroleo-50: var(--petroleo-50); --color-petroleo-100: var(--petroleo-100); --color-petroleo-200: var(--petroleo-200); --color-petroleo-300: var(--petroleo-300); --color-petroleo-400: var(--petroleo-400); --color-petroleo-500: var(--petroleo-500); --color-petroleo-600: var(--petroleo-600); --color-petroleo-700: var(--petroleo-700); --color-petroleo-800: var(--petroleo-800); --color-petroleo-900: var(--petroleo-900); --color-ambar-50: var(--ambar-50); --color-ambar-100: var(--ambar-100); --color-ambar-200: var(--ambar-200); --color-ambar-300: var(--ambar-300); --color-ambar-400: var(--ambar-400); --color-ambar-500: var(--ambar-500); --color-ambar-600: var(--ambar-600); --color-ambar-700: var(--ambar-700); --color-ambar-800: var(--ambar-800); --color-ambar-900: var(--ambar-900); --color-verde-50: var(--verde-50); --color-verde-100: var(--verde-100); --color-verde-200: var(--verde-200); --color-verde-300: var(--verde-300); --color-verde-400: var(--verde-400); --color-verde-500: var(--verde-500); --color-verde-600: var(--verde-600); --color-verde-700: var(--verde-700); --color-verde-800: var(--verde-800); --color-verde-900: var(--verde-900); --color-carmim-50: var(--carmim-50); --color-carmim-100: var(--carmim-100); --color-carmim-200: var(--carmim-200); --color-carmim-300: var(--carmim-300); --color-carmim-400: var(--carmim-400); --color-carmim-500: var(--carmim-500); --color-carmim-600: var(--carmim-600); --color-carmim-700: var(--carmim-700); --color-carmim-800: var(--carmim-800); --color-carmim-900: var(--carmim-900); --color-papel-0: var(--papel-0); --color-papel-50: var(--papel-50); --color-papel-100: var(--papel-100); --color-papel-200: var(--papel-200); --color-papel-300: var(--papel-300); --color-papel-400: var(--papel-400); --color-papel-500: var(--papel-500); --color-tinta-400: var(--tinta-400); --color-tinta-500: var(--tinta-500); --color-tinta-600: var(--tinta-600); --color-tinta-700: var(--tinta-700); --color-tinta-800: var(--tinta-800); --color-tinta-900: var(--tinta-900); --color-tinta-950: var(--tinta-950); /* LETRA — trocada em 30/09/2026. Era Outfit no display e Inter no corpo; agora é Montserrat e DM Sans, escolha do Rafael olhando os 43 componentes de deck lado a lado em três variantes. O deck trocou primeiro, no mesmo dia, e o núcleo vem atrás para a aula e o mostruário acompanharem. O FALLBACK DENTRO DO var() É NOVO E NÃO É ENFEITE: estas linhas eram var(--font-inter) sem segundo argumento. Em app Next.js o next/font define essa variável e funciona; em HTML puro ela não existe, a declaração inteira fica inválida e a fonte vira a do navegador. O nome literal como fallback faz as duas pontas funcionarem. ⚠️ ERRADO — afirmação do commit 2a4910c (30/09), corrigida em 12/10/2026. O fallback dentro do var() está certo, mas não basta: este bloco inteiro é @theme, e o navegador ignora at-rule que não conhece. Em HTML puro, --font-sans e companhia NÃO EXISTIAM — MEDIDO em 12/10: var(--font-display) num

do index.html renderizou DM Sans, a fonte herdada do body. O conserto é a seção 12b, abaixo. Este texto fica, marcado, para ninguém confiar nele de novo. ⚠️ DIVERGÊNCIA COM O 13, sinalizada e NÃO aplicada (regra 6.3 do CLAUDE.md): o 13-dashboard-os-mestre injeta --font-inter, --font-outfit e --font-jetbrains pelo next/font. Ele não define --font-montserrat nem --font-dmsans, então, até alguém atualizar o app, o dashboard cai no nome literal — que só resolve se a fonte estiver instalada na máquina ou carregada por . Quem for mexer no 13 precisa trocar o next/font lá. O globals.css de lá já estava sem carimbo e parado na v1 desde 04/09. */ --font-sans: var(--font-dmsans, "DM Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: var(--font-jetbrains, "JetBrains Mono"), ui-monospace, "SF Mono", Menlo, monospace; --font-display: var(--font-montserrat, "Montserrat"), var(--font-dmsans, "DM Sans"), sans-serif; --font-serif: Georgia, "Times New Roman", serif; } /* ------------------------------------------------------------------------- 12b. LETRA PARA HTML PURO — os mesmos quatro tokens, fora do @theme Criada em 12/10/2026. As quatro linhas abaixo são IGUAIS às quatro do fim do bloco 12, e as duas cópias existem por motivos diferentes: · DENTRO do @theme inline: é o que o Tailwind v4 lê para gerar as classes font-sans, font-display… (o 13). Fora dele, o Tailwind não as vê como tema. · AQUI, num :root normal: é o que o navegador lê em HTML puro (o mostruário, o deck, a aula, todo PDF que sai de HTML). O navegador ignora o @theme. Mexeu numa, mexe na outra. Não se aplica tema escuro: letra não muda com tema. ------------------------------------------------------------------------- */ :root { --font-sans: var(--font-dmsans, "DM Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: var(--font-jetbrains, "JetBrains Mono"), ui-monospace, "SF Mono", Menlo, monospace; --font-display: var(--font-montserrat, "Montserrat"), var(--font-dmsans, "DM Sans"), sans-serif; --font-serif: Georgia, "Times New Roman", serif; } /* ------------------------------------------------------------------------- 13. BASE ------------------------------------------------------------------------- */ body { background: var(--papel); color: var(--tinta); font-variant-numeric: tabular-nums; /* número embaixo de número, sempre */ }