/* ============================================================================= Tokens do site de marketing — CÓPIA ENXUTA de frontend/src/styles/tokens.css, com os valores que esta página usa, nos DOIS temas. ⚠️ É cópia DE PROPÓSITO, não import. O CSS do Angular sai de outro build, com hash no nome, e o `components.css` arrasta junto os overrides de Bootstrap — nada disso serve a uma página estática. Se a paleta mudar lá, atualize aqui: a fonte da verdade continua sendo .project/design_system/README.md. ── COMO OS TEMAS SE RESOLVEM ────────────────────────────────────────────── Mesma estrutura do app, e pelo mesmo motivo (ver o bloco "Temas" em .project/mapa/frontend.md): :root → paleta CLARA (o padrão) @media (prefers-color-scheme: dark) :root:not([data-theme='light']) → escura, quando o SO pede :root[data-theme='dark'] → escura, escolha explícita O `:not([data-theme='light'])` é o que faz a escolha manual vencer o sistema nas duas direções: sem ele, quem escolhesse CLARO num SO escuro continuaria vendo escuro. `data-theme` é escrito por `site/js/theme.js`, carregado no como ARQUIVO (não inline — a CSP desta origem libera exatamente um script inline, e o hash dela é o do index.html do Angular). Sendo síncrono e no head, ele roda antes do primeiro paint: não há flash de tema errado. ⚠️ AO CRIAR UM TOKEN, DEFINA-O NOS DOIS BLOCOS. ========================================================================== */ :root { color-scheme: light; /* --- Marca ----------------------------------------------------------- No claro a primária ESCURECE para #047857: branco sobre o #10B981 da identidade dá 2,5:1 e reprova em WCAG. O verde da marca sobrevive em `--primary-bright`, que só pinta faixa, anel, ponto e tint — nunca texto nem fundo de botão. É a mesma regra do app. */ --primary: #047857; --primary-hover: #065f46; --primary-bright: #10b981; --on-primary: #ffffff; --primary-container: #d1fae5; --on-primary-container: #064e3b; /* --- Superfícies ------------------------------------------------------ */ --surface-page: #f8fafc; --surface-card: #ffffff; --surface-raised: #f1f5f9; /* Fundo das seções alternadas e do rodapé — no claro é mais ESCURO que o canvas; no escuro, mais claro. É o mesmo princípio de elevação do app, invertido junto com o tema. */ --surface-alt: #f1f5f9; --surface-deep: #eef2f7; /* --- Texto ------------------------------------------------------------ */ --on-surface: #0f172a; --on-surface-variant: #475569; /* O herói é escuro nos DOIS temas (o gradiente não muda), então o texto sobre ele é sempre branco. Igual aos tokens `*-fixed` do app. */ --on-hero: #ffffff; /* Acento sobre o herói. FIXO nos dois temas, como os tokens `*-fixed` do app: o gradiente é escuro sempre, então a primária do tema CLARO (#047857) sobre ele fica praticamente invisível. Esta é a esmeralda clara, que dá contraste de sobra para texto grande. */ --on-hero-accent: #34d399; --on-hero-soft: rgba(255, 255, 255, 0.85); --on-hero-faint: rgba(255, 255, 255, 0.72); --hero-rule: rgba(255, 255, 255, 0.16); /* --- Contornos -------------------------------------------------------- */ /* `--outline` também é COR DE TEXTO (datas, legendas), por isso é o slate #576578 e não o #64748B — este reprova em AA sobre `--surface-raised`. */ --outline: #576578; --outline-variant: #e2e8f0; /* --- Camadas translúcidas --------------------------------------------- Ficam como token porque mudam de cor-base entre os temas: um rgba fixo de slate escuro sobre fundo branco vira um borrão cinza. */ --veil-bar: rgba(248, 250, 252, 0.85); /* barra fixa do topo */ --veil-panel: rgba(255, 255, 255, 0.9); /* painel do card de personagem */ --veil-story: rgba(255, 255, 255, 0.96); /* caixa da cena */ --veil-stat: rgba(9, 13, 22, 0.42); /* cartões sobre o herói (escuro nos dois temas) */ --cover-fade: #ffffff; /* pé do degradê sobre a capa */ /* --- Extras ----------------------------------------------------------- */ /* O gradiente herói é escuro nos dois temas — por isso `--on-hero` não muda. */ --gradient-hero: linear-gradient(135deg, #064e3b 0%, #065f46 55%, #047857 100%); /* Véu do herói: verde ESCURO à esquerda, onde mora o texto, abrindo para verde mais claro e mais transparente à direita, onde a arte de fundo aparece. A opacidade não é decoração: é ela que segura o contraste do título sobre uma capa que muda a cada visita — do lado do texto ela chega a 0,94, do lado da imagem cai para 0,58. */ --hero-veil: linear-gradient(105deg, rgba(2, 44, 34, 0.94) 0%, rgba(4, 62, 47, 0.88) 34%, rgba(5, 108, 79, 0.72) 68%, rgba(6, 138, 100, 0.58) 100%); --shadow-soft: 0 4px 12px -2px rgba(15, 23, 42, 0.06); --shadow-raised: 0 8px 24px -6px rgba(15, 23, 42, 0.12); --shadow-story: 0 24px 60px -24px rgba(15, 23, 42, 0.22); --glow: 0 0 28px rgba(4, 120, 87, 0.16); --tint: rgba(4, 120, 87, 0.08); /* fundo de pílula e selo */ --tint-line: rgba(4, 120, 87, 0.2); /* borda dos mesmos */ --glow-hero: rgba(16, 185, 129, 0.16); /* --- Acentos de persona ------------------------------------------------- Um tom ABAIXO dos do app no tema claro, e por um motivo de uso: lá eles também pintam anel de avatar e ponto, onde 3:1 basta; aqui são só COR DE TEXTO PEQUENO (o nome de quem fala, 12px, e a ação em itálico), que exige 4,5:1. O ciano #0891b2 do app dá 3,68:1 sobre a caixa branca da cena — medido, não estimado. Os valores abaixo passam todos em AA. */ --persona-1: #4f46e5; --persona-2: #be185d; --persona-3: #0e7490; --persona-4: #6d28d9; --persona-5: #b45309; /* --- Espaçamento e forma ---------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ⚠️ AQUI O RAIO DIVERGE DO APP, e é decisão consciente. O `tokens.css` do Angular tem teto de 8px (ver o Histórico de 2026-08-26): lá a tela é densa, cheia de listas e cartões pequenos, e canto redondo demais come área útil. Uma landing tem cinco blocos grandes e nenhum formulário — o raio maior é o que separa "cartão de aplicação" de "peça de marketing". O app continua com 8px; quem muda são só estas variáveis, que vivem só aqui. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-round: 9999px; --font-title: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Largura útil do conteúdo. Acima disso a linha fica longa demais para ler. */ --wrap: 1120px; } /* --- Tema escuro ---------------------------------------------------------- Os dois blocos abaixo carregam EXATAMENTE os mesmos valores. A duplicação é deliberada: `@media` e um seletor de atributo não se combinam numa regra só sem uma terceira definição, e uma lista de seletores agrupada faria o bloco inteiro ser descartado no navegador que não entendesse um dos dois. ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; /* A primária INVERTE de papel: aqui ela é a esmeralda da identidade (7,0:1 sobre o canvas, serve de texto) e o `--on-primary` é que fica escuro. */ --primary: #10b981; --primary-hover: #34d399; --primary-bright: #10b981; --on-primary: #022c22; --primary-container: #065f46; --on-primary-container: #a7f3d0; --surface-page: #0f172a; --surface-card: #090d16; --surface-raised: #1e293b; --surface-alt: rgba(15, 23, 42, 0.55); --surface-deep: #090d16; --on-surface: #f8fafc; --on-surface-variant: #cbd5e1; --outline: #94a3b8; --outline-variant: #334155; --veil-bar: rgba(15, 23, 42, 0.82); --veil-panel: rgba(9, 13, 22, 0.62); --veil-story: rgba(9, 13, 22, 0.9); --cover-fade: #090d16; --gradient-hero: linear-gradient(135deg, #022c22 0%, #064e3b 55%, #065f46 100%); /* Véu do herói: verde ESCURO à esquerda, onde mora o texto, abrindo para verde mais claro e mais transparente à direita, onde a arte de fundo aparece. A opacidade não é decoração: é ela que segura o contraste do título sobre uma capa que muda a cada visita — do lado do texto ela chega a 0,94, do lado da imagem cai para 0,58. */ --hero-veil: linear-gradient(105deg, rgba(2, 44, 34, 0.94) 0%, rgba(4, 62, 47, 0.88) 34%, rgba(5, 108, 79, 0.72) 68%, rgba(6, 138, 100, 0.58) 100%); --shadow-soft: 0 4px 12px -2px rgba(0, 0, 0, 0.4); --shadow-raised: 0 8px 24px -6px rgba(0, 0, 0, 0.6); --shadow-story: 0 24px 60px -20px rgba(0, 0, 0, 0.7); --glow: 0 0 28px rgba(16, 185, 129, 0.22); --tint: rgba(16, 185, 129, 0.1); --tint-line: rgba(16, 185, 129, 0.25); --glow-hero: rgba(16, 185, 129, 0.18); /* Clareados: os do tema claro reprovam sobre fundo escuro, e eles são cor de TEXTO no nome de quem fala. */ --persona-1: #a5b4fc; --persona-2: #f9a8d4; --persona-3: #67e8f9; --persona-4: #c4b5fd; --persona-5: #fcd34d; } } :root[data-theme='dark'] { color-scheme: dark; --primary: #10b981; --primary-hover: #34d399; --primary-bright: #10b981; --on-primary: #022c22; --primary-container: #065f46; --on-primary-container: #a7f3d0; --surface-page: #0f172a; --surface-card: #090d16; --surface-raised: #1e293b; --surface-alt: rgba(15, 23, 42, 0.55); --surface-deep: #090d16; --on-surface: #f8fafc; --on-surface-variant: #cbd5e1; --outline: #94a3b8; --outline-variant: #334155; --veil-bar: rgba(15, 23, 42, 0.82); --veil-panel: rgba(9, 13, 22, 0.62); --veil-story: rgba(9, 13, 22, 0.9); --cover-fade: #090d16; --gradient-hero: linear-gradient(135deg, #022c22 0%, #064e3b 55%, #065f46 100%); /* Mesmo véu do tema claro: o herói é verde nos dois. */ --hero-veil: linear-gradient(105deg, rgba(2, 44, 34, 0.94) 0%, rgba(4, 62, 47, 0.88) 34%, rgba(5, 108, 79, 0.72) 68%, rgba(6, 138, 100, 0.58) 100%); --shadow-soft: 0 4px 12px -2px rgba(0, 0, 0, 0.4); --shadow-raised: 0 8px 24px -6px rgba(0, 0, 0, 0.6); --shadow-story: 0 24px 60px -20px rgba(0, 0, 0, 0.7); --glow: 0 0 28px rgba(16, 185, 129, 0.22); --tint: rgba(16, 185, 129, 0.1); --tint-line: rgba(16, 185, 129, 0.25); --glow-hero: rgba(16, 185, 129, 0.18); --persona-1: #a5b4fc; --persona-2: #f9a8d4; --persona-3: #67e8f9; --persona-4: #c4b5fd; --persona-5: #fcd34d; }