/* ============================================================
ChamaSofia — css/brand-tokens.css
TOKENS DA MARCA (camada premium · SofIA Labs)
COMO USAR: carregue DEPOIS do CSS atual. Esta folha só define
variáveis — não pinta nada sozinha. Zero risco de regressão.
PRINCÍPIO: a identidade atual está boa. Aqui não trocamos a
paleta: mantemos os tokens antigos com os MESMOS valores e
acrescentamos as superfícies e linhas que faltavam para o
acabamento editorial (azul-noite, marfim, ouro envelhecido).
ROLLBACK: remova o desta folha. Nada mais depende dela.
============================================================ */
:root {
/* ---------- superfícies ---------- */
--sofia-ink-950: #06070B; /* preto cósmico (bordas de página) */
--sofia-cosmic-950: #0D0A14; /* fundo atual do site (inalterado) */
--sofia-navy-900: #0B1322; /* azul-noite profundo (novo) */
--sofia-navy-800: #111C2E; /* azul-noite claro (novo) */
--sofia-panel-dark: #15121D;
--sofia-panel-dark-2: #1B1723;
/* ---------- papel editorial (novo) ---------- */
--sofia-paper-100: #F6EEDC; /* marfim de leitura */
--sofia-paper-200: #E9DDC5; /* marfim sombreado */
/* ---------- identidade (valores atuais preservados) ---------- */
--sofia-violet-400: #A78BFA;
--sofia-violet-500: #8B5CF6; /* = --roxo atual */
--sofia-violet-700: #5B2BA3;
--sofia-gold-300: #E5C27B; /* ouro claro */
--sofia-gold-400: #D4A24E; /* = --dourado atual */
--sofia-gold-500: #B98232; /* ouro envelhecido */
/* ---------- texto ---------- */
--sofia-text-on-dark: #F6F0E5;
--sofia-text-muted-on-dark: #C7BED2;
--sofia-text-on-paper: #2A211A;
--sofia-text-muted-on-paper: #6F6255;
/* ---------- linhas e molduras ---------- */
--sofia-line-gold: rgba(212, 162, 78, .45);
--sofia-line-gold-2: rgba(212, 162, 78, .22);
--sofia-line-violet: rgba(139, 92, 246, .30);
--sofia-line-light: rgba(246, 238, 220, .14);
/* ---------- sombras e brilhos (mais naturais, menos neon) ---------- */
--sofia-shadow-book: 0 24px 60px rgba(0, 0, 0, .46);
--sofia-shadow-panel: 0 16px 40px rgba(0, 0, 0, .28);
--sofia-glow-gold: 0 0 28px rgba(212, 162, 78, .20);
--sofia-glow-violet: 0 0 24px rgba(139, 92, 246, .22);
/* ---------- tipografia (fontes atuais preservadas) ---------- */
--sofia-font-display: 'Cormorant Garamond', serif;
--sofia-font-ui: 'Sora', sans-serif;
/* ---------- dimensões ---------- */
--sofia-radius-xs: 2px;
--sofia-radius-sm: 6px;
--sofia-radius-md: 10px;
--sofia-radius-pill: 999px;
--sofia-content-wide: 1180px;
--sofia-content-reading: 740px;
/* ---------- estados ---------- */
--sofia-success: #7FA86B; /* verde musgo */
--sofia-warning: #D9A441; /* âmbar */
--sofia-danger: #A8443C; /* vinho queimado */
--sofia-focus: #E5C27B; /* ouro claro — foco visível */
/* ---------- contrato semântico compartilhado web/app ---------- */
--sofia-bg: var(--sofia-cosmic-950);
--sofia-bg-elevated: var(--sofia-navy-900);
--sofia-surface-primary: var(--sofia-panel-dark);
--sofia-surface-elevated: var(--sofia-panel-dark-2);
--sofia-surface-soft: rgba(139, 92, 246, .08);
--sofia-accent-primary: var(--sofia-violet-500);
--sofia-accent-deep: var(--sofia-violet-700);
--sofia-accent-gold: var(--sofia-gold-400);
--sofia-text-primary: var(--sofia-text-on-dark);
--sofia-text-muted: var(--sofia-text-muted-on-dark);
--sofia-border: var(--sofia-line-light);
--sofia-radius-card: var(--sofia-radius-lg, 18px);
}
/* ------------------------------------------------------------
COMPATIBILIDADE: os tokens antigos continuam existindo com os
MESMOS valores de hoje. Nada muda de cor ao instalar esta folha.
Quando quisermos migrar um componente, ele passa a usar os
tokens --sofia-* diretamente.
------------------------------------------------------------ */
:root {
--cosmico: #0D0A14;
--arcano: #1A1525;
--arcano-2:#241c33;
--roxo: #8B5CF6;
--violeta: #4C1D95;
--lavanda: #C4B5FD;
--dourado: #D4A24E;
--lunar: #F5F3FF;
--display: var(--sofia-font-display);
--corpo: var(--sofia-font-ui);
}
/* ============================================================
SPRINT 1 — TOKENS COMPLETOS (Chama SofIA 2.0, lote 1.1)
Aditivo, igual ao bloco acima: só cria variáveis novas ou
completa rampas que já existiam pela metade. NENHUM valor
existente foi alterado — nada muda de aparência ao instalar.
Paleta mantida (ver SPRINT_1_PLANO.md: decisão (a), estender
em vez de trocar pela paleta do pacote de documentação).
ROLLBACK: apague este bloco. Nada depende dele ainda.
============================================================ */
:root {
/* ---------- rampas completas (degraus que faltavam) ---------- */
--sofia-violet-300: #B78AF0; /* mais claro que violet-400, para detalhes/hover leve */
--sofia-violet-600: #6D3C91; /* entre violet-500 e violet-700, ações "profundas" */
--sofia-gold-600: #8F6422; /* bordas douradas profundas */
--sofia-gold-700: #6B4A19; /* variante mais escura, texto sobre fundo claro */
/* ---------- espaçamento (escala base 4px) ---------- */
--sofia-space-1: 4px;
--sofia-space-2: 8px;
--sofia-space-3: 12px;
--sofia-space-4: 16px;
--sofia-space-5: 20px;
--sofia-space-6: 24px;
--sofia-space-8: 32px;
--sofia-space-10: 40px;
--sofia-space-12: 48px;
--sofia-space-16: 64px;
/* ---------- escala tipográfica (desktop; ver @media abaixo p/ mobile) ---------- */
--sofia-font-display-size: 40px;
--sofia-font-h1-size: 32px;
--sofia-font-h2-size: 26px;
--sofia-font-h3-size: 22px;
--sofia-font-body-lg-size: 18px;
--sofia-font-body-size: 16px;
--sofia-font-body-sm-size: 14px;
--sofia-font-caption-size: 12px;
/* ---------- raios adicionais (xs/sm/md/pill já existiam) ---------- */
--sofia-radius-lg: 18px; /* cartões */
--sofia-radius-xl: 24px; /* modais */
/* ---------- sombras genéricas (book/panel/glow-* já existiam, são semânticas) ---------- */
--sofia-shadow-sm: 0 4px 14px rgba(0, 0, 0, .18);
--sofia-shadow-md: 0 12px 30px rgba(0, 0, 0, .26);
--sofia-shadow-lg: 0 20px 50px rgba(0, 0, 0, .34);
}
/* Escala tipográfica mobile — mesmos nomes de variável, valores
menores, conforme 04_DESIGN_SYSTEM_COMPLETO.md seção 6.2.
Breakpoint alinhado ao --sofia-content-wide já usado no projeto. */
@media (max-width: 767px) {
:root {
--sofia-font-display-size: 32px;
--sofia-font-h1-size: 28px;
--sofia-font-h2-size: 22px;
--sofia-font-h3-size: 20px;
--sofia-font-body-lg-size: 17px;
/* body/body-sm/caption não mudam entre desktop e mobile no doc de origem */
}
}
/* ------------------------------------------------------------
BREAKPOINTS DE REFERÊNCIA (não são custom properties usáveis
em @media — CSS não permite var() dentro de media query — só
documentados aqui para quem for escrever novo CSS/JS usar os
mesmos números em todo o projeto):
xs 0-479 · sm 480-767 · md 768-1023 · lg 1024-1279
xl 1280-1535 · 2xl 1536+
------------------------------------------------------------ */
/* ============================================================
SPRINT 1 — INCORPORAÇÃO GRADUAL DO PACOTE 2.0 (lote 1.1b)
Decisão registrada (SPRINT_1_PLANO.md): NÃO trocar a paleta
atual. Aqui só entram peças do pacote 2.0 que são aditivas por
natureza — gradientes, sombras com brilho, tokens de componente
Premium — construídas SOBRE os tokens --sofia-* já existentes
(não com os hex crus do pacote). Nada troca de cor sozinho.
============================================================ */
:root {
/* ---------- gradientes (seção 4.6 do pacote 2.0, montados com os --sofia-* atuais) ---------- */
--sofia-gradient-brand: linear-gradient(135deg, var(--sofia-violet-600) 0%, var(--sofia-violet-400) 100%);
--sofia-gradient-premium: linear-gradient(135deg, var(--sofia-violet-600) 0%, var(--sofia-gold-400) 100%);
--sofia-gradient-surface: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
--sofia-gradient-hero: radial-gradient(circle at top right, rgba(167,139,250,.22), transparent 40%), var(--sofia-cosmic-950);
/* ---------- bordas semânticas (seção 8.2 do pacote 2.0) ---------- */
--sofia-border-default: rgba(255, 255, 255, .10);
--sofia-border-hover: var(--sofia-line-violet);
--sofia-border-premium: var(--sofia-line-gold);
--sofia-border-danger: rgba(168, 68, 60, .55); /* = --sofia-danger com alpha */
/* ---------- brilho (glow) adicional p/ componente Premium (glow-gold/violet já existiam, semânticos) ---------- */
--sofia-glow-premium: 0 0 24px rgba(212, 162, 78, .22);
/* ---------- curvas de animação (seção 12.2 do pacote 2.0) ---------- */
--sofia-ease-standard: cubic-bezier(.2, .8, .2, 1);
--sofia-ease-emphasized: cubic-bezier(.16, 1, .3, 1);
}
/* ------------------------------------------------------------
PADRÃO DE DEPRECIAÇÃO (registrado a pedido — nenhum token foi
depreciado ainda, isto é só o modelo pronto pra quando precisar):
Se um token --sofia-* precisar mudar de valor no futuro:
1. NÃO edite o valor do token antigo direto.
2. Crie um token novo com o valor novo.
3. Aponte o antigo pro novo via var(), com comentário
"@deprecated — use --sofia-x-novo. Remover após ."
4. Só remova o alias antigo depois que nenhum CSS do projeto
o referenciar mais (grep antes de apagar).
Exemplo (ilustrativo, NÃO aplicado — sofia-gold-400 continua
igual, isto é só documentação do padrão):
--sofia-gold-400-novo: #E0B060;
--sofia-gold-400: var(--sofia-gold-400-novo); // @deprecated
------------------------------------------------------------ */