/* ============================================================================ PORTAL DA NATUREZA — DESIGN TOKENS v2 (Camada 1 · Fundação) ---------------------------------------------------------------------------- Fonte da verdade visual da plataforma. Base: paleta Nainú (Papel, Cacau, Mate, Lavanda, Urucum, Açafrão), refinada a partir do perfil de gosto do Victor (sdd/2026-07-03-perfil-de-gosto.md) e das 5 telas-conceito aprovadas (lookbook/amostras/ui-tela-*.png). Síntese que estes tokens servem: "Um boticário vivo dentro de um app moderno" — estrutura de interface limpa, quente e arredondada; a alma vem das pranchas de herbário vintage. Fontes (carregar no HTML que consumir este arquivo): Google Fonts — Oswald (400,500,600) · EB Garamond (400,500,600 + itálico) · Inter (400,500,600,700) Convenções: - Nomes em pt-BR. - Camada 1 = primitivas (--cor-*) + semânticas (--sup-*, --tinta-*, --acao-*, --retorno-*) + escalas (--tipo-*, --esp-*, --raio-*, --sombra-*) + utilitárias (.textura-papel, .sobre-cacau). - Componentes NUNCA usam hex direto: sempre var(--...). ============================================================================ */ :root { /* ========================================================================== 1. PALETA NÚCLEO (primitivas Nainú — não usar direto em componentes; preferir os tokens semânticos das seções 2 em diante) ========================================================================== */ /* Papel — o creme-base do portal (fundo com textura sutil de papel) */ --cor-papel: #FFF5DC; /* Cacau — a tinta do boticário (textos, traços, superfícies escuras) */ --cor-cacau: #482D2D; --cor-cacau-2: #3C2525; --cor-cacau-3: #301E1E; --cor-cacau-4: #241717; --cor-cacau-claro-1: #675050; --cor-cacau-claro-2: #857373; /* Mate — o verde-oliva primário (ações, vida, crescimento) */ --cor-mate: #4D6626; --cor-mate-claro-1: #6B804A; --cor-mate-claro-2: #88996E; --cor-mate-escuro-1: #405520; --cor-mate-escuro-2: #334419; --cor-mate-nevoa: #EDF0DE; /* novo v2: tint de superfície (chips, fundos de sucesso) */ /* Lavanda — RESERVADA para a família de apps (acento do app Escudo). Não usar na interface do portal. Contraste sobre Papel: 4,2:1 (só texto grande); para texto pequeno usar --cor-lavanda-tinta. */ --cor-lavanda: #9461AE; --cor-lavanda-claro-1: #A67BBC; --cor-lavanda-claro-2: #B896C9; --cor-lavanda-claro-3: #CAB0D7; --cor-lavanda-tinta: #71427F; /* novo v2: shade acessível (5,1:1 sobre Papel) */ /* Urucum — o vermelho-terra do AO VIVO e dos erros (uso pontual) */ --cor-urucum: #E44E39; --cor-urucum-claro-1: #E96C5A; --cor-urucum-claro-2: #ED897B; --cor-urucum-tinta: #B93A28; /* novo v2: shade acessível p/ texto (5,2:1 sobre Papel) */ --cor-urucum-nevoa: #FCE8E1; /* novo v2: tint de superfície (fundos de erro) */ /* Açafrão — o dourado raro (destaques, selos; nunca em área grande) */ --cor-acafrao: #F9CB54; --cor-acafrao-claro-1: #FAD471; --cor-acafrao-claro-2: #FBDC8D; --cor-acafrao-escuro: #A68738; --cor-acafrao-tinta: #806626; /* novo v2: shade acessível p/ texto (5,0:1 sobre Papel) */ --cor-acafrao-nevoa: #FCF3D9; /* novo v2: tint de superfície (fundos de aviso) */ /* ========================================================================== 2. SUPERFÍCIES (novo v2 — a escada de papéis observada nas telas-conceito: o fundo é o creme Papel; cartões flutuam MAIS CLAROS; rebaixos afundam; a prancha é pergaminho envelhecido; o player vive no Cacau escuro) ========================================================================== */ --sup-fundo: var(--cor-papel); /* fundo geral do app (recebe .textura-papel) */ --sup-cartao: #FFFBEF; /* cartões, barras de navegação, modais */ --sup-rebaixo: #F7EACB; /* wells, sidebars, chips inativos, linhas zebradas */ --sup-pergaminho: #F2E3C1; /* molduras de prancha, capas, selos (papel envelhecido) */ --sup-cacau: var(--cor-cacau-3);/* momentos escuros: player, lives, rodapé profundo */ --sup-cacau-suave: var(--cor-cacau-2);/* cartões sobre superfície cacau */ /* Bordas — sempre Cacau translúcido (nunca cinza frio) */ --borda-sutil: rgba(72, 45, 45, 0.12); --borda-media: rgba(72, 45, 45, 0.22); --borda-forte: rgba(72, 45, 45, 0.38); /* moldura fina de prancha */ --borda-clara: rgba(255, 245, 220, 0.25); /* bordas sobre superfícies cacau */ /* ========================================================================== 3. TINTA (texto e ícones) ========================================================================== */ --tinta-titulo: var(--cor-cacau-3); /* títulos e display · 14,5:1 sobre Papel */ --tinta-corpo: var(--cor-cacau); /* texto corrente · 11,4:1 */ --tinta-suave: var(--cor-cacau-claro-1); /* apoio, metadados · 6,8:1 */ --tinta-apagada: var(--cor-cacau-claro-2); /* SÓ decorativo/desabilitado · 4,1:1 (abaixo de AA p/ texto pequeno) */ --tinta-primaria: var(--cor-mate); /* links, rótulos de seção · 5,9:1 */ --tinta-invertida: var(--cor-papel); /* texto sobre Mate e sobre Cacau · 6,0:1 e 14,5:1 */ --tinta-invertida-suave: rgba(255, 245, 220, 0.72); /* ========================================================================== 4. AÇÃO E ESTADOS (botões, links, foco, seleção) ========================================================================== */ --acao-primaria: var(--cor-mate); --acao-primaria-flutuo: var(--cor-mate-escuro-1); /* hover */ --acao-primaria-pressao: var(--cor-mate-escuro-2); /* ativo/pressionado */ --acao-primaria-tinta: var(--cor-papel); /* texto sobre a ação */ --acao-nevoa: var(--cor-mate-nevoa); /* fundo de chip/seleção suave */ /* Foco visível (teclado): anel duplo que funciona em qualquer superfície */ --anel-foco: 0 0 0 2px var(--cor-papel), 0 0 0 4px var(--cor-mate); /* Desabilitado: opacidade única, sem trocar cor (mantém a paleta limpa) */ --opacidade-desabilitado: 0.45; /* ========================================================================== 5. RETORNO AO USUÁRIO (sucesso · erro · aviso · AO VIVO) Regra: a cor cheia marca; a -tinta escreve; a -nevoa acolhe o fundo. ========================================================================== */ --retorno-sucesso: var(--cor-mate); --retorno-sucesso-tinta: var(--cor-mate-escuro-1); --retorno-sucesso-fundo: var(--cor-mate-nevoa); --retorno-erro: var(--cor-urucum); --retorno-erro-tinta: var(--cor-urucum-tinta); --retorno-erro-fundo: var(--cor-urucum-nevoa); --retorno-aviso: var(--cor-acafrao); --retorno-aviso-tinta: var(--cor-acafrao-tinta); --retorno-aviso-fundo: var(--cor-acafrao-nevoa); /* AO VIVO — badge pulsante (Urucum é a única cor "acesa" do sistema). Regra v2: o vermelho VIVO pulsa (ponto), o vermelho TERRA escreve (fundo do badge com texto) — branco sobre Urucum vivo dá 3,9:1 (reprova AA em texto pequeno); sobre Urucum-tinta dá 5,7:1 (aprova). */ --aovivo-fundo: var(--cor-urucum-tinta); --aovivo-ponto: var(--cor-urucum); --aovivo-tinta: #FFFFFF; /* ========================================================================== 6. TIPOGRAFIA — o trio aprovado Rótulo (Oswald, caps espaçadas) = a voz do boticário: logo, navegação, botões, chips, selos. Marca (EB Garamond) = a voz do herbário: títulos, display, nomes de espécie em itálico, citações. Leitura (Inter) = a voz do app: corpo, formulários, metadados, tabelas. ========================================================================== */ --tipo-rotulo: 'Oswald', 'Arial Narrow', sans-serif; --tipo-marca: 'EB Garamond', 'Iowan Old Style', Georgia, serif; --tipo-leitura: 'Inter', -apple-system, 'Segoe UI', sans-serif; /* Escala fluida (mobile-first; cresce sozinha até o desktop) */ --tipo-display-1: clamp(2.25rem, 1.55rem + 3vw, 3.25rem); /* 36 → 52px · Marca 500 */ --tipo-display-2: clamp(1.75rem, 1.30rem + 2vw, 2.375rem); /* 28 → 38px · Marca 500 */ --tipo-titulo-1: clamp(1.5rem, 1.24rem + 1.1vw, 1.875rem); /* 24 → 30px · Marca 600 */ --tipo-titulo-2: clamp(1.25rem, 1.13rem + 0.55vw, 1.4375rem); /* 20 → 23px · Marca 600 */ --tipo-titulo-3: 1.125rem; /* 18px · Leitura 600 */ --tipo-corpo-g: 1.0625rem; /* 17px · Leitura 400 */ --tipo-corpo: 1rem; /* 16px · Leitura 400 */ --tipo-corpo-p: 0.875rem; /* 14px · Leitura 400 */ --tipo-legenda: 0.8125rem; /* 13px · Leitura 500 */ --tipo-rotulo-g: 0.9375rem; /* 15px · Rótulo 500 caps */ --tipo-rotulo-m: 0.8125rem; /* 13px · Rótulo 500 caps */ --tipo-rotulo-p: 0.6875rem; /* 11px · Rótulo 600 caps */ /* Ajustes de composição */ --tipo-altura-corpo: 1.6; /* respiro de leitura */ --tipo-altura-titulo: 1.15; --tipo-espaco-rotulo: 0.14em; /* caps espaçadas do boticário */ --tipo-espaco-rotulo-g: 0.22em; /* logo e momentos de marca */ /* ========================================================================== 7. ESPAÇAMENTO — escala de 4px Micro (4-12) dentro de componentes · blocos (16-32) entre elementos · seções (48-128) entre regiões. Respiro generoso é regra, não exceção. ========================================================================== */ --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 */ --esp-16: 4rem; /* 64px */ --esp-20: 5rem; /* 80px */ --esp-24: 6rem; /* 96px */ --esp-32: 8rem; /* 128px */ /* ========================================================================== 8. RAIOS — arredondado suave (as telas-conceito são generosas nas curvas) ========================================================================== */ --raio-s: 8px; /* chips, badges, campos compactos */ --raio-m: 12px; /* botões, inputs, cartões pequenos */ --raio-g: 16px; /* cartões padrão */ --raio-xg: 24px; /* heros, painéis, molduras de destaque */ --raio-pilula: 999px; /* pills de navegação, filtros, avatares */ /* ========================================================================== 9. SOMBRAS — quentes (base Cacau), suaves, nunca duras ========================================================================== */ --sombra-1: 0 1px 2px rgba(72, 45, 45, 0.05), 0 2px 6px rgba(72, 45, 45, 0.05); /* repouso de cartão */ --sombra-2: 0 2px 4px rgba(72, 45, 45, 0.05), 0 8px 20px rgba(72, 45, 45, 0.08); /* flutuo (hover), dropdowns */ --sombra-3: 0 4px 8px rgba(72, 45, 45, 0.06), 0 16px 40px rgba(72, 45, 45, 0.12); /* modais, painéis soltos */ --sombra-prancha: 0 1px 0 rgba(72, 45, 45, 0.04), 0 10px 24px rgba(72, 45, 45, 0.10); /* a prancha "deitada sobre a mesa" */ /* ========================================================================== 10. GRADE RESPONSIVA (mobile-first) Pontos de quebra (usar em @media min-width): 480px (sm) · 768px (md) · 1024px (lg) · 1280px (xl) Colunas: 4 (base) → 8 (md) → 12 (lg). ========================================================================== */ --grade-max: 1240px; /* largura máxima do conteúdo */ --grade-margem: clamp(1rem, 4vw, 2rem); /* margem lateral fluida 16 → 32px */ --grade-vao: clamp(1rem, 2.5vw, 1.5rem); /* espaçamento entre colunas 16 → 24px */ /* ========================================================================== 11. MOVIMENTO E CAMADAS ========================================================================== */ --transicao-rapida: 120ms ease; /* hover, foco */ --transicao-suave: 220ms cubic-bezier(0.4, 0, 0.2, 1); /* painéis, expansões */ --z-topo: 100; /* navegação fixa */ --z-flutuo: 500; /* dropdowns, tooltips */ --z-modal: 1000; --z-aviso: 1100; /* toasts */ } /* ============================================================================ UTILITÁRIAS DE FUNDAÇÃO ============================================================================ */ /* ---------------------------------------------------------------------------- Textura de papel — o fundo-base do portal. 100% CSS (ruído SVG embutido + manchas de envelhecimento em gradientes radiais). Presença total < 6%: ambiente, nunca competindo com o conteúdo. O envelhecimento RICO (manchas fortes, bordas queimadas) pertence às pranchas (Camada 2), não ao fundo do app. ---------------------------------------------------------------------------- */ .textura-papel { background-color: var(--sup-fundo); background-image: /* manchas de envelhecimento, quase imperceptíveis */ radial-gradient(52rem 36rem at 12% 8%, rgba(166, 135, 56, 0.05), transparent 62%), radial-gradient(44rem 30rem at 88% 18%, rgba(166, 135, 56, 0.04), transparent 60%), radial-gradient(56rem 40rem at 78% 92%, rgba(114, 84, 56, 0.045), transparent 65%), radial-gradient(40rem 30rem at 6% 78%, rgba(166, 135, 56, 0.035), transparent 58%), /* grão fino de papel (ruído fractal, tingido de Cacau) */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.34 0 0 0 0 0.22 0 0 0 0 0.13 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-attachment: fixed, fixed, fixed, fixed, local; } /* ---------------------------------------------------------------------------- Contexto escuro — componentes sobre superfície Cacau (player, lives, rodapé). Reatribui os tokens semânticos; os componentes não mudam. ---------------------------------------------------------------------------- */ .sobre-cacau { background-color: var(--sup-cacau); --tinta-titulo: var(--cor-papel); --tinta-corpo: var(--tinta-invertida); --tinta-suave: var(--tinta-invertida-suave); --tinta-primaria: var(--cor-mate-claro-2); --sup-cartao: var(--sup-cacau-suave); --sup-rebaixo: var(--cor-cacau-4); --borda-sutil: var(--borda-clara); --borda-media: rgba(255, 245, 220, 0.38); --anel-foco: 0 0 0 2px var(--cor-cacau-3), 0 0 0 4px var(--cor-mate-claro-2); color: var(--tinta-corpo); } /* ---------------------------------------------------------------------------- Pulso do AO VIVO (única animação da fundação; discreta e contínua) ---------------------------------------------------------------------------- */ @keyframes aovivo-pulso { 0% { box-shadow: 0 0 0 0 rgba(228, 78, 57, 0.45); } 70% { box-shadow: 0 0 0 9px rgba(228, 78, 57, 0); } 100% { box-shadow: 0 0 0 0 rgba(228, 78, 57, 0); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }