/* ───────────────────────────────────────────────────────────── Rota Revalida — TOKENS SEMÂNTICOS (fonte única). GERADO a partir de valores validados por contraste WCAG + CIEDE2000 (0 par < 4.5:1 texto / 3:1 grande; 7:1 em alto_contraste; áreas com ΔE2000 mínimo; escada de texto monotônica; texto-debil ≥ 5.5:1 sobre surface-card). :root = tema "verde" (default). [data-theme=""] no sobrescreve. Nomes de tema EXATOS (underscore), iguais à CHECK do banco: verde, dark, light, sepia, azul_noite, ardosia, alto_contraste, bordo, rosa, laranja, azul_pastel, verde_pastel. Correções desta fase: (1) --texto virou degrau real abaixo de --texto-forte; (2) áreas remapeadas (MFC saiu do verde → violeta) e separadas por ΔE; (3) ACERTO usa --marca (verde único); --sucesso ficou só para toasts; (4) --texto-debil elevado a ≥5.5:1 sobre surface-card. REGRA DE COR SEMÂNTICA (vale para todos os módulos — siga nas próximas telas): · ÂMBAR (--alerta) = PENDÊNCIA e ALERTA. Ex.: simulado em andamento, modo prova, conduta datada, divergência de gabarito. · VIOLETA (--mentor) = ANÁLISE e RECOMENDAÇÃO do Mentor. Ex.: plano do dia, ponto fraco, blocos estratégicos do resumo. Identidade COMPLETA: borda --mentor + fundo --mentor-fraca + ícone sparkle + tag "MENTOR IA" (igual ao card do Mentor da Início). A hierarquia vs. a pendência âmbar é pelo BOTÃO, não pela borda: pendência = primário preenchido; recomendação = outline. · VERDE (--marca) = CONTEÚDO REVISADO e NAVEGAÇÃO. Ex.: selo "conteúdo revisado", ações primárias, acerto. · AZUL-AÇO (--edit) = EDITÁVEL. E este é de natureza DIFERENTE dos de cima: os outros são ESTADO — dizem algo sobre o conteúdo. Este é AFFORDANCE — diz o que a pessoa pode FAZER com ele. Confundir os dois faz o revisor médico ler "há uma pendência aqui" onde está escrito "você pode mexer". Por isso ganhou matiz próprio em vez de reusar --info ou --etapa2: aqueles já significam informação e etapa 2, e um azul que às vezes é estado e às vezes é permissão não é distinguível na tela. MEDIDO, e por isso o valor MUDA nos temas claros: #7FB4C9 rende 6,2:1 a 8,4:1 sobre --surface-card nos seis temas escuros, mas só 1,94:1 a 2,26:1 nos seis claros — abaixo do mínimo de 3:1 para elemento não-textual, o que faria a borda de 2px sumir. Nos claros o token vale #43809A (4,38:1 sobre branco, 3,76:1 sobre sépia), mesma família, distância perceptual dE 35 do --info claro — longe o bastante para não se confundir com ele. A COR NUNCA VAI NO TEXTO DO CORPO. Ela vive em borda, fundo e rótulo. O revisor lê esses parágrafos com atenção clínica, e texto colorido em corpo de leitura piora a legibilidade — o campo mais importante da tela seria o mais difícil de ler. ═══════════════════════════════════════════════════════════════════════ A ESCALA DE SUPERFÍCIES — uma relação só, para os doze temas ═══════════════════════════════════════════════════════════════════════ AS SEIS SUPERFÍCIES DE CADA TEMA NÃO SÃO ESCOLHIDAS À MÃO. Elas eram, e a varredura mostrou o resultado: o degrau `bg → surface` ia de 1,039 (laranja) a 1,150 (ardósia); o `card → elev` de 1,067 (alto contraste) a 1,348 (ardósia); e em TRÊS temas `--surface` e `--surface-card` eram a mesma cor (light 1,000 · sépia 1,019 · alto contraste 1,020) — um cartão dentro de um bloco simplesmente não existia ali. A RELAÇÃO CANÔNICA vem do protótipo (tema verde), e é a razão de contraste WCAG entre vizinhos da pilha: --bg-profundo → --bg 1,0568 --bg → --topo 1,0290 --bg → --surface 1,0493 --surface → --surface-card 1,0533 o que FLUTUA → o vizinho dele 1,1261 A SATURAÇÃO cai junto, e é medida em CROMA — (1−|2L−1|)·S —, não no S de HSL: perto do branco o S de HSL é mal-condicionado (#FFF6FA tem S = 100%) e multiplicá-lo não muda nada que o olho veja. Fatores, do protótipo: profundo 0,782 · bg 0,785 · topo 0,622 · surface 0,622 · card 0,568 · elev 0,573 O MATIZ NÃO MUDA. A identidade do tema é o matiz. DUAS FAMÍLIAS, e a diferença é só de direção: ESCUROS a pilha SOBE a partir de --bg, e --surface-elev é o mais claro. O --bg se afasta do texto claro: L' = L × 0,864. CLAROS a pilha DESCE a partir de --surface-card, e --surface-elev fica ABAIXO de --bg. Painel flutuante sobre página clara lê como painel TINGIDO — um branco mais branco que o branco não existe. A distância dele é medida contra o --bg, que é sobre quem ele flutua, e não contra o cartão, que é o que ele CONTÉM. O cartão se afasta do texto escuro: L' = 1 − (1−L) × 0,864. O --topo DEIXOU DE SER ACENTO. No verde ele era a superfície MAIS CLARA do tema inteiro (mais que --surface-elev), e #FFFFFF em cinco temas claros: uma barra de topo gritando mais alto que o conteúdo. Agora ele mora ENTRE o --bg e a --surface, nos doze, e herda matiz e croma da --surface — herdar o matiz junto é o que impede um topo rosado num tema azul, porque #FFFFFF tem matiz 0 (vermelho) por convenção, não por escolha. EXCEÇÃO DECLARADA: no alto contraste o --bg é preto puro, e não existe nada abaixo do preto. Ali --bg-profundo iguala o --bg, e é o único jeito honesto de escrever "não há degrau aqui". A escala é guardada por test/superficieEscala.test.js, que trava a RELAÇÃO — nunca os hex. Um tema novo pode ter qualquer matiz e qualquer luminância de partida, desde que a pilha dele guarde estes degraus. ───────────────────────────────────────────────────────────── */ /* O tema VERDE mora aqui, e o seletor duplo é necessário — não é enfeite: · `:root` faz dele o default de toda a aplicação; · `[data-theme="verde"]` faz com que QUALQUER elemento marcado com esse atributo receba os tokens do verde, e não os herde do tema ativo. Sem a segunda parte, a bolinha do Verde Rota no seletor de temas (um ) não casava com regra nenhuma e herdava as cores do — mudava de cor conforme o tema aplicado, e nos temas claros parecia um buraco transparente. Era o único dos 12 sem bloco próprio, por isso o único quebrado. Uma lista de seletores em vez de um bloco duplicado: zero risco de os dois conjuntos de valores divergirem com o tempo. */ :root, [data-theme="verde"]{ --bg:#0C1A15; --veu:rgba(12,26,21,0.86); --sombra-modal:0 32px 80px -24px rgba(4,9,7,0.85); --bg-profundo:#081310; --surface:#101F19; --surface-elev:#1A2E25; --surface-card:#13241D; --topo:#0F1D17; --borda:rgba(255,255,255,.10); --borda-forte:rgba(255,255,255,.19); --texto-forte:#EEF3EC; --texto:#C4D2CB; --texto-fraco:#A9BBB0; --texto-debil:#9CB0A4; --texto-invertido:#07140E; --marca:#40BE85; --marca-hover:#57D199; --marca-fraca:rgba(64,190,133,0.13); --marca-media:rgba(64,190,133,0.45); --marca-contraste:#07140E; --sucesso:#6FD79A; --sucesso-fraca:rgba(111,215,154,0.14); --sucesso-contraste:#07140E; --erro:#C24E40; --erro-fraca:rgba(194,78,64,0.14); --erro-contraste:#FFFFFF; --alerta:#D0A23C; --alerta-fraca:rgba(208,162,60,0.14); --alerta-media:rgba(208,162,60,0.40); --alerta-contraste:#201703; --info:#5AA9E6; --info-fraca:rgba(90,169,230,0.14); --info-contraste:#04121C; --area-cm:#46A883; --area-cr:#4F91A8; --area-go:#C07C92; --area-pe:#C9A24C; --area-mfc:#8B82CE; --etapa2:#5B9DE0; --etapa2-fraca:rgba(91,157,224,0.15); --etapa2-media:rgba(91,157,224,0.28); --mentor:#A78BFA; --mentor-fraca:rgba(167,139,250,0.15); --mentor-media:rgba(167,139,250,0.35); --mentor-contraste:#0D0A1A; --firme:#57C98A; --firme-halo:rgba(87,201,138,0.08); --consolidando:#D9B24C; --ponto-fraco:#D97B6C; --sem-dado:#9CB0A4; --input-fundo:var(--surface); --input-borda:#5C8A70; --edit:#7FB4C9; --edit-fraca:rgba(127,180,201,.09); --edit-media:rgba(127,180,201,.34); --edit-forte:rgba(127,180,201,.55); /* GRIFO DE TEXTO (modo estudo) — três cores com sentido, não decoração: dado-que-decide = --alerta, a-pergunta = --info, pegadinha = --erro, cada um em rgba() do PRÓPRIO hex do tema para herdar a mesma identidade que já existe nos chips/selos. Alpha mais alto nos temas ESCUROS (.30/.28/.26); nos CLAROS a mesma alpha escureceria demais o fundo sob o texto escuro — ver a nota de cada tema claro. */ --grifo-dado:rgba(208,162,60,.30); --grifo-pergunta:rgba(90,169,230,.28); --grifo-pegadinha:rgba(194,78,64,.26); /* ═══════════════════════════════════════════════════════════════════════ AS PEDRAS DA ROTA — o único lugar do produto com objeto de VOLUME. O protótipo aprovado (referencia-telas/rota-final.html) desenha cada pedra com três paradas de gradiente a 177°, uma luz na quina de cima por dentro, e uma sombra SÓLIDA de 4px na cor escura da própria peça — nunca em preto, que faz sujeira. Dois tons dão plástico; três dão material. ISSO VIVE AQUI, e não na folha da tela, porque literal em CSS de tela não repinta ao trocar de tema — e são doze temas. Uma pedra fixa em #46bf88 ficaria idêntica no claro, no sépia e no ALTO CONTRASTE, que é onde ela mais precisa mudar. Os quatro estados são os da spec §11.1, e a cor de cada um já existe como papel: feita=sucesso, vez=info, reprovada=erro, esfriou=alerta. O que se acrescenta aqui é só o RELEVO — o claro do topo, o escuro da base e o degrau da sombra. Um tema que quiser pedra chapada sobrescreve os três. */ --pedra-feita-topo:#5fd398; --pedra-feita-meio:#46bf88; --pedra-feita-base:#37a774; --pedra-feita-luz:#79e3ad; --pedra-feita-degrau:#1f7a54; --pedra-feita-texto:#03150c; --pedra-vez-topo:#7ab6ee; --pedra-vez-meio:#4d90d4; --pedra-vez-base:#3d7cc0; --pedra-vez-luz:#9fcdf7; --pedra-vez-degrau:#244f7a; --pedra-vez-texto:#ffffff; --pedra-erro-topo:#ef8079; --pedra-erro-meio:#dd5449; --pedra-erro-base:#c8443a; --pedra-erro-luz:#f59d95; --pedra-erro-degrau:#8a2a22; --pedra-erro-texto:#ffffff; --pedra-fria-topo:#e2b968; --pedra-fria-meio:#d0a23c; --pedra-fria-base:#b88f2e; --pedra-fria-luz:#efd08a; --pedra-fria-degrau:#8a6a1e; --pedra-fria-texto:#1a1204; --pedra-neutra-topo:#4b5369; --pedra-neutra-meio:#3a4157; --pedra-neutra-base:#31374a; --pedra-neutra-luz:#5a6279; --pedra-neutra-degrau:#202533; --pedra-neutra-texto:#aab3c8; /* o relevo, em partes reutilizáveis: a luz de dentro e a sombra que cai */ --pedra-brilho:inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.2); --pedra-brilho-forte:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.24); --pedra-queda:0 12px 24px -8px rgba(0,0,0,.45); --pedra-queda-vez:0 20px 40px -12px rgba(0,0,0,.55); --pedra-afunda:inset 0 1.5px 0 rgba(255,255,255,.4), 0 2px 0 rgba(0,0,0,.4); /* a pastilha (nota, "você está aqui") fica DENTRO da pedra e precisa de um fundo próprio, escuro o bastante para o texto colorido ler sobre ele */ --pastilha-fundo:rgba(18,22,33,.92); --pastilha-sombra:0 3px 10px -4px rgba(0,0,0,.85); /* a via: chão neutro, e a sombra que faz a trilha parecer pousada */ /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#484c4b; --via-andado:#5b5f5d; --via-falta:#363a39; --via-sombra:rgba(0,0,0,.4); /* A ÂNCORA — o cartão que gruda no rodapé do caminho. Ela flutua SOBRE as pedras, então precisa de fundo próprio e mais opaco que uma superfície comum: translúcida demais, o número da pedra atravessa o texto dela. */ --ancora-fundo:linear-gradient(177deg,rgba(32,38,54,.97),rgba(24,29,42,.99)); --ancora-borda:#4d5568; --ancora-sombra:0 -2px 0 rgba(255,255,255,.05), 0 18px 40px -12px rgba(0,0,0,.9); --ancora-pilula:rgba(24,29,42,.95); /* Estrutura (independe de tema) */ --sombra-1:0 1px 2px rgba(0,0,0,.30); --sombra-2:0 1px 2px rgba(0,0,0,.30), 0 20px 44px -24px rgba(0,0,0,.60); --sombra-3:0 24px 60px -20px rgba(0,0,0,.72); /* scrims de sobreposição (dimming de modal/gaveta) — mesmos em todos os temas */ --scrim:rgba(0,0,0,.5); --scrim-forte:rgba(0,0,0,.72); /* botão primário: por padrão = marca; temas claros sobrescrevem p/ verde vivo + texto escuro */ --btn-bg:var(--marca); --btn-texto:var(--marca-contraste); --btn-bg-hover:var(--marca-hover); /* RAIOS — a escala encolheu (10/14/16 → 6/9/12). Raio de 14 e 16px em cartão é assinatura de interface de 2020: o olho lê "app antigo" antes de ler o conteúdo. Os papéis não mudaram, só os valores. sm botões, pílulas, campos, itens de menu, caixas de marcação md cartões e blocos lg modais e painéis flutuantes `--raio-full` continua sendo a pílula; `50%` continua sendo círculo e não entra nesta escala — é forma, não degrau. */ --raio-sm:6px; --raio-md:9px; --raio-lg:12px; --raio-full:999px; --espaco-1:4px; --espaco-2:8px; --espaco-3:12px; --espaco-4:16px; --espaco-5:24px; --espaco-6:32px; --espaco-7:48px; --espaco-8:64px; --bp-tablet:768px; --bp-desktop:1120px; --google-azul:#4285F4; --google-verde:#34A853; --google-amarelo:#FBBC05; --google-vermelho:#EA4335; /* ═══ A PORTA — tokens exclusivos da tela de login ═══════════════════════ ⚠️ ELES MORAM AQUI PORQUE SÓ tokens.css PODE TER LITERAL. A porta é o único lugar do produto que NÃO segue o tema: ela é sempre a mesma noite, em qualquer preferência, porque quem chega ainda não tem preferência guardada. Por isso ficam no `:root` e não se repetem nos `[data-theme]`. A paleta é do protótipo aprovado `referencia-telas/login.html` (sha256 f223e40b…). Os dois ouros foram AMOSTRADOS do próprio selo — #E8C276 é o brilho da borda dourada e #A37E40 o ouro médio dela —, e o ouro é só do selo e da fumaça: se aparecer em botão ou borda, deixa de ser o selo. */ --lg-breu:#05100C; --lg-vidro:rgba(13,28,21,.72); --lg-musgo:#1C3A2C; --lg-brote:#2E6B4A; --lg-marca:#4DD97C; --lg-claro:#E9F3EC; --lg-meio:#9BB0A5; --lg-fraco:#64796E; --lg-erro:#E4796F; --lg-alerta:#E8B25C; --lg-tinta-btn:#16241D; --lg-nevoa-escura:rgba(5,16,12,.82); --lg-nevoa-ouro:rgba(232,194,118,.045); --lg-nevoa-verde:rgba(77,217,124,.045); --lg-card-borda:rgba(77,217,124,.13); --lg-card-sombra:rgba(0,0,0,.85); --lg-card-brilho:rgba(255,255,255,.045); --lg-fumaca-a:rgba(232,194,118,.2); --lg-fumaca-b:rgba(163,126,64,.16); --lg-fumaca-c:rgba(232,194,118,.13); --lg-fumaca-d:rgba(232,194,118,.1); --lg-fumaca-e:rgba(163,126,64,.14); --lg-selo-projecao:rgba(0,0,0,.86); --lg-selo-halo-perto:rgba(232,194,118,.2); --lg-selo-halo-largo:rgba(163,126,64,.4); --lg-google-sombra:rgba(0,0,0,.7); --lg-campo-fundo:rgba(5,16,12,.6); --lg-campo-fundo-foco:rgba(5,16,12,.85); --lg-secundario-hover:rgba(77,217,124,.07); --lg-aviso-ruim-fundo:rgba(228,121,111,.1); --lg-aviso-espera-fundo:rgba(232,178,92,.1); --lg-aviso-certo-fundo:rgba(77,217,124,.09); --lg-guarda-fundo:rgba(5,16,12,.55); /* ⚠️ AS DUAS PEÇAS QUE NASCERAM NO PROTÓTIPO DE 04/09/2026 (sha256 b872a3167428…): o selo menor da tela `primeiro` e o bloco dos 7 dias. Elas entram aqui pela mesma razão de todo o resto — só tokens.css pode ter cor literal, e a porta é a única tela que NÃO segue o tema. */ /* ⚠️ AS PEÇAS DO SEGUNDO FATOR, do protótipo `referencia-telas/admin-2fa.html` (sha256 caae7cf25275…): a tarja "Painel administrativo", o campo dos 6 dígitos, o quadro do QR e o alerta dos códigos de recuperação. Entram aqui pela mesma razão de todo o resto — só tokens.css pode ter cor literal. */ --lg-ouro-claro:#E8C276; --lg-tarja-fundo:rgba(232,194,118,.08); --lg-tarja-borda:rgba(232,194,118,.22); --lg-codigo-placeholder:rgba(155,176,165,.35); --lg-codigo-foco-halo:rgba(77,217,124,.14); /* ⚠️ O QR É CLARO E NÃO SEGUE O TEMA: leitor de código precisa de contraste alto e de módulo escuro sobre fundo claro. Um QR "no tema" da porta — verde sobre quase preto — é um QR que metade dos celulares não lê. */ --lg-qr-fundo:#F3F7F4; --lg-alerta-fundo:rgba(232,194,118,.07); --lg-alerta-borda:rgba(232,194,118,.24); --lg-selo-p-projecao:rgba(0,0,0,.8); --lg-selo-p-halo:rgba(232,194,118,.18); --lg-teste-fundo:rgba(77,217,124,.06); --lg-teste-borda:rgba(77,217,124,.16); --font-titulo:'Plus Jakarta Sans', system-ui, sans-serif; --font-corpo:'Inter', system-ui, sans-serif; --font-mono:'IBM Plex Mono', monospace; /* ESCALA TIPOGRÁFICA — primeira parcela. Até aqui tokens.css só tinha FAMÍLIAS: cada tela redeclarava os seus px, e "o padrão" existia por imitação, não por contrato — foi assim que Meu aprendizado divergiu sem nada acusar (auditoria de escala). Os nomes são por PAPEL, não por tamanho, para o valor poder mudar sem renomear nada. Quem ainda usa px literal continua funcionando; a migração das outras telas é incremental. */ --fs-destaque:34px; /* o número PRINCIPAL de uma tela — no máximo UM por tela. Ex.: a média na curva da Início. Fica ACIMA de --fs-kpi, que é contador de painel e aparece repetido. Se dois números disputarem este degrau na mesma tela, um deles não é o principal. */ --fs-hero:30px; /* o número principal QUANDO ELE DIVIDE A LINHA. É o mesmo papel de --fs-destaque, num degrau abaixo, e existe porque o cabeçalho do gráfico da Início virou uma linha só: ali o número convive com a pílula do delta, o rótulo e o link, e a 34px ele empurrava o rótulo para a linha de baixo em qualquer largura de tablet. Sozinho na linha, o degrau continua sendo --fs-destaque. */ --fs-kpi:24px; /* número grande de painel (.stat-value, contador de estado) */ --fs-valor:19px; /* valor destacado dentro de um cartão */ --fs-titulo-bloco:15px; /* o TÍTULO de um bloco/cartão. Era 16px e quase ninguém usava: a Início punha o título de bloco em --fs-apoio, o mesmo degrau do texto secundário — título e apoio com o mesmo tamanho é hierarquia que não existe. */ --fs-item:14.5px; /* nome de item de lista */ --fs-corpo:13.5px; --fs-apoio:12.5px; /* texto secundário, justificativa */ --fs-rotulo:11px; /* MAIÚSCULAS pequenas */ --fs-micro:9.5px; /* rótulo em maiúsculas, etiqueta de unidade, eyebrow, rótulo de grupo. ABAIXO de --fs-rotulo. É texto que se LOCALIZA, não que se lê — quem precisa ser lido em corrido não cabe aqui. */ /* Havia quatro degraus DENSOS aqui (14 · 13,5 · 10,5 · 9px). Nasceram para o cartão compactado de Meu aprendizado; a compactação foi revertida por ficar apertada demais para leitura, e nenhuma tela os usa. Token sem uso é dívida: saíram. Se um dia uma tabela densa precisar deles, voltam com um dono. */ /* DIMENSOES DO SHELL. A topbar era 64px LITERAL nas duas folhas de shell: altura desperdicada na tela mais visitada, para um titulo e um subtitulo. 56px e o valor do prototipo, e no celular sao 8px que voltam para o conteudo. A sidebar encolhe junto (248 -> 236). */ --topbar-h:56px; --sidebar-w:236px; /* aliases legados removidos — as telas usam os nomes semânticos diretos */ /* ═══ A TARJA DO CAMINHO — o nome do tema ao lado de cada pedra ═══ Texto de 11,5px sobre o `--bg`, e por isso NÃO pode herdar `--pedra-*-luz` (o brilho da pedra, que existe contra o gradiente escuro dela) nem `--firme`/`--erro` crus (que passam em texto grande e reprovam em 11,5px nos claros: 2,95:1 no light, 3,39:1 no sépia). Calibrados por tema até ≥4,75:1 contra o `--bg` real, movendo SÓ a luminância — o matiz de cada um é o do token semântico do tema, para o vocabulário continuar o mesmo. Ver docs/contraste-com-o-fundo-nao-herda-token-de-superficie.md. */ --tarja-feita:#57c98a; --tarja-erro:#cb675b; --tarja-vez:#40be85; /* 8.62 · 4.78 · 7.60 sobre #0C1A15 */ } [data-theme="dark"]{ --sombra-1:0 1px 2px rgba(0,0,0,.55); --sombra-2:0 1px 2px rgba(0,0,0,.55), 0 22px 48px -24px rgba(0,0,0,.80); --sombra-3:0 26px 64px -20px rgba(0,0,0,.88); --bg:#0C0D0F; --veu:rgba(12,13,15,0.86); --sombra-modal:0 32px 80px -24px rgba(4,5,5,0.85); --bg-profundo:#030405; --surface:#121316; --surface-elev:#222427; --surface-card:#17191C; --topo:#101114; --borda:rgba(255,255,255,.10); --borda-forte:rgba(255,255,255,.19); --texto-forte:#F3F5F7; --texto:#CDD4DC; --texto-fraco:#AAB1BA; --texto-debil:#949BA4; --texto-invertido:#05130C; --marca:#4DD98C; --marca-hover:#6FE6A6; --marca-fraca:rgba(77,217,140,0.13); --marca-media:rgba(77,217,140,0.45); --marca-contraste:#05130C; --sucesso:#5FCF8C; --sucesso-fraca:rgba(95,207,140,0.14); --sucesso-contraste:#05130C; --erro:#E0796A; --erro-fraca:rgba(224,121,106,0.14); --erro-contraste:#1A0906; --alerta:#E0B24C; --alerta-fraca:rgba(224,178,76,0.14); --alerta-media:rgba(224,178,76,0.40); --alerta-contraste:#1C1403; --info:#6BB0EC; --info-fraca:rgba(107,176,236,0.14); --info-contraste:#04121C; --area-cm:#5BB596; --area-cr:#69A6BC; --area-go:#C892AE; --area-pe:#D6B25E; --area-mfc:#A594E4; --etapa2:#6BA6E6; --etapa2-fraca:rgba(107,166,230,0.15); --etapa2-media:rgba(107,166,230,0.28); --mentor:#B79CFF; --mentor-fraca:rgba(183,156,255,0.15); --mentor-media:rgba(183,156,255,0.35); --mentor-contraste:#0D0A1A; --firme:#5FCF8C; --firme-halo:rgba(95,207,140,0.08); --consolidando:#E0B24C; --ponto-fraco:#E0796A; --sem-dado:#949BA4; --input-fundo:var(--surface); --input-borda:#3A4048; --grifo-dado:rgba(224,178,76,.30); --grifo-pergunta:rgba(107,176,236,.28); --grifo-pegadinha:rgba(224,121,106,.26); /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#454646; --via-andado:#585859; --via-falta:#333434; --via-sombra:rgba(0,0,0,.4); --tarja-feita:#5fcf8c; --tarja-erro:#e0796a; --tarja-vez:#4dd98c; /* 9.99 · 6.59 · 10.76 sobre #0C0D0F */ } [data-theme="light"]{ --edit:#43809A; --edit-fraca:rgba(67,128,154,.09); --edit-media:rgba(67,128,154,.34); --edit-forte:rgba(67,128,154,.55); --bg:#F3F4F2; --veu:rgba(243,244,242,0.86); --sombra-modal:0 32px 80px -24px rgba(85,85,85,0.85); --bg-profundo:#ECEEEA; --surface:#F9F9F9; --surface-elev:#E5E7E3; --surface-card:#FFFFFF; --topo:#F7F7F7; --borda:rgba(0,0,0,.10); --borda-forte:rgba(0,0,0,.19); --texto-forte:#14241C; --texto:#33453C; --texto-fraco:#556058; --texto-debil:#5C6760; --texto-invertido:#FFFFFF; --marca:#0E7A48; --marca-hover:#0B6B3E; --marca-fraca:rgba(14,122,72,0.13); --marca-media:rgba(14,122,72,0.45); --marca-contraste:#FFFFFF; --sucesso:#0F7E44; --sucesso-fraca:rgba(15,126,68,0.14); --sucesso-contraste:#FFFFFF; --erro:#C43D2E; --erro-fraca:rgba(196,61,46,0.14); --erro-contraste:#FFFFFF; --alerta:#8A6300; --alerta-fraca:rgba(138,99,0,0.14); --alerta-media:rgba(138,99,0,0.40); --alerta-contraste:#FFFFFF; --info:#1A6FC0; --info-fraca:rgba(26,111,192,0.14); --info-contraste:#FFFFFF; --area-cm:#2E8F6E; --area-cr:#2F7C94; --area-go:#A85A76; --area-pe:#8A6E1E; --area-mfc:#5E4CA0; --etapa2:#245FBF; --etapa2-fraca:rgba(36,95,191,0.13); --etapa2-media:rgba(36,95,191,0.28); --mentor:#6E4FD0; --mentor-fraca:rgba(110,79,208,0.15); --mentor-media:rgba(110,79,208,0.35); --mentor-contraste:#FFFFFF; --firme:#1FA35E; --firme-halo:rgba(31,163,94,0.08); --consolidando:#8A6E1E; --ponto-fraco:#C1503E; --sem-dado:#5C6760; --input-fundo:var(--surface); --input-borda:#B9C4BC; --btn-bg:#17A65B; --btn-texto:#05130C; --btn-bg-hover:#12904E; /* verde vivo em fundo claro */ /* alpha menor que nos temas escuros — sob texto ESCURO, a mesma alpha do escuro deixaria o fundo escuro demais e derrubaria o contraste do texto */ --grifo-dado:rgba(138,99,0,.16); --grifo-pergunta:rgba(26,111,192,.15); --grifo-pegadinha:rgba(196,61,46,.14); /* A PASTILHA E O RELEVO NO TEMA CLARO. No escuro a pastilha é uma placa escura com texto colorido; sobre fundo claro isso vira um borrão preto em cima da pedra. E a sombra encolhe: sombra forte sobre fundo claro lê como sujeira, não como volume. */ --pastilha-fundo:rgba(255,255,255,.94); --pastilha-sombra:0 2px 6px -2px rgba(0,0,0,.25); /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#acacac; --via-andado:#949494; --via-falta:#c6c6c5; --via-sombra:rgba(0,0,0,.07); --pedra-queda:0 10px 20px -8px rgba(0,0,0,.22); --pedra-queda-vez:0 16px 32px -12px rgba(0,0,0,.28); /* A ÂNCORA NO TEMA CLARO: no escuro ela é uma placa quase preta flutuando sobre a via; sobre fundo claro isso vira uma barra pesada cortando a tela. Superfície clara, borda discreta, e a sombra só o bastante para ela parecer acima do caminho — não para fazer buraco. */ --ancora-fundo:linear-gradient(177deg,rgba(255,255,255,.97),rgba(248,249,247,.99)); --ancora-borda:rgba(0,0,0,.16); --ancora-sombra:0 -1px 0 rgba(0,0,0,.04), 0 14px 30px -14px rgba(0,0,0,.35); --ancora-pilula:rgba(255,255,255,.95); --tarja-feita:#187c47; --tarja-erro:#c23c2e; --tarja-vez:#0e7a48; /* 4.75 · 4.77 · 4.89 sobre #F3F4F2 */ } [data-theme="sepia"]{ --edit:#43809A; --edit-fraca:rgba(67,128,154,.09); --edit-media:rgba(67,128,154,.34); --edit-forte:rgba(67,128,154,.55); --bg:#EBE2D0; --veu:rgba(235,226,208,0.86); --sombra-modal:0 32px 80px -24px rgba(82,79,73,0.85); --bg-profundo:#E6DCC8; --surface:#EEE7DB; --surface-elev:#DFD5C4; --surface-card:#F3EDE3; --topo:#ECE5D9; --borda:rgba(0,0,0,.10); --borda-forte:rgba(0,0,0,.19); --texto-forte:#33281A; --texto:#4E3F2B; --texto-fraco:#63543C; --texto-debil:#67573F; --texto-invertido:#FFFFFF; --marca:#1F7A47; --marca-hover:#1A6B3D; --marca-fraca:rgba(31,122,71,0.13); --marca-media:rgba(31,122,71,0.45); --marca-contraste:#FFFFFF; --sucesso:#147C48; --sucesso-fraca:rgba(20,124,72,0.14); --sucesso-contraste:#FFFFFF; --erro:#B23A2C; --erro-fraca:rgba(178,58,44,0.14); --erro-contraste:#FFFFFF; --alerta:#8A5E00; --alerta-fraca:rgba(138,94,0,0.14); --alerta-media:rgba(138,94,0,0.40); --alerta-contraste:#FFFFFF; --info:#1F6AA8; --info-fraca:rgba(31,106,168,0.14); --info-contraste:#FFFFFF; --area-cm:#2C7E5E; --area-cr:#2E6E86; --area-go:#94445F; --area-pe:#7E5E1A; --area-mfc:#5B4488; --etapa2:#2C63A8; --etapa2-fraca:rgba(44,99,168,0.13); --etapa2-media:rgba(44,99,168,0.28); --mentor:#5E4096; --mentor-fraca:rgba(94,64,150,0.15); --mentor-media:rgba(94,64,150,0.35); --mentor-contraste:#FFFFFF; --firme:#1F8A52; --firme-halo:rgba(31,138,82,0.08); --consolidando:#7E5E1A; --ponto-fraco:#A8432F; --sem-dado:#67573F; --input-fundo:var(--surface); --input-borda:#C2AE86; --btn-bg:#1C9A54; --btn-texto:#05130C; --btn-bg-hover:#17864A; /* verde vivo em fundo sépia */ --grifo-dado:rgba(138,94,0,.16); --grifo-pergunta:rgba(31,106,168,.15); --grifo-pegadinha:rgba(178,58,44,.14); /* A PASTILHA E O RELEVO NO TEMA CLARO. No escuro a pastilha é uma placa escura com texto colorido; sobre fundo claro isso vira um borrão preto em cima da pedra. E a sombra encolhe: sombra forte sobre fundo claro lê como sujeira, não como volume. */ --pastilha-fundo:rgba(255,255,255,.94); --pastilha-sombra:0 2px 6px -2px rgba(0,0,0,.25); /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#a19f9b; --via-andado:#8a8884; --via-falta:#bab7b2; --via-sombra:rgba(0,0,0,.07); --pedra-queda:0 10px 20px -8px rgba(0,0,0,.22); --pedra-queda-vez:0 16px 32px -12px rgba(0,0,0,.28); /* A ÂNCORA NO TEMA CLARO: no escuro ela é uma placa quase preta flutuando sobre a via; sobre fundo claro isso vira uma barra pesada cortando a tela. Superfície clara, borda discreta, e a sombra só o bastante para ela parecer acima do caminho — não para fazer buraco. */ --ancora-fundo:linear-gradient(177deg,rgba(255,255,255,.97),rgba(248,249,247,.99)); --ancora-borda:rgba(0,0,0,.16); --ancora-sombra:0 -1px 0 rgba(0,0,0,.04), 0 14px 30px -14px rgba(0,0,0,.35); --ancora-pilula:rgba(255,255,255,.95); --tarja-feita:#197042; --tarja-erro:#ae392b; --tarja-vez:#1c6f41; /* 4.76 · 4.76 · 4.80 sobre #EBE2D0 */ } [data-theme="azul_noite"]{ --bg:#0A121E; --veu:rgba(10,18,30,0.86); --sombra-modal:0 32px 80px -24px rgba(4,6,11,0.85); --bg-profundo:#030A16; --surface:#0E1727; --surface-elev:#1C2739; --surface-card:#131C2D; --topo:#0C1525; --borda:rgba(255,255,255,.10); --borda-forte:rgba(255,255,255,.19); --texto-forte:#E9F0FA; --texto:#C2D2E6; --texto-fraco:#96AECB; --texto-debil:#89A0BE; --texto-invertido:#04140C; --marca:#3CC98A; --marca-hover:#52D89A; --marca-fraca:rgba(60,201,138,0.13); --marca-media:rgba(60,201,138,0.45); --marca-contraste:#04140C; --sucesso:#37E39A; --sucesso-fraca:rgba(55,227,154,0.14); --sucesso-contraste:#04140C; --erro:#E77A66; --erro-fraca:rgba(231,122,102,0.14); --erro-contraste:#1A0906; --alerta:#E0B24C; --alerta-fraca:rgba(224,178,76,0.14); --alerta-media:rgba(224,178,76,0.40); --alerta-contraste:#1C1403; --info:#5AB0F0; --info-fraca:rgba(90,176,240,0.14); --info-contraste:#04121C; --area-cm:#4FC59A; --area-cr:#5FAFD8; --area-go:#D68FB0; --area-pe:#DDBB5C; --area-mfc:#A594EA; --etapa2:#6FB4EE; --etapa2-fraca:rgba(111,180,238,0.15); --etapa2-media:rgba(111,180,238,0.28); --mentor:#C0A6FF; --mentor-fraca:rgba(192,166,255,0.15); --mentor-media:rgba(192,166,255,0.35); --mentor-contraste:#0D0A1A; --firme:#57D19A; --firme-halo:rgba(87,209,154,0.08); --consolidando:#E0B24C; --ponto-fraco:#E77A66; --sem-dado:#89A0BE; --input-fundo:var(--surface); --input-borda:#3A5580; --grifo-dado:rgba(224,178,76,.30); --grifo-pergunta:rgba(90,176,240,.28); --grifo-pegadinha:rgba(231,122,102,.26); /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#46484b; --via-andado:#595b5e; --via-falta:#34363a; --via-sombra:rgba(0,0,0,.4); --tarja-feita:#57d19a; --tarja-erro:#e77a66; --tarja-vez:#3cc98a; /* 9.83 · 6.59 · 8.87 sobre #0A121E */ } [data-theme="ardosia"]{ --bg:#1F242A; --veu:rgba(31,36,42,0.86); --sombra-modal:0 32px 80px -24px rgba(11,13,15,0.85); --bg-profundo:#1B1F26; --surface:#23282D; --surface-elev:#2E343B; --surface-card:#272C31; --topo:#21262B; --borda:rgba(255,255,255,.10); --borda-forte:rgba(255,255,255,.19); --texto-forte:#EEF2F6; --texto:#C9D2DC; --texto-fraco:#AEBAC5; --texto-debil:#9FACB8; --texto-invertido:#06130D; --marca:#54D191; --marca-hover:#6FE0A2; --marca-fraca:rgba(84,209,145,0.13); --marca-media:rgba(84,209,145,0.45); --marca-contraste:#06130D; --sucesso:#5FD79C; --sucesso-fraca:rgba(95,215,156,0.14); --sucesso-contraste:#06130D; --erro:#E88872; --erro-fraca:rgba(232,136,114,0.14); --erro-contraste:#1A0906; --alerta:#E6B85A; --alerta-fraca:rgba(230,184,90,0.14); --alerta-media:rgba(230,184,90,0.40); --alerta-contraste:#1C1403; --info:#6FB6EE; --info-fraca:rgba(111,182,238,0.14); --info-contraste:#04121C; --area-cm:#5FBE9C; --area-cr:#6FADC4; --area-go:#D194AC; --area-pe:#DCBA66; --area-mfc:#A498E6; --etapa2:#6FA8DC; --etapa2-fraca:rgba(111,168,220,0.15); --etapa2-media:rgba(111,168,220,0.28); --mentor:#BCA4FF; --mentor-fraca:rgba(188,164,255,0.15); --mentor-media:rgba(188,164,255,0.35); --mentor-contraste:#0D0A1A; --firme:#5FCF9A; --firme-halo:rgba(95,207,154,0.08); --consolidando:#E6B85A; --ponto-fraco:#E88872; --sem-dado:#9FACB8; --input-fundo:var(--surface); --input-borda:#55626F; --grifo-dado:rgba(230,184,90,.30); --grifo-pergunta:rgba(111,182,238,.28); --grifo-pegadinha:rgba(232,136,114,.26); /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#525455; --via-andado:#666768; --via-falta:#404244; --via-sombra:rgba(0,0,0,.4); --tarja-feita:#5fcf9a; --tarja-erro:#e88872; --tarja-vez:#54d191; /* 8.09 · 6.10 · 8.11 sobre #1F242A */ } [data-theme="alto_contraste"]{ --bg:#000000; --veu:rgba(0,0,0,0.86); --sombra-modal:0 32px 80px -24px rgba(0,0,0,0.85); --bg-profundo:#000000; --surface:#080808; --surface-elev:#1D1D1D; --surface-card:#101010; --topo:#050505; --borda:rgba(255,255,255,.38); --borda-forte:rgba(255,255,255,.55); --texto-forte:#FFFFFF; --texto:#E4E4E4; --texto-fraco:#C4C4C4; --texto-debil:#AEAEAE; --texto-invertido:#000000; --marca:#33F0A0; --marca-hover:#5CFFB5; --marca-fraca:rgba(51,240,160,0.13); --marca-media:rgba(51,240,160,0.45); --marca-contraste:#000000; --sucesso:#5CFF9E; --sucesso-fraca:rgba(92,255,158,0.14); --sucesso-contraste:#000000; --erro:#FF9A85; --erro-fraca:rgba(255,154,133,0.14); --erro-contraste:#000000; --alerta:#FFD23D; --alerta-fraca:rgba(255,210,61,0.14); --alerta-media:rgba(255,210,61,0.40); --alerta-contraste:#000000; --info:#7CC4FF; --info-fraca:rgba(124,196,255,0.14); --info-contraste:#000000; --area-cm:#4DE8A6; --area-cr:#6CC0FF; --area-go:#FF9AC8; --area-pe:#FFD84D; --area-mfc:#C7A6FF; --etapa2:#5AB0FF; --etapa2-fraca:rgba(90,176,255,0.16); --etapa2-media:rgba(90,176,255,0.28); --mentor:#D0B8FF; --mentor-fraca:rgba(208,184,255,0.15); --mentor-media:rgba(208,184,255,0.35); --mentor-contraste:#0D0A1A; --firme:#5CFF9E; --firme-halo:rgba(92,255,158,0.08); --consolidando:#FFD23D; --ponto-fraco:#FF9A85; --sem-dado:#AEAEAE; --input-fundo:var(--surface); --input-borda:#8A8A8A; --grifo-dado:rgba(255,210,61,.30); --grifo-pergunta:rgba(124,196,255,.28); --grifo-pegadinha:rgba(255,154,133,.26); /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#656565; --via-andado:#7e7e7e; --via-falta:#484848; --via-sombra:rgba(0,0,0,.4); --tarja-feita:#5cff9e; --tarja-erro:#ff9a85; --tarja-vez:#33f0a0; /* 16.25 · 10.21 · 14.11 sobre #000000 */ } [data-theme="bordo"]{ --bg:#190B10; --veu:rgba(25,11,16,0.86); --sombra-modal:0 32px 80px -24px rgba(9,4,6,0.85); --bg-profundo:#0E0407; --surface:#201116; --surface-elev:#322026; --surface-card:#24171B; --topo:#1D0E13; --borda:rgba(255,255,255,.10); --borda-forte:rgba(255,255,255,.19); --texto-forte:#F6E9ED; --texto:#DEC8CF; --texto-fraco:#BFA1AB; --texto-debil:#B0929C; --texto-invertido:#06130D; --marca:#48C98C; --marca-hover:#6FE0A6; --marca-fraca:rgba(72,201,140,0.13); --marca-media:rgba(72,201,140,0.45); --marca-contraste:#06130D; --sucesso:#3AE38E; --sucesso-fraca:rgba(58,227,142,0.14); --sucesso-contraste:#06130D; --erro:#E97A72; --erro-fraca:rgba(233,122,114,0.14); --erro-contraste:#1A0906; --alerta:#E0B24C; --alerta-fraca:rgba(224,178,76,0.14); --alerta-media:rgba(224,178,76,0.40); --alerta-contraste:#1C1403; --info:#6FB2EE; --info-fraca:rgba(111,178,238,0.14); --info-contraste:#04121C; --area-cm:#54BE96; --area-cr:#64A6C0; --area-go:#D98FAC; --area-pe:#DDBA5C; --area-mfc:#B196E4; --etapa2:#6BA6DC; --etapa2-fraca:rgba(107,166,220,0.15); --etapa2-media:rgba(107,166,220,0.28); --mentor:#C6A2FF; --mentor-fraca:rgba(198,162,255,0.15); --mentor-media:rgba(198,162,255,0.35); --mentor-contraste:#0D0A1A; --firme:#57CF96; --firme-halo:rgba(87,207,150,0.08); --consolidando:#E0B24C; --ponto-fraco:#E97A72; --sem-dado:#B0929C; --input-fundo:var(--surface); --input-borda:#6A3A47; --grifo-dado:rgba(224,178,76,.30); --grifo-pergunta:rgba(111,178,238,.28); --grifo-pegadinha:rgba(233,122,114,.26); /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#4a4647; --via-andado:#5c595a; --via-falta:#383435; --via-sombra:rgba(0,0,0,.4); --tarja-feita:#57cf96; --tarja-erro:#e97a72; --tarja-vez:#48c98c; /* 9.82 · 6.83 · 9.13 sobre #190B10 */ } /* ROSA (claro) — fundo rosé claro, marca ROSA-BERRY, texto escuro (base no Light). Sobre fundo claro colorido o violeta do Mentor perde presença, então ele é ESCURO e SATURADO (indigo-violeta, matiz ~243°) e fica a 92° da marca (~335°): marca×mentor ΔE ≈ 80. As 5 áreas são mais escuras/saturadas que no escuro para não sumir no claro (ΔE mín 38). Contrastes AA. */ [data-theme="rosa"]{ --edit:#43809A; --edit-fraca:rgba(67,128,154,.09); --edit-media:rgba(67,128,154,.34); --edit-forte:rgba(67,128,154,.55); --bg:#FDF0F6; --veu:rgba(253,240,246,0.86); --sombra-modal:0 32px 80px -24px rgba(89,84,86,0.85); --bg-profundo:#FCE8F1; --surface:#FDF8FA; --surface-elev:#EFE3E8; --surface-card:#FFFFFF; --topo:#FAF5F7; --borda:rgba(0,0,0,.10); --borda-forte:rgba(0,0,0,.19); --texto-forte:#2C1420; --texto:#4C2E3A; --texto-fraco:#6E4C59; --texto-debil:#6A4854; --texto-invertido:#FFFFFF; --marca:#C21E63; --marca-hover:#A81854; --marca-fraca:rgba(194,30,99,0.12); --marca-media:rgba(194,30,99,0.45); --marca-contraste:#FFFFFF; --sucesso:#0F7E44; --sucesso-fraca:rgba(15,126,68,0.13); --sucesso-contraste:#FFFFFF; --erro:#C43D2E; --erro-fraca:rgba(196,61,46,0.13); --erro-contraste:#FFFFFF; --alerta:#96690B; --alerta-fraca:rgba(150,105,11,0.14); --alerta-media:rgba(150,105,11,0.40); --alerta-contraste:#FFFFFF; --info:#1A6FC0; --info-fraca:rgba(26,111,192,0.13); --info-contraste:#FFFFFF; --area-cm:#1F8F66; --area-cr:#2A7C94; --area-go:#9A3F86; --area-pe:#8A6E1E; --area-mfc:#6E58CE; --etapa2:#245FBF; --etapa2-fraca:rgba(36,95,191,0.12); --etapa2-media:rgba(36,95,191,0.28); --mentor:#4038CC; --mentor-fraca:rgba(64,56,204,0.13); --mentor-media:rgba(64,56,204,0.35); --mentor-contraste:#FFFFFF; --firme:#1FA35E; --firme-halo:rgba(31,163,94,0.08); --consolidando:#8A6E1E; --ponto-fraco:#C1503E; --sem-dado:#6A4854; --input-fundo:var(--surface); --input-borda:#DDB3C6; --grifo-dado:rgba(150,105,11,.16); --grifo-pergunta:rgba(26,111,192,.15); --grifo-pegadinha:rgba(196,61,46,.14); /* A PASTILHA E O RELEVO NO TEMA CLARO. No escuro a pastilha é uma placa escura com texto colorido; sobre fundo claro isso vira um borrão preto em cima da pedra. E a sombra encolhe: sombra forte sobre fundo claro lê como sujeira, não como volume. */ --pastilha-fundo:rgba(255,255,255,.94); --pastilha-sombra:0 2px 6px -2px rgba(0,0,0,.25); /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#aeabad; --via-andado:#969394; --via-falta:#c8c5c6; --via-sombra:rgba(0,0,0,.07); --pedra-queda:0 10px 20px -8px rgba(0,0,0,.22); --pedra-queda-vez:0 16px 32px -12px rgba(0,0,0,.28); /* A ÂNCORA NO TEMA CLARO: no escuro ela é uma placa quase preta flutuando sobre a via; sobre fundo claro isso vira uma barra pesada cortando a tela. Superfície clara, borda discreta, e a sombra só o bastante para ela parecer acima do caminho — não para fazer buraco. */ --ancora-fundo:linear-gradient(177deg,rgba(255,255,255,.97),rgba(248,249,247,.99)); --ancora-borda:rgba(0,0,0,.16); --ancora-sombra:0 -1px 0 rgba(0,0,0,.04), 0 14px 30px -14px rgba(0,0,0,.35); --ancora-pilula:rgba(255,255,255,.95); --tarja-feita:#177a47; --tarja-erro:#c23c2e; --tarja-vez:#c21e63; /* 4.84 · 4.76 · 5.18 sobre #FDF0F6 */ } /* LARANJA (claro) — fundo creme-quente, marca LARANJA-QUEIMADO, texto escuro. O âmbar de pendência sobre claro tende a ficar ilegível E concorre com a marca laranja. Resolvido dos dois lados ao mesmo tempo: o ALERTA vira um OURO-OLIVA ESCURO (matiz ~52°, luminância baixa) — escuro o bastante para ler no claro (alerta/card 5.4 AA) e separado da marca laranja (~24°) por ΔE ≈ 42. A área "pe", que seria dourada, foi para o lima-oliva escuro para não colidir com esse âmbar. As 5 áreas com ΔE mín 36. Contrastes AA. */ [data-theme="laranja"]{ --edit:#43809A; --edit-fraca:rgba(67,128,154,.09); --edit-media:rgba(67,128,154,.34); --edit-forte:rgba(67,128,154,.55); --bg:#FBF2E9; --veu:rgba(251,242,233,0.86); --sombra-modal:0 32px 80px -24px rgba(88,85,82,0.85); --bg-profundo:#FDEADB; --surface:#FDF8F4; --surface-elev:#F0E4DB; --surface-card:#FFFFFF; --topo:#FBF6F2; --borda:rgba(0,0,0,.10); --borda-forte:rgba(0,0,0,.19); --texto-forte:#2A1808; --texto:#4A3320; --texto-fraco:#6B4E30; --texto-debil:#684A2E; --texto-invertido:#FFFFFF; --marca:#B24D0B; --marca-hover:#984209; --marca-fraca:rgba(178,77,11,0.12); --marca-media:rgba(178,77,11,0.45); --marca-contraste:#FFFFFF; --sucesso:#0F7E44; --sucesso-fraca:rgba(15,126,68,0.13); --sucesso-contraste:#FFFFFF; --erro:#C43D2E; --erro-fraca:rgba(196,61,46,0.13); --erro-contraste:#FFFFFF; --alerta:#7A6A00; --alerta-fraca:rgba(122,106,0,0.15); --alerta-media:rgba(122,106,0,0.40); --alerta-contraste:#FFFFFF; --info:#1A6FC0; --info-fraca:rgba(26,111,192,0.13); --info-contraste:#FFFFFF; --area-cm:#1F8F66; --area-cr:#2A7C94; --area-go:#A8446E; --area-pe:#5F7A1E; --area-mfc:#5E4CA0; --etapa2:#245FBF; --etapa2-fraca:rgba(36,95,191,0.12); --etapa2-media:rgba(36,95,191,0.28); --mentor:#6A45C8; --mentor-fraca:rgba(106,69,200,0.13); --mentor-media:rgba(106,69,200,0.35); --mentor-contraste:#FFFFFF; --firme:#1FA35E; --firme-halo:rgba(31,163,94,0.08); --consolidando:#7A6A00; --ponto-fraco:#C1503E; --sem-dado:#684A2E; --input-fundo:var(--surface); --input-borda:#E4C39F; --grifo-dado:rgba(122,106,0,.16); --grifo-pergunta:rgba(26,111,192,.15); --grifo-pegadinha:rgba(196,61,46,.14); /* A PASTILHA E O RELEVO NO TEMA CLARO. No escuro a pastilha é uma placa escura com texto colorido; sobre fundo claro isso vira um borrão preto em cima da pedra. E a sombra encolhe: sombra forte sobre fundo claro lê como sujeira, não como volume. */ --pastilha-fundo:rgba(255,255,255,.94); --pastilha-sombra:0 2px 6px -2px rgba(0,0,0,.25); /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#aeacaa; --via-andado:#959392; --via-falta:#c8c5c3; --via-sombra:rgba(0,0,0,.07); --pedra-queda:0 10px 20px -8px rgba(0,0,0,.22); --pedra-queda-vez:0 16px 32px -12px rgba(0,0,0,.28); /* A ÂNCORA NO TEMA CLARO: no escuro ela é uma placa quase preta flutuando sobre a via; sobre fundo claro isso vira uma barra pesada cortando a tela. Superfície clara, borda discreta, e a sombra só o bastante para ela parecer acima do caminho — não para fazer buraco. */ --ancora-fundo:linear-gradient(177deg,rgba(255,255,255,.97),rgba(248,249,247,.99)); --ancora-borda:rgba(0,0,0,.16); --ancora-sombra:0 -1px 0 rgba(0,0,0,.04), 0 14px 30px -14px rgba(0,0,0,.35); --ancora-pilula:rgba(255,255,255,.95); --tarja-feita:#177a47; --tarja-erro:#c23c2e; --tarja-vez:#b24d0b; /* 4.84 · 4.76 · 4.79 sobre #FBF2E9 */ } /* AZUL PASTEL (claro) — fundo azul quase branco, superfícies levemente mais saturadas, cor forte só na marca e nas ações. MARCA = AZUL-PETRÓLEO (#0B6480, matiz 239°), não um azul-royal. Motivo medido: com marca em azul-royal (~278°) NENHUM violeta alcança os 90° de matiz exigidos — violeta é vizinho do azul no círculo, o máximo era 40°. Puxando a marca para o petróleo e o MENTOR para o magenta-violeta (#A32189, 336°) chega-se a 97°. É o mesmo recurso que o tema rosa já usa (lá o mentor virou índigo). Áreas: ΔE mín 47. Todos os pares críticos em AA. */ [data-theme="azul_pastel"]{ --edit:#43809A; --edit-fraca:rgba(67,128,154,.09); --edit-media:rgba(67,128,154,.34); --edit-forte:rgba(67,128,154,.55); --bg:#EFF4FA; --veu:rgba(239,244,250,0.86); --sombra-modal:0 32px 80px -24px rgba(84,85,88,0.85); --bg-profundo:#E6EEF9; --surface:#F7F9FC; --surface-elev:#E2E7EE; --surface-card:#FFFFFF; --topo:#F5F7FA; --borda:rgba(0,0,0,.10); --borda-forte:rgba(0,0,0,.19); --texto-forte:#12202F; --texto:#2C3F53; --texto-fraco:#4E6377; --texto-debil:#4C6076; --texto-invertido:#FFFFFF; --marca:#0B6480; --marca-hover:#094F66; --marca-fraca:rgba(11,100,128,0.12); --marca-media:rgba(11,100,128,0.45); --marca-contraste:#FFFFFF; --sucesso:#0F7E44; --sucesso-fraca:rgba(15,126,68,0.13); --sucesso-contraste:#FFFFFF; --erro:#C43D2E; --erro-fraca:rgba(196,61,46,0.13); --erro-contraste:#FFFFFF; --alerta:#8A6300; --alerta-fraca:rgba(138,99,0,0.14); --alerta-media:rgba(138,99,0,0.40); --alerta-contraste:#FFFFFF; --info:#1A6FC0; --info-fraca:rgba(26,111,192,0.13); --info-contraste:#FFFFFF; --area-cm:#16724F; --area-cr:#2A6E94; --area-go:#A8446E; --area-pe:#8A6E1E; --area-mfc:#6A45C8; --etapa2:#245FBF; --etapa2-fraca:rgba(36,95,191,0.12); --etapa2-media:rgba(36,95,191,0.28); --mentor:#A32189; --mentor-fraca:rgba(163,33,137,0.12); --mentor-media:rgba(163,33,137,0.35); --mentor-contraste:#FFFFFF; --firme:#158043; --firme-halo:rgba(21,128,67,0.08); --consolidando:#8A6E1E; --ponto-fraco:#C1503E; --sem-dado:#4C6076; --input-fundo:var(--surface); --input-borda:#B4C8E0; --grifo-dado:rgba(138,99,0,.16); --grifo-pergunta:rgba(26,111,192,.15); --grifo-pegadinha:rgba(196,61,46,.14); /* A PASTILHA E O RELEVO NO TEMA CLARO. No escuro a pastilha é uma placa escura com texto colorido; sobre fundo claro isso vira um borrão preto em cima da pedra. E a sombra encolhe: sombra forte sobre fundo claro lê como sujeira, não como volume. */ --pastilha-fundo:rgba(255,255,255,.94); --pastilha-sombra:0 2px 6px -2px rgba(0,0,0,.25); /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#abacae; --via-andado:#939495; --via-falta:#c4c6c8; --via-sombra:rgba(0,0,0,.07); --pedra-queda:0 10px 20px -8px rgba(0,0,0,.22); --pedra-queda-vez:0 16px 32px -12px rgba(0,0,0,.28); /* A ÂNCORA NO TEMA CLARO: no escuro ela é uma placa quase preta flutuando sobre a via; sobre fundo claro isso vira uma barra pesada cortando a tela. Superfície clara, borda discreta, e a sombra só o bastante para ela parecer acima do caminho — não para fazer buraco. */ --ancora-fundo:linear-gradient(177deg,rgba(255,255,255,.97),rgba(248,249,247,.99)); --ancora-borda:rgba(0,0,0,.16); --ancora-sombra:0 -1px 0 rgba(0,0,0,.04), 0 14px 30px -14px rgba(0,0,0,.35); --ancora-pilula:rgba(255,255,255,.95); --tarja-feita:#147c41; --tarja-erro:#c23c2e; --tarja-vez:#0b6480; /* 4.75 · 4.76 · 6.03 sobre #EFF4FA */ } /* VERDE PASTEL (claro) — fundo verde quase branco, mesma lógica. MARCA = VERDE-OLIVA/LIMA (#4F7A0F, matiz 123°), NÃO o verde-marca do produto (#0E7A48, matiz 154°). Motivo: o produto já é verde; um esmeralda aqui deixaria o tema indistinguível. O deslocamento para o amarelo dá ΔE 30 e 31° de matiz de diferença — mesmo limiar que o produto exige entre duas áreas médicas. O MENTOR fica no violeta clássico (#8A2BB0), a 164° da marca. Áreas: ΔE mín 47. AA. */ [data-theme="verde_pastel"]{ --edit:#43809A; --edit-fraca:rgba(67,128,154,.09); --edit-media:rgba(67,128,154,.34); --edit-forte:rgba(67,128,154,.55); --bg:#EEF5F1; --veu:rgba(238,245,241,0.86); --sombra-modal:0 32px 80px -24px rgba(83,86,84,0.85); --bg-profundo:#E5F0E9; --surface:#F7FAF8; --surface-elev:#E1E8E4; --surface-card:#FFFFFF; --topo:#F4F7F5; --borda:rgba(0,0,0,.10); --borda-forte:rgba(0,0,0,.19); --texto-forte:#122318; --texto:#2C4234; --texto-fraco:#4E6557; --texto-debil:#4C6355; --texto-invertido:#FFFFFF; --marca:#4F7A0F; --marca-hover:#41660B; --marca-fraca:rgba(79,122,15,0.13); --marca-media:rgba(79,122,15,0.45); --marca-contraste:#FFFFFF; --sucesso:#0F7E44; --sucesso-fraca:rgba(15,126,68,0.13); --sucesso-contraste:#FFFFFF; --erro:#C43D2E; --erro-fraca:rgba(196,61,46,0.13); --erro-contraste:#FFFFFF; --alerta:#8A6300; --alerta-fraca:rgba(138,99,0,0.14); --alerta-media:rgba(138,99,0,0.40); --alerta-contraste:#FFFFFF; --info:#1A6FC0; --info-fraca:rgba(26,111,192,0.13); --info-contraste:#FFFFFF; --area-cm:#16724F; --area-cr:#2A6E94; --area-go:#A8446E; --area-pe:#8A6E1E; --area-mfc:#6A45C8; --etapa2:#245FBF; --etapa2-fraca:rgba(36,95,191,0.12); --etapa2-media:rgba(36,95,191,0.28); --mentor:#8A2BB0; --mentor-fraca:rgba(138,43,176,0.12); --mentor-media:rgba(138,43,176,0.35); --mentor-contraste:#FFFFFF; --firme:#158043; --firme-halo:rgba(21,128,67,0.08); --consolidando:#8A6E1E; --ponto-fraco:#C1503E; --sem-dado:#4C6355; --input-fundo:var(--surface); --input-borda:#B4D2BF; --grifo-dado:rgba(138,99,0,.16); --grifo-pergunta:rgba(26,111,192,.15); --grifo-pegadinha:rgba(196,61,46,.14); /* A PASTILHA E O RELEVO NO TEMA CLARO. No escuro a pastilha é uma placa escura com texto colorido; sobre fundo claro isso vira um borrão preto em cima da pedra. E a sombra encolhe: sombra forte sobre fundo claro lê como sujeira, não como volume. */ --pastilha-fundo:rgba(255,255,255,.94); --pastilha-sombra:0 2px 6px -2px rgba(0,0,0,.25); /* A VIA — tokens PRÓPRIOS, calibrados contra o --bg deste tema. Ver a nota grande no fim do arquivo: a via NÃO pode herdar token de superfície. */ --via-leito:#abacab; --via-andado:#939493; --via-falta:#c4c6c5; --via-sombra:rgba(0,0,0,.07); --pedra-queda:0 10px 20px -8px rgba(0,0,0,.22); --pedra-queda-vez:0 16px 32px -12px rgba(0,0,0,.28); /* A ÂNCORA NO TEMA CLARO: no escuro ela é uma placa quase preta flutuando sobre a via; sobre fundo claro isso vira uma barra pesada cortando a tela. Superfície clara, borda discreta, e a sombra só o bastante para ela parecer acima do caminho — não para fazer buraco. */ --ancora-fundo:linear-gradient(177deg,rgba(255,255,255,.97),rgba(248,249,247,.99)); --ancora-borda:rgba(0,0,0,.16); --ancora-sombra:0 -1px 0 rgba(0,0,0,.04), 0 14px 30px -14px rgba(0,0,0,.35); --ancora-pilula:rgba(255,255,255,.95); --tarja-feita:#147b40; --tarja-erro:#c23c2e; --tarja-vez:#4d780f; /* 4.82 · 4.76 · 4.75 sobre #EEF5F1 */ } /* ═══════════ AMOSTRAS DO SELETOR DE TEMA ═══════════ A bolinha que ILUSTRA cada tema no seletor. Doze declarações EXPLÍCITAS e ISOLADAS, uma por tema, com valor literal — sem var(), sem herança, sem fallback, sem cascata. Nenhuma delas pode mudar de cor conforme o tema aplicado, porque não há nada para resolver em tempo de execução. POR QUE NÃO USAR --marca (a tentativa anterior): 9 dos 12 temas têm marca VERDE — verde, dark, light, sepia, azul_noite, ardosia, alto_contraste, bordo e verde_pastel. A bolinha mostrava fielmente o --marca, e o resultado eram nove círculos verdes: azul_noite × bordô a ΔE 2,5, claro × sépia a ΔE 2,2. O seletor não estava quebrado; a FONTE da cor é que não identificava o tema. POR QUE NÃO USAR --bg: os fundos dos seis temas escuros são todos quase pretos, e os dos seis claros quase brancos — 16 pares indistinguíveis. Cada amostra é a cor pela qual o aluno RECONHECE aquele tema, ajustada em luminosidade só o bastante para as doze se separarem (ΔE mínimo 21,1 entre quaisquer duas). É uma cor de INTERFACE do seletor, deliberadamente desacoplada dos tokens do tema: mudar uma amostra aqui não altera tema nenhum, e mudar um tema não mexe na amostra. O aro fino de .ts-bolha garante que a amostra clara não suma no painel claro, e a escura no painel escuro. */ .ts-bolha[data-theme="verde"] { background:#40BE85; } /* o verde da marca Rota */ .ts-bolha[data-theme="dark"] { background:#3E434B; } /* grafite neutro */ .ts-bolha[data-theme="light"] { background:#F2F4F0; } /* branco-neutro */ .ts-bolha[data-theme="sepia"] { background:#E3D2AF; } /* bege de papel envelhecido */ .ts-bolha[data-theme="azul_noite"] { background:#1E3A6B; } /* azul-noite */ .ts-bolha[data-theme="ardosia"] { background:#7E8E9C; } /* cinza-ardósia */ .ts-bolha[data-theme="alto_contraste"]{ background:#000000; } /* preto puro */ .ts-bolha[data-theme="bordo"] { background:#7A2740; } /* vinho */ .ts-bolha[data-theme="rosa"] { background:#C21E63; } /* rosa-berry */ .ts-bolha[data-theme="laranja"] { background:#B24D0B; } /* laranja-queimado */ .ts-bolha[data-theme="azul_pastel"] { background:#0B6480; } /* azul-petróleo */ .ts-bolha[data-theme="verde_pastel"] { background:#4F7A0F; } /* verde-oliva */