/* --------------------------------------------------------------------- LINHAS ADICIONADAS (Pacotes 06 e 07) — única diferença em relação ao arquivo original. O resto é idêntico, byte por byte. aki_fontes.css declara os @font-face de Inter e Poppins. aki_formularios.css faz button/input/select/textarea herdarem a fonte (sem ele, 21 controles ficam em Arial/monospace). Por que AQUI: aki_tokens.css é o PRIMEIRO CSS do header.php (linha 226), e @import no topo carrega antes de tudo. Assim as 17 páginas que incluem header.php são cobertas sem editar header.php. A ORDEM IMPORTA: aki_formularios.css usa os tokens (--alvo-toque, --texto-terciario, --lilas-principal) definidos mais abaixo neste arquivo. Como todos têm valor de fallback no próprio var(), funciona de qualquer forma — mas mantenha os imports nesta ordem. NÃO REMOVA estas linhas. @import tem que ser a primeira coisa do arquivo (só comentário pode vir antes). --------------------------------------------------------------------- */ @import url('aki_fontes.css'); @import url('aki_formularios.css'); /* ===================================================================== AprovAKI — assets/css/aki_tokens.css (NOVO · Pacote de Segurança 01) ARQUIVO NOVO. Não substitui nada. POR QUE ELE EXISTE (achado ALTO da auditoria): O 02_ESPEC_TECNICA.md define um design system com tokens (--lilas-principal, --cinza-fundo, --texto-secundario etc.). A auditoria confirmou: NENHUM arquivo CSS do projeto definia --lilas-principal. Zero definições. Mas 5 arquivos JÁ USAM esses tokens, sempre no formato var(--lilas-principal, #7E5BEF) Ou seja: todo uso estava caindo no valor de fallback. O token nunca existiu. Na prática, o design system era só documentação — cada arquivo repetia o hex na mão, e trocar a cor primária exigiria editar dezenas de arquivos. Este arquivo passa a DEFINIR os tokens de verdade, em :root. Efeito imediato: os var() que já existem no projeto param de usar fallback e começam a ler o valor central. A partir de agora, mudar uma cor do site é mudar uma linha aqui. ORDEM DE CARREGAMENTO É OBRIGATÓRIA: Este arquivo tem que ser o PRIMEIRO CSS do , antes de todos os outros. Se vier depois, não muda nada de errado — mas também não ajuda quem já leu a variável. NÃO REMOVE NADA. Não altera regra existente. Só declara variáveis. Por isso é seguro: não pode quebrar layout. Valores retirados do 02_ESPEC_TECNICA.md e das decisões oficiais D1 (mascote AKI) e do seed da tabela patente_faixa. ===================================================================== */ :root { /* --------------------------------------------------------------- 1) MARCA — paleta lilás/cinza/branco (02_ESPEC_TECNICA) --------------------------------------------------------------- */ --lilas-principal: #7E5BEF; --lilas-escuro: #5B3FD0; --lilas-claro: #A78BFA; --lilas-suave: #EDE7FE; /* fundo de destaque leve */ /* --------------------------------------------------------------- 2) NEUTROS --------------------------------------------------------------- */ --cinza-fundo: #F4F4F7; --branco: #FFFFFF; --borda-suave: #E4E4EC; --texto-principal: #1F1F2E; --texto-secundario: #5A5A72; --texto-terciario: #8A8AA0; /* --------------------------------------------------------------- 3) ESTADO / FEEDBACK --------------------------------------------------------------- */ --sucesso: #3DBE8B; --sucesso-fundo: #E6F7F0; --erro: #E5484D; --erro-fundo: #FDECEC; --alerta: #F4C24A; --alerta-fundo: #FEF6E3; --info: #3B82F6; --info-fundo: #EAF2FE; /* --------------------------------------------------------------- 4) MASCOTE AKI — decisão oficial D1 (não reabrir) --------------------------------------------------------------- */ --aki-corpo: #4B3CB8; --aki-corpo-escuro: #372890; --aki-corpo-claro: #7A6BE8; --aki-bico: #F4C24A; /* --------------------------------------------------------------- 5) PATENTES — valores IGUAIS ao seed da tabela patente_faixa. IMPORTANTE: a auditoria encontrou divergência entre o CSS e o banco em 3 das 7 patentes. O banco é a fonte de verdade (Princípio 1). Os valores abaixo são os do banco: bronze #B8794A (o CSS usava #c98a3c) prata #AEB4C2 (o CSS usava #7b8aa1) ouro #F4C24A (confere) esmeralda #3DBE8B (confere) rubi #E5484D (confere) diamante #6FD5FF (confere) alexandrita #7A6BE8 (o CSS usava #7c3aed) Este arquivo apenas DISPONIBILIZA os valores corretos como token. Ele NÃO sobrescreve o CSS do anel — trocar o anel para usar estes tokens é passo separado, para não mexer no visual sem você ver antes. --------------------------------------------------------------- */ --pt-bronze: #B8794A; --pt-prata: #AEB4C2; --pt-ouro: #F4C24A; --pt-esmeralda: #3DBE8B; --pt-rubi: #E5484D; --pt-diamante: #6FD5FF; --pt-alexandrita: #7A6BE8; /* --------------------------------------------------------------- 6) TIPOGRAFIA — escala com PISO DE LEGIBILIDADE A auditoria contou 635 declarações font-size no projeto, das quais 225 (35%) estavam abaixo de 12px — a mais comum sendo 0.62rem (~9.9px). Para aluno de 13 a 17 anos lendo questão no celular, isso é pequeno demais. Referência WCAG e prática de mercado: corpo 16px, apoio 14px, nunca menos de 12px para texto legível. O --fonte-minima existe para você usar em vez de valores como 0.62rem quando for ajustando as telas. --------------------------------------------------------------- */ --fonte-familia: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --fonte-titulo: 'Poppins', var(--fonte-familia); --fonte-minima: 0.75rem; /* 12px — piso absoluto */ --fonte-apoio: 0.875rem; /* 14px — legenda, meta */ --fonte-corpo: 1rem; /* 16px — texto padrão */ --fonte-destaque: 1.125rem; /* 18px */ --fonte-titulo-sm: 1.25rem; /* 20px */ --fonte-titulo-md: 1.5rem; /* 24px */ --fonte-titulo-lg: 2rem; /* 32px */ --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-forte: 700; --altura-linha: 1.5; --altura-linha-apertada: 1.25; /* --------------------------------------------------------------- 7) ESPAÇAMENTO — escala de 4px --------------------------------------------------------------- */ --esp-1: 0.25rem; /* 4px */ --esp-2: 0.5rem; /* 8px */ --esp-3: 0.75rem; /* 12px */ --esp-4: 1rem; /* 16px */ --esp-5: 1.25rem; /* 20px */ --esp-6: 1.5rem; /* 24px */ --esp-8: 2rem; /* 32px */ --esp-10: 2.5rem; /* 40px */ --esp-12: 3rem; /* 48px */ /* --------------------------------------------------------------- 8) RAIO E SOMBRA --------------------------------------------------------------- */ --raio-sm: 8px; --raio-md: 12px; --raio-lg: 16px; --raio-xl: 24px; --raio-full: 999px; --sombra-sm: 0 1px 2px rgba(31, 31, 46, 0.06); --sombra-md: 0 4px 12px rgba(31, 31, 46, 0.08); --sombra-lg: 0 8px 24px rgba(31, 31, 46, 0.12); /* --------------------------------------------------------------- 9) ALVO DE TOQUE — mínimo 44px (padrão de acessibilidade para dedo em tela, e o público é mobile-first em 360px) --------------------------------------------------------------- */ --alvo-toque: 44px; /* --------------------------------------------------------------- 10) CAMADAS (z-index) — evita a guerra de valores aleatórios --------------------------------------------------------------- */ --z-base: 1; --z-cabecalho: 100; --z-dropdown: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; } /* ===================================================================== ACESSIBILIDADE — prefers-reduced-motion A §4.4 do 02_ESPEC_TECNICA torna isso OBRIGATÓRIO, e a auditoria confirmou que aki_patente_anel_v17.css — justamente o arquivo do elemento mais animado do produto — não tinha nenhuma regra. Aqui aplicamos a proteção de forma global: quem configurou o sistema para reduzir movimento (comum em quem tem enxaqueca, vertigem ou sensibilidade vestibular) para de receber animação. Usa !important porque o projeto tem 2036 !important espalhados e sem isso a regra perderia a disputa de especificidade. ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }