/* ============================================================================ VERBUS OS — CAMADA DE TOKEN (Design System "Editorial Luxury") ---------------------------------------------------------------------------- FASE: F13 · TAREFA: R1 · SLOT: CONS2 (Frontend) FONTE DE VERDADE Autoridade de conteudo .... CREW_Verbus/ESPECIFICACAO.md secao 6 Norma de implementacao ... .opencode/skills/verbus-design-tokens/SKILL.md Espelho em ............... frontend/tailwind.config.js (le, nunca inventa hex) REGRA EDITORIAL (a frase que decide) "Areia como base. Floresta como autoridade. Esmeralda como acao. Ouro como detalhe." DOGMA R8 Proibido literal hexadecimal em componente (.tsx/.jsx/.vue/.html). Toda cor vem deste arquivo, por var(--verbus-*). Este e o UNICO lugar do repositorio onde um hex de cor e permitido — e mesmo aqui ele existe apenas como definicao, nunca como uso. IMPORTACAO Next.js (F12): import "@/lib/tokens.css"; no app/layout.tsx Landing (F13): as custom properties sao derivadas em runtime de tailwind.config no do index.html, para que o hex nao se repita no HTML (portao G6, criterio 2). ========================================================================= */ :root { /* -------------------------------------------------------------------------- 1. COR — 12 TOKENS CANONICOS (ESPECIFICACAO 6.1 / SKILL 3) ------------------------------------------------------------------------ */ /* Floresta profunda. Fundo escuro, headers, footer, barra de progresso. */ --verbus-forest: #0D1A10; /* Papel / areia premium. FUNDO PRINCIPAL. Cards, superficies, PDF. */ --verbus-paper: #FAF8F0; /* Esmeralda. CTA PRIMARIO, indicadores de lucro, links ativos, icone de acao. NUNCA em bloco grande de fundo — saturacao em area grande cansa a retina e compete com o papel (ESPECIFICACAO 6.2). */ --verbus-emerald: #1C7A4B; /* Ouro. Detalhe: titulo de destaque, numeracao de orcamento, bullet premium. NUNCA em fundo. Peso minimo 500. Nunca em corpo continuo (contraste). */ --verbus-gold: #96742A; /* Ouro DE TEXTO — D-15. Variante do ouro, mesmo matiz (H 41) e mesma saturacao (56%), so com mais luminosidade. Por que existe: --verbus-gold sobre a floresta da propria landing da 4.12:1 (medido por getComputedStyle no R1c, nao estimado). Abaixo de 4.5. Escurecer o ouro nao resolveria: quase todo o texto em ouro da landing esta sobre fundo ESCURO, e escurecer piora. O caminho e clarear. #A8822F fecha 5.03:1 sobre --verbus-forest. USO: so para TEXTO em ouro sobre superficie escura. --verbus-gold continua valendo para borda decorativa, bullet, hairline de divisor e num-big — onde WCAG nao se aplica. Em papel, ouro de texto NAO deve ser usado: la o contraste cai para 3.35:1 e o certo e o token de texto da superficie. */ --verbus-gold-text: #A8822F; /* Corpo de texto. Sobre --verbus-paper: ~13:1 — WCAG AAA. */ --verbus-body: #1A2A1F; /* Cinza-verde. Captions, microcopy, disabled, icones inativos. */ --verbus-secondary: #6E7B72; /* Areia suave. Zebrado de tabela, callout, hover de card. */ --verbus-surface: #F4F1E8; /* Floresta como TEXTO sobre fundo claro, quando precisa contraste maximo. */ --verbus-ink: #0D1A10; /* Papel sobre floresta: AAA em texto grande, AA em corpo. */ --verbus-on-forest: #FAF8F0; /* Sinonimo funcional de --verbus-emerald. Mesmo hex, papeis diferentes: emerald e a COR DE ACAO, success e o SEMANTICO DE ESTADO. Nao separe. */ --verbus-success: #1C7A4B; /* Ouro saturado. Badge de urgencia ("orcamento parado ha 3 dias"). */ --verbus-warn: #B8762A; /* Vinho queimado discreto. Erro sem quebrar a elegancia. */ --verbus-danger: #8B2E1F; /* Sinal ao vivo, micro-interacoes. Em uso restrito ao dark mode (D-02). */ --verbus-mint: #22E584; /* -------------------------------------------------------------------------- 2. FORMA — RAIO (ESPECIFICACAO 6.2) "Borda em pill (24px+) estraga o ar editorial e aproxima o produto de fintech generica." ------------------------------------------------------------------------ */ --radius-btn: 4px; /* Botao, badge, campo. Padrao. */ --radius-card: 8px; /* Card, painel, acordeao. */ --radius-wa: 12px 12px 12px 2px; /* Balao de WhatsApp: cauda no canto. */ /* -------------------------------------------------------------------------- 3. TIPOGRAFIA (ESPECIFICACAO 6.4) O contraste e SEMANTICO, nao decorativo. Serifa = editorial, curado. Sans = rapido de ler. NUNCA duas serifas juntas. ------------------------------------------------------------------------ */ --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Inter", "SF Pro", "DM Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace; --font-numeric: "Inter", tabular-nums; /* -------------------------------------------------------------------------- 4. ESCALA — mobile-first, clamp (ESPECIFICACAO 6.5) line-height: display 1.1-1.15 · body 1.6 · microcopy 1.4 ------------------------------------------------------------------------ */ --fs-hero: clamp(2.5rem, 5.5vw, 4.5rem); /* 40-72px */ --fs-h2: clamp(1.75rem, 3.2vw, 2.75rem); /* 28-44px */ --fs-h3: clamp(1.25rem, 2rem, 1.75rem); /* 20-28px */ --fs-lead: clamp(1.125rem, 1.4vw, 1.375rem); /* 18-22px */ --fs-body: clamp(1rem, 1.1vw, 1.125rem); /* 16-18px */ --fs-small: 0.875rem; /* 14px */ --fs-micro: 0.75rem; /* 12px */ --lh-display: 1.15; --lh-body: 1.6; --lh-micro: 1.4; /* -------------------------------------------------------------------------- 5. GRID (ESPECIFICACAO 6.6) Desktop 12 colunas, margem lateral 80px-192px. Mobile 4 colunas, 24px. ------------------------------------------------------------------------ */ --grid-margin-mobile: 1.5rem; /* 24px */ --grid-margin-desktop: 5rem; /* 80px */ --grid-margin-wide: 12rem; /* 192px */ /* -------------------------------------------------------------------------- 6. MOVIMENTO (ESPECIFICACAO 6.8) Discreto e FUNCIONAL. Nunca decorativo. ------------------------------------------------------------------------ */ --motion-fast: 200ms; --motion-reveal: 400ms; --ease-editorial: cubic-bezier(0.2, 0.8, 0.2, 1); /* Sombra de hover: esmeralda, nunca preta — mantem a identidade cromatica. */ --shadow-btn: 0 8px 24px -8px rgb(28 122 75 / 0.4); --shadow-card: 0 12px 32px -12px rgb(13 26 16 / 0.12); } /* ============================================================================ PADROES DE COMPONENTE (SKILL 7) Nao sao obrigatorios — sao a referencia de "como o token vira interface". Use no componente como