/* ============================================================ INSTITUTO CRIANÇAS DE FUTURO — MARCA V1 Tokens do Documento Mestre de Implementação (Piloto V1) e da documentação visual de 2026-07-31. ATENÇÃO — ESTE É UM SISTEMA NOVO, NÃO UMA EVOLUÇÃO DO ANTERIOR. Substitui o "Sistema ICF" (Poppins, navy #0B2348, monograma icf), que foi extraído da /bio aprovada em 30/07 e viveu um dia. Mudaram AS CINCO CORES, AS DUAS FONTES E O SÍMBOLO. As páginas /bio e /instituto/matriculas ainda estão no sistema anterior e ficam de outra marca até serem migradas — está registrado como pendência, não como esquecimento. Fonte da verdade do conteúdo: content/institutional.json ============================================================ */ :root { /* ---------- MARCA ---------- */ --navy: #0D1B3D; /* autoridade: título, texto, fundo institucional */ --teal: #14B8A6; /* ação, orientação, clareza */ --yellow: #F2C94C; /* descoberta, energia, acento de atenção */ --coral: #FF6B5B; /* crescimento, movimento, destaque complementar */ --off-white: #F2EDE6; /* fundo acolhedor, área de respiro */ /* ---------- NEUTROS ---------- */ --white: #FFFFFF; --background: #FAFAF8; --surface: #FFFFFF; --surface-soft: #F6F7F9; --border: #DDE3EA; --txt-primary: #0D1B3D; --txt-secondary: #475569; --txt-muted: #64748B; /* ---------- ESTADO ---------- */ --success: #15803D; --error: #B91C1C; --focus: #2F6FD9; /* ---------- FUNDOS DE SEÇÃO ---------- Definidos por seção no documento mestre e INTENSIFICADOS em 2026-07-31: os valores originais (#F6FBFA, #FFF9F5, #F7F6FC) eram tão lavados que não se distinguiam do branco na tela. A cor estava no código e não chegava no olho. Agora são o acento da seção a 12% sobre branco — o suficiente para cada jornada ter identidade própria ao rolar, longe de virar faixa colorida. Contraste conferido: navy acima de 14:1 e texto secundário acima de 6,4:1 nos três. */ --bg-kids: #E3F6F4; /* teal 12% */ --bg-teen: #FFEDEB; /* coral 12% */ --bg-family: #EDEBF5; /* violeta 12% — a Área da Família é a única jornada sem acento próprio na marca */ --bg-footer: #08132D; /* ---------- TIPOGRAFIA ---------- Sora carrega hierarquia e impacto. Montserrat carrega leitura. Nenhuma das duas pode ser usada para redigitar a logo — a assinatura entra sempre pelos SVG do kit. */ --font-head: 'Sora', system-ui, -apple-system, sans-serif; --font-body: 'Montserrat', system-ui, -apple-system, sans-serif; /* Escala fluida entre o valor mobile e o desktop do documento, para que o tablet não fique num degrau. Ex.: h1 vai de 40px a 56px. */ --fs-display: clamp(2.75rem, 2.29rem + 1.96vw, 4rem); /* 44 → 64 */ --fs-h1: clamp(2.5rem, 2.15rem + 1.50vw, 3.5rem); /* 40 → 56 */ --fs-h2: clamp(2rem, 1.74rem + 1.13vw, 2.75rem); /* 32 → 44 */ --fs-h3: clamp(1.5rem, 1.41rem + 0.38vw, 1.75rem); /* 24 → 28 */ --fs-h4: 1.25rem; /* 20 */ --fs-body-lg: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem); /* 18 → 20 */ --fs-body: clamp(1rem, 0.98rem + 0.09vw, 1.0625rem); /* 16 → 17 */ --fs-small: 0.875rem; /* 14 */ --fs-button: 0.9375rem; /* 15 */ --fs-label: 0.8125rem; /* 13 */ --lh-display: 1.05; /* documentação visual: títulos grandes em 1.05 */ --lh-title: 1.15; --lh-body: 1.6; --ls-display: -0.03em; --ls-title: -0.02em; /* ---------- ESPAÇAMENTO ---------- Escala do §8 do documento mestre. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 72px; --s-12: 80px; --s-13: 96px; --s-14: 112px; --s-15: 128px; /* Respiro entre seções: 72 no mobile, 88 no tablet, 112 no desktop. */ --sec-gap: clamp(4.5rem, 3.2rem + 5.6vw, 7rem); /* ---------- LAYOUT ---------- */ --container: 1200px; --container-wide: 1280px; --container-text: 820px; /* largura de leitura do §15 e do §29 */ --gutter: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); /* 20 → 32 */ /* ---------- RAIO ---------- */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-btn: 12px; /* §10: botão tem raio próprio, não é pílula */ --r-pill: 999px; --r-circle: 50%; /* ---------- ELEVAÇÃO ---------- Sempre navy transparente, nunca preto. */ --sh-card: 0 18px 50px rgba(13, 27, 61, 0.10); --sh-hover: 0 24px 60px rgba(13, 27, 61, 0.14); /* ---------- MOVIMENTO ---------- §32: fade com deslocamento de até 20px, 350–550ms, execução única. */ --dur-state: 200ms; --dur-reveal: 450ms; --ease: cubic-bezier(.2, .8, .2, 1); } /* Modo escuro não existe nesta marca. Decisão explícita, não omissão: sem esta linha, o Chrome no Android com "forçar tema escuro" e os navegadores in-app do Instagram e do Facebook invertem a página por conta própria — e é por eles que chega o tráfego pago do projeto. Uma paleta medida par a par, invertida por heurística, não sobrevive a nenhuma das travas de contraste do §33. */ :root { color-scheme: light; } /* ============================================================ TRAVAS DE CONTRASTE — medidas, não estimadas (WCAG 2.1 AA) PASSAM navy sobre off-white ............ 14.53:1 navy sobre branco ............... 16.92:1 branco sobre navy ............... 16.92:1 txt-secondary sobre off-white .... 6.51:1 teal sobre navy .................. 6.80:1 (pilar G3A) amarelo sobre navy .............. 10.66:1 (pilar G3A) coral sobre navy ................. 6.05:1 (pilar G3A) foco #2F6FD9 sobre branco ........ 4.78:1 REPROVAM — e por isso viram regra no base, não recomendação teal como texto sobre branco ..... 2.49:1 teal como texto sobre off-white .. 2.14:1 amarelo como texto sobre branco .. 1.59:1 coral como texto sobre branco .... 2.80:1 branco sobre coral ............... 2.80:1 txt-muted sobre off-white ........ 4.09:1 <- o mais traiçoeiro: passa no branco (5.02) e reprova no off-white. Por isso o base promove muted para secondary dentro de qualquer superfície off-white, em vez de confiar na memória de quem escreve. Os três acentos só carregam texto sobre NAVY. Em superfície clara eles são cor gráfica: ícone, régua, tag, forma, borda. ============================================================ */