/* ============================================================================
PLENA · BRANDBOOK V3 — TOKENS OFICIAIS DE DESIGN
----------------------------------------------------------------------------
Marca: Plena por Carol Caldas · nutrição para mulheres 40+
Versão: 3.0 · 16 de julho de 2026
Fonte da verdade visual: /referencias/referencia-carol-chatgpt-01.jpeg
(referência aprovada pela Carol — cores amostradas com Python/PIL,
mediana de múltiplos pontos por zona; ver sistema-design.md)
Direção estética: quiet luxury de joalheria — medalhão, feminino, quente,
editorial, contemplativo. Nunca clínica, nunca spa zen, nunca coach
motivacional, nunca estética genérica de IA (sem gradientes roxo-azul,
sem Inter/Roboto, sem emojis).
============================================================================ */
/* ----------------------------------------------------------------------------
FONTES — importar UMA vez, antes deste arquivo:
Papéis (decisão da cliente):
· Fraunces = display e H1 (opsz alto, peso 400–600)
· Newsreader = serif editorial (H2, H3, âncoras em italic, corpo)
· Jost = sans de labels, UI, small caps, botões, numeração romana
· Caveat = APENAS a assinatura manuscrita da Carol
Banidas: Cormorant, Inter, Roboto, Montserrat, Poppins. Nunito aposentada.
---------------------------------------------------------------------------- */
:root {
/* ==========================================================================
1 · COR — NÚCLEO (as 5 cores da referência aprovada)
Proporção de palco: 60 / 25 / 10 / 5
========================================================================== */
/* 60% — o papel onde a marca respira. Amostrado: #F8F5F1 (10 pontos). */
--plena-creme-papel: #F8F5F1; /* rgb(248,245,241) · cmyk(0,1,3,3) */
/* 25% — a espinha da marca. É o "preto" do Plena.
Amostrado: #464B35 (8 pontos na caixa NOSSOS PILARES). */
--plena-oliva-profundo: #464B35; /* rgb(70,75,53) · cmyk(7,0,29,71) */
/* 10% — o acento de joia. Arco do medalhão + ponto são ESTA tinta.
Amostrado: #A7785E (mediana do top 8% saturação×escuridão do arco;
ponto rosé amostra #A87E61 — mesma tinta sob anti-aliasing). */
--plena-cobre-rose: #A7785E; /* rgb(167,120,94) · cmyk(0,28,44,35) */
/* 5% — o calor. Card ROSÉ da referência.
Amostrado: #CEB19D (8 pontos, mediana de blocos). */
--plena-rose-petala: #CEB19D; /* rgb(206,177,157) · cmyk(0,14,24,19) */
/* 5% — a faixa inferior da referência ("O Plena não é sobre dieta…").
Amostrado: #C2A18B (região plana; gradiente suave #B9957F→#CAA996).
ATENÇÃO: sobre Argila, texto SEMPRE em Oliva Sombra (creme falha: 2,20:1). */
--plena-argila: #C2A18B; /* rgb(194,161,139) · cmyk(0,17,28,24) */
/* ==========================================================================
2 · COR — SUPORTE (profundidade, tintas de texto, acessibilidade)
========================================================================== */
/* Creme mais quente para alternar seções (era o "Creme Papel" do V2). */
--plena-creme-linho: #F3ECDF; /* rgb(243,236,223) · cmyk(0,3,8,5) */
/* Oliva mais fundo: vinhetas, rodapés escuros, texto sobre rosé/argila. */
--plena-oliva-sombra: #323626; /* rgb(50,54,38) · cmyk(7,0,30,79) */
/* Tinta do texto corrido (o cinza-quente dos parágrafos da referência).
Amostrado: #333330–#454442 (percentis escuros); fixado em #4B4741. */
--plena-tinta-suave: #4B4741; /* rgb(75,71,65) · cmyk(0,5,13,71) */
/* Cobre claro: ÚNICO cobre para texto miúdo sobre fundo oliva (4,92:1 AA). */
--plena-cobre-claro: #DEB896; /* rgb(222,184,150) · cmyk(0,17,32,13) */
/* Rosé mais claro: fundos de acolhimento, ícones sobre oliva (5,76:1 AA). */
--plena-rose-claro: #E4C9B8; /* rgb(228,201,184) · cmyk(0,12,19,11) */
/* Terracota tinta: (a) cobre "profundo" para texto miúdo sobre creme
(5,12:1 AA), (b) faixa com texto creme — versão acessível da faixa da
referência, (c) anotações à mão no feed. */
--plena-terracota-tinta: #8C5E3A; /* rgb(140,94,58) · cmyk(0,33,59,45) */
/* Terracota viva: grifo/traço à mão sobre foto no feed (Modo Casual). */
--plena-terracota-viva: #C77E4E; /* rgb(199,126,78) · cmyk(0,37,61,22) */
/* ==========================================================================
3 · COR — PAPÉIS FUNCIONAIS (usar estes alias nos componentes)
========================================================================== */
--plena-fundo: var(--plena-creme-papel);
--plena-fundo-alt: var(--plena-creme-linho);
--plena-fundo-escuro: var(--plena-oliva-profundo);
--plena-fundo-profundo: var(--plena-oliva-sombra);
--plena-fundo-calor: var(--plena-rose-petala);
--plena-fundo-faixa: var(--plena-argila);
--plena-fundo-faixa-cta: var(--plena-terracota-tinta); /* aceita texto creme */
--plena-texto: var(--plena-tinta-suave); /* corpo sobre claro */
--plena-texto-titulo: var(--plena-oliva-profundo); /* títulos sobre claro */
--plena-texto-inverso: var(--plena-creme-papel); /* texto sobre escuro */
--plena-texto-inverso-suave: rgba(248, 245, 241, 0.78); /* corpo sobre escuro
(composta #D1D0C8 · 5,85:1 AA) */
--plena-texto-micro: rgba(75, 71, 65, 0.80); /* microtexto sobre claro
(composta ≈#6F6C67 · ≈4,7:1 AA) */
--plena-acento: var(--plena-cobre-rose); /* ornamento, traço */
--plena-acento-texto: var(--plena-terracota-tinta); /* kicker miúdo s/ claro */
--plena-acento-inverso: var(--plena-cobre-claro); /* kicker s/ escuro */
--plena-borda: rgba(167, 120, 94, 0.50); /* filete cobre 50% (#D0B6A8) */
--plena-borda-inverso: rgba(248, 245, 241, 0.25); /* filete sobre escuro */
--plena-borda-neutra: rgba(75, 71, 65, 0.16); /* hairline neutra */
/* ==========================================================================
4 · TIPOGRAFIA — FAMÍLIAS
========================================================================== */
--plena-fonte-display: 'Fraunces', 'Newsreader', Georgia, serif;
--plena-fonte-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
--plena-fonte-sans: 'Jost', 'Century Gothic', Futura, system-ui, sans-serif;
--plena-fonte-mao: 'Caveat', cursive;
/* Fraunces: sempre com optical size ALTO para display.
Pesos permitidos: 400, 500, 600. Eixos SOFT/WONK ficam em 0. */
--plena-fraunces-opsz: 'opsz' 144;
/* ==========================================================================
5 · TIPOGRAFIA — ESCALA WEB (px · fluida com clamp quando indicado)
Formato: fonte peso tamanho/line-height tracking transformação
========================================================================== */
/* Display marcado — o gesto "P L E N A" da referência: caixa alta,
tracking largo, 1 a 3 palavras. Nunca para frases longas. */
--plena-tipo-display-marcado: 400 clamp(56px, 9vw, 96px)/1.04 var(--plena-fonte-display);
--plena-tracking-marcado: 0.22em; /* 0.18–0.26em conforme a palavra */
/* Display editorial — manchetes de página/hero em frase corrida. */
--plena-tipo-display: 500 clamp(44px, 6.5vw, 72px)/1.06 var(--plena-fonte-display);
--plena-tracking-display: -0.01em;
--plena-tipo-h1: 500 clamp(36px, 5vw, 52px)/1.10 var(--plena-fonte-display);
--plena-tipo-h2: 500 clamp(28px, 3.6vw, 38px)/1.16 var(--plena-fonte-serif);
--plena-tipo-h3: 600 clamp(22px, 2.6vw, 26px)/1.26 var(--plena-fonte-serif);
/* Frase-âncora — a frase de virada, sempre em italic. */
--plena-tipo-ancora: italic 500 clamp(24px, 3.2vw, 34px)/1.34 var(--plena-fonte-serif);
/* Citação monumental — pull-quote cerimonial (uso raro, 1 por peça). */
--plena-tipo-citacao: italic 400 clamp(34px, 4.8vw, 52px)/1.22 var(--plena-fonte-display);
--plena-tipo-lead: 400 clamp(18px, 2vw, 21px)/1.62 var(--plena-fonte-serif);
--plena-tipo-corpo: 400 17px/1.76 var(--plena-fonte-serif); /* mínimo 16px mobile */
--plena-tipo-corpo-pequeno: 400 15px/1.62 var(--plena-fonte-serif);
/* Label / small caps — a assinatura de ar editorial da marca. */
--plena-tipo-label: 500 12.5px/1.45 var(--plena-fonte-sans);
--plena-tracking-label: 0.30em; /* 0.26–0.32em */
--plena-tipo-micro: 400 11px/1.5 var(--plena-fonte-sans);
--plena-tracking-micro: 0.24em;
--plena-tipo-botao: 600 14px/1 var(--plena-fonte-sans);
--plena-tracking-botao: 0.18em;
/* Numeração romana — capítulos, pilares, passos de protocolo. */
--plena-tipo-romano: 400 13px/1.4 var(--plena-fonte-sans);
--plena-tracking-romano: 0.20em;
/* Assinatura da Carol — único uso permitido do Caveat. */
--plena-tipo-assinatura: 600 40px/1.1 var(--plena-fonte-mao);
/* ==========================================================================
6 · ESPAÇAMENTO — base 4px
========================================================================== */
--plena-espaco-1: 4px;
--plena-espaco-2: 8px;
--plena-espaco-3: 12px;
--plena-espaco-4: 16px;
--plena-espaco-5: 24px;
--plena-espaco-6: 32px;
--plena-espaco-7: 48px;
--plena-espaco-8: 64px;
--plena-espaco-9: 96px;
--plena-espaco-10: 128px;
--plena-secao-pad-y: clamp(64px, 10vw, 128px); /* respiro vertical de seção */
--plena-card-pad: clamp(24px, 4vw, 48px);
--plena-medida-texto: 62ch; /* medida máxima de corpo corrido */
/* ==========================================================================
7 · RAIOS — medidos na referência (cards ≈14–16px em ~170px de largura;
caixa oliva ≈12–14px em ~630px). Regra: raio ABSOLUTO consistente,
não proporcional — é o que dá o ar de joalheria.
========================================================================== */
--plena-raio-chip: 10px;
--plena-raio-foto: 12px;
--plena-raio-caixa: 14px; /* caixas largas (pilares, faixas) */
--plena-raio-card: 16px; /* cards de aplicação, produto, depoimento */
--plena-raio-hero: 20px; /* blocos hero amplos */
--plena-raio-pill: 999px; /* botões e chips arredondados */
/* ==========================================================================
8 · FILETES — hairline medido na referência: 1px no board 1254px
========================================================================== */
--plena-filete: 1px; /* web */
--plena-filete-grosso: 1.5px; /* traço do coração/dividers */
--plena-filete-impresso: 0.75pt; /* cartilhas e peças de print */
--plena-filete-post: 2px; /* posts 1080×1350 */
/* ==========================================================================
9 · SOMBRAS — quentes, tingidas de oliva/cobre; nunca preto puro,
nunca blur agressivo. A luz do Plena é lateral e macia.
========================================================================== */
--plena-sombra-card:
0 1px 2px rgba(50, 54, 38, 0.05),
0 10px 30px -8px rgba(50, 54, 38, 0.10);
--plena-sombra-flutuante:
0 2px 4px rgba(50, 54, 38, 0.06),
0 24px 64px -16px rgba(50, 54, 38, 0.16);
--plena-sombra-medalhao: /* brilho quente sob selo, pingente, medalhão */
0 16px 48px -12px rgba(139, 94, 66, 0.25);
--plena-sombra-foto:
0 20px 50px -20px rgba(50, 54, 38, 0.25);
/* ==========================================================================
10 · ORNAMENTOS — valores exatos (detalhes em sistema-design.md §7)
========================================================================== */
/* Coração de linha (divider) — traço outline, 1 por viewport no máximo */
--plena-coracao-tamanho: 16px;
--plena-coracao-traco: 1.5px;
--plena-coracao-gap: 16px; /* respiro entre filete e coração */
--plena-coracao-filete-largura: 72px; /* cada lado: 48–96px */
/* Medalhão como marca d'água */
--plena-marcadagua-op-claro: 0.06; /* oliva 6% sobre creme (#EDEBE6) */
--plena-marcadagua-op-escuro: 0.08; /* creme 8% sobre oliva */
--plena-marcadagua-escala: 120%; /* 80–140% da largura da coluna */
/* Selo concêntrico */
--plena-selo-diametro: 96px;
--plena-selo-anel-gap: 6px; /* distância entre os dois anéis */
--plena-selo-traco: 1px;
/* Textura papel — grão fino, quase imperceptível */
--plena-textura-opacidade: 0.04; /* 0.03–0.05 */
--plena-textura-tile: 240px;
/* ==========================================================================
11 · TOKENS DE POST — 1080×1350 px (feed) e 1080×1920 px (story)
Valores fixos em px do canvas. Mínimos: qualquer texto ≥ 20px;
corpo ≥ 28px; em story nada abaixo de 30px (regra do polegar).
========================================================================== */
--plena-post-margem: 90px; /* margem segura no feed */
--plena-story-margem: 120px; /* topo/base livres da UI do app */
--plena-post-display-marcado: 400 116px/1.05 var(--plena-fonte-display);
--plena-post-tracking-marcado: 0.20em;
--plena-post-display: 500 84px/1.06 var(--plena-fonte-display);
--plena-post-h1: 500 70px/1.10 var(--plena-fonte-display);
--plena-post-h2: 500 54px/1.16 var(--plena-fonte-serif);
--plena-post-h3: 600 40px/1.26 var(--plena-fonte-serif);
--plena-post-ancora: italic 500 52px/1.34 var(--plena-fonte-serif);
--plena-post-corpo: 400 32px/1.66 var(--plena-fonte-serif);
--plena-post-label: 500 25px/1.4 var(--plena-fonte-sans);
--plena-post-tracking-label: 0.30em;
--plena-post-micro: 400 21px/1.5 var(--plena-fonte-sans);
--plena-post-tracking-micro: 0.24em;
--plena-post-romano: 400 26px/1.4 var(--plena-fonte-sans);
--plena-post-botao: 600 27px/1 var(--plena-fonte-sans);
--plena-post-assinatura: 600 52px/1.1 var(--plena-fonte-mao);
--plena-post-raio-card: 28px;
--plena-post-raio-caixa: 32px;
--plena-post-raio-foto: 24px;
--plena-post-coracao: 30px;
--plena-post-selo: 192px;
}
/* ============================================================================
12 · CLASSES UTILITÁRIAS MÍNIMAS (opcionais — os tokens bastam)
============================================================================ */
.plena-label {
font: var(--plena-tipo-label);
letter-spacing: var(--plena-tracking-label);
text-transform: uppercase;
color: var(--plena-acento-texto);
}
.plena-micro {
font: var(--plena-tipo-micro);
letter-spacing: var(--plena-tracking-micro);
text-transform: uppercase;
color: var(--plena-texto-micro);
}
.plena-romano {
font: var(--plena-tipo-romano);
letter-spacing: var(--plena-tracking-romano);
text-transform: uppercase;
color: var(--plena-acento-texto);
}
/* Divider de coração: filete hairline + coração de linha + filete hairline */
.plena-divider-coracao {
display: flex;
align-items: center;
justify-content: center;
gap: var(--plena-coracao-gap);
}
.plena-divider-coracao::before,
.plena-divider-coracao::after {
content: "";
width: var(--plena-coracao-filete-largura);
border-top: var(--plena-filete) solid var(--plena-borda);
}
.plena-card {
background: var(--plena-creme-papel);
border-radius: var(--plena-raio-card);
box-shadow: var(--plena-sombra-card);
padding: var(--plena-card-pad);
}
.plena-botao {
font: var(--plena-tipo-botao);
letter-spacing: var(--plena-tracking-botao);
text-transform: uppercase;
background: var(--plena-oliva-profundo);
color: var(--plena-creme-papel);
border-radius: var(--plena-raio-pill);
padding: 18px 36px;
border: 0;
}
.plena-botao--cobre {
background: var(--plena-terracota-tinta); /* cobre que passa AA com creme */
}