/* * tokens.css — design tokens do Chat do Reino / Voz do Reino * Fonte exata: app/ReinoChat.dc.html, app/VozDoReino.dc.html, app/reino-brain.js (THEMES). * Nenhum valor foi inventado — tudo abaixo é extraído do código em produção (10/07/2026). * Sem roxo (Purple Ban) em nenhum token. */ :root { /* ───────────────────────── MARCA ───────────────────────── */ --gold: #f9b800; /* cor de marca — EXCLUSIVA do agente Reino */ --gold-light: #ffce3a; /* topo do gradiente dourado (botões primários, bolha do usuário) */ --gold-glow: #ffdf7a; /* glow/realce do Reino (THEMES.reino.glow) */ --gold-soft: #f1d48a; /* dourado suave — taglines, ícones de menu, labels uppercase */ --cream: #f7f1e6; /* texto principal sobre fundo escuro */ --cream-soft: #f0e8da; /* corpo das bolhas de mensagem do agente */ --cream-dim: #f5e8c8; /* legendas ao vivo (Voz do Reino) */ --ink-espresso: #2b2118; /* texto sobre fundo dourado (THEMES.reino.ink) */ /* ───────────────────── ESPRESSO (fundos) ───────────────────── */ --espresso-950: #140e08; /* topo do gradiente de fundo da tela (0%) */ --espresso-900: #1d140b; /* meio do gradiente de fundo da tela (55%) */ --espresso-800: #241a10; /* base do gradiente de fundo / topo do bottom-sheet / menu ⋯ */ --espresso-850: #1a1208; /* base do gradiente do bottom-sheet (fecho mais escuro) */ --espresso-700: #1e160e; /* fundo do textarea do composer */ /* ─────────────────────── SEMÂNTICA / ESTADO ─────────────────────── */ --error-bg: rgba(168,68,59,.14); /* fundo do card de erro (Voz do Reino) */ --error-border: rgba(168,68,59,.40); --error-text: #ffcfc5; --error-icon: #ffb3a6; /* também usado no item "Sair" do menu ⋯ */ /* ───────────────────────── TIPOGRAFIA ───────────────────────── */ --font-title: 'Montserrat', sans-serif; /* títulos/headers/labels — pesos 800 e 900 */ --font-body: 'Lato', sans-serif; /* corpo de texto, placeholders, hints */ --font-quote: 'Playfair Display', Georgia, serif; /* itálico — ênfase (**texto** vira Playfair), prompt de exemplo na tela de Voz */ --fw-title-800: 800; --fw-title-900: 900; /* ───────────────────────── RAIOS ───────────────────────── */ --radius-pill: 999px; /* botões, chips, avatar redondo do agente ativo */ --radius-card: 12px; /* avatar do header, botão de menu ⋯ */ --radius-card-lg: 16px; /* cards do grid de 9 agentes, menu ⋯ (painel) */ --radius-avatar-sheet: 13px; /* avatar no bottom-sheet "Falar com" (chat) */ --radius-avatar-sheet-voz: 12px; /* avatar no bottom-sheet (voz) */ --radius-bubble: 19px; /* bolha de mensagem (chat) */ --radius-bubble-tail: 6px; /* canto "cortado" da bolha (aponta pra quem enviou) */ --radius-composer: 23px; /* input de texto do composer */ --radius-sheet-top: 26px; /* cantos superiores do bottom-sheet (agentes / transcrição) */ --radius-error-card: 16px; /* card de erro (Voz do Reino) */ /* ───────────────────────── SOMBRAS ───────────────────────── */ --shadow-menu: 0 24px 60px rgba(0,0,0,.55); /* menu ⋯ flutuante */ --shadow-user-bubble: 0 8px 22px rgba(249,184,0,.22); /* bolha do usuário (dourado fixo) */ --shadow-cta-sm: 0 6px 18px var(--ag-shadow, rgba(249,184,0,.35)); /* botão "Voz" no header */ --shadow-cta-md: 0 8px 22px var(--ag-shadow, rgba(249,184,0,.30)); /* botão enviar / free-voice */ --shadow-cta-lg: 0 12px 32px var(--ag-shadow, rgba(249,184,0,.34)); /* botão "Falar com " */ --shadow-cta-espere: 0 10px 26px var(--ag-shadow, rgba(249,184,0,.34)); /* botão "Espere" */ --shadow-think-glow: 0 0 22px var(--ag-shadow, rgba(249,184,0,.35)); /* avatar "pensando" pulsante */ /* ───────────────────────── TRANSIÇÕES-PADRÃO ───────────────────────── */ --ease-hover-bg: background .18s ease; --ease-hover-bg-slow: background .15s ease; --ease-active-scale: transform .12s ease; --ease-filter: filter .18s ease; --ease-focus-ring: border-color .2s ease, box-shadow .25s ease; /* ═══════════════════ PALETA POR AGENTE (THEMES, reino-brain.js) ═══════════════════ Cada agente expõe: --ag--color (cor sólida), --ag--glow (realce claro), --ag--rgb (triplet p/ rgba()), --ag--ink (texto sobre a cor sólida), --ag--emblem é EMOJI, não cor — fica em agentes.json, não como custom property. */ /* reino — ouro, EXCLUSIVO da marca */ --ag-reino-color: #f9b800; --ag-reino-glow: #ffdf7a; --ag-reino-rgb: 249,184,0; --ag-reino-ink: #2b2118; /* pastor — azul */ --ag-pastor-color: #7da9ff; --ag-pastor-glow: #c3d8ff; --ag-pastor-rgb: 125,169,255; --ag-pastor-ink: #0d1b36; /* koinonia — laranja */ --ag-koinonia-color: #ff9440; --ag-koinonia-glow: #ffc999; --ag-koinonia-rgb: 255,148,64; --ag-koinonia-ink: #331803; /* oikonomos — verde-esmeralda */ --ag-oikonomos-color: #34d399; --ag-oikonomos-glow: #9cebc9; --ag-oikonomos-rgb: 52,211,153; --ag-oikonomos-ink: #06281c; /* agenda — ciano-azulado */ --ag-agenda-color: #41c7f4; --ag-agenda-glow: #a6e5f9; --ag-agenda-rgb: 65,199,244; --ag-agenda-ink: #062430; /* ekklesia — turquesa */ --ag-ekklesia-color: #2fd6c3; --ag-ekklesia-glow: #9df0e5; --ag-ekklesia-rgb: 47,214,195; --ag-ekklesia-ink: #052722; /* trainer — vermelho-coral */ --ag-trainer-color: #ff5a52; --ag-trainer-glow: #ffada9; --ag-trainer-rgb: 255,90,82; --ag-trainer-ink: #330c09; /* ester — rosa */ --ag-ester-color: #ff7fa8; --ag-ester-glow: #ffc4d6; --ag-ester-rgb: 255,127,168; --ag-ester-ink: #331019; /* geracao — verde-limão */ --ag-geracao-color: #a3e635; --ag-geracao-glow: #d5f59d; --ag-geracao-rgb: 163,230,53; --ag-geracao-ink: #1e2b06; } /* * Como o app usa isso (para referência do designer): * A tela inteira "veste" o tema do agente ATIVO (fixado ou falando no momento): * accColor = --ag--color * accSoft = --ag--glow * accInk = --ag--ink * accBorder = rgba(--ag--rgb, .16) * accShadow = rgba(--ag--rgb, .35) * accGrad = linear-gradient(180deg, var(--ag--glow), var(--ag--color)) * O agente "reino" (dourado) é o único usado fora do contexto de um agente específico * (chips, placeholders, bordas neutras) — por isso --gold/--gold-glow existem soltos * além de --ag-reino-color/--ag-reino-glow (mesmo valor, nomes diferentes por contexto de uso). */