/* ============================================================ VENTURA / SISTEMA DE DESIGN / TOKENS Fechado com o Victor em 05/08/2026, a partir de 18 referências. Cores amostradas por pixel. Escalas de fonte medidas em canvas. NUNCA escrever cor, fonte ou espaçamento cru no consumidor. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=DM+Serif+Display&family=Pinyon+Script&family=Space+Mono:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap'); :root{ /* ============ 1. COR ============ */ /* --- superfícies escuras --- */ --preto: #06070A; /* fundo padrão. Preto azulado, não neutro */ --preto-alt: #0C0E11; /* alternância de seção */ --preto-elevado: #101217; /* card sobre o preto */ /* --- superfícies claras --- */ --osso: #E8D9BD; /* fundo claro padrão, e texto no tema escuro */ --osso-alto: #FBF2E2; /* quase branco. Mesmo matiz do osso, 98% de luz */ /* --- verde, a segunda cromática --- */ --verde-bloco: #132526; /* card e caixa sobre o preto */ --verde-superficie: #263434; /* painel, sidebar, seção inteira */ /* --- acento --- */ --acento: #FB2B07; /* laranja. Só sobre fundo escuro */ --acento-claro: #E82209; /* V1. Laranja avermelhado, para fundo claro */ --acento-luz: #FFD2A0; /* núcleo do degradê */ --acento-sombra: #9B0011; /* onde o degradê morre. Vermelho da marca */ --acento-suave: rgba(251, 43, 7, .09); --acento-borda: rgba(251, 43, 7, .34); --acento-claro-suave: rgba(232, 34, 9, .10); /* --- texto --- */ --texto-escuro: #E8D9BD; --texto-escuro-sutil: rgba(232,217,189,.72); --texto-escuro-secundario: rgba(232,217,189,.55); --texto-escuro-fraco: rgba(232,217,189,.40); --texto-claro: #06070A; --texto-claro-sutil: rgba(6,7,10,.74); --texto-claro-secundario: rgba(6,7,10,.58); --texto-claro-fraco: rgba(6,7,10,.42); --sobre-acento: #FFFFFF; /* única exceção ao osso */ /* --- borda --- */ --borda-escura: rgba(232,217,189,.11); --borda-escura-forte: rgba(232,217,189,.20); --borda-clara: rgba(6,7,10,.12); --borda-clara-forte: rgba(6,7,10,.22); --borda-grid: rgba(232,217,189,.13); --borda-grid-claro: rgba(6,7,10,.10); /* ============ 2. TIPOGRAFIA ============ */ --fonte-display: 'Oswald', sans-serif; /* título. Caixa alta sempre */ --fonte-serif: 'DM Serif Display', serif; /* documento longo. Nunca caixa alta */ --fonte-enfase: 'Pinyon Script', cursive; /* SEMPRE uma palavra em destaque */ --fonte-mono: 'Space Mono', monospace; /* micro-label de canto */ --fonte-corpo: 'Inter', sans-serif; /* todo texto corrido */ --peso-display: 700; --texto-hero: clamp(46px, 10vw, 124px); --texto-h1: clamp(38px, 7.5vw, 88px); --texto-h2: clamp(30px, 5.6vw, 60px); --texto-h3: clamp(22px, 3.4vw, 34px); --texto-h4: 19px; --texto-corpo-g: 17px; --texto-corpo: 15px; --texto-corpo-p: 13px; --texto-legenda: 12px; --texto-micro: 10px; --entrelinha-display: .90; --entrelinha-titulo: 1.06; /* entra no cálculo da ênfase. Não mudar sem recalcular */ --entrelinha-corpo: 1.65; --tracking-display: -1px; --tracking-micro: 3px; /* --- ÊNFASE MANUSCRITA --- Fator MEDIDO em canvas, não estimado: a caixa alta da Oswald 700 tem 82,1px a 100px de corpo, e a minúscula da Pinyon tem 39,3px. 82,1 / 39,3 = 2,091. Esse fator faz a altura das duas bater. A ENTRELINHA É CALCULADA, nunca fixa: corpo vezes entrelinha tem que dar sempre o mesmo valor do título, senão a linha do título muda de altura. */ --enfase-escala: 2.091; --enfase-contorno: 0; /* traço puro */ /* ============ 3. GRÃO ============ Nível 4, o mais forte dos quatro testados. Duas camadas. Em fundo claro o mesmo ruído aparece muito mais, então cai. */ --grao-fino: .82; --grao-grosso: .45; --grao-fino-claro: .50; --grao-grosso-claro: .22; /* ============ 4. ESPAÇO ============ */ --e-xs: 6px; --e-sm: 12px; --e-md: 24px; --e-lg: 40px; --e-xl: 64px; --e-2xl: 96px; --largura-conteudo: 1240px; --largura-texto: 720px; --largura-estreita: 540px; --secao-y: clamp(56px, 9vw, 104px); --secao-x: clamp(20px, 4vw, 32px); /* ============ 5. FORMA E MOVIMENTO ============ */ --raio: 0; /* tudo reto. Exceção: ícone de vidro e badge pill */ --raio-pill: 999px; --alvo-toque: 44px; --t-rapida: .15s ease; --t-base: .25s ease; --t-lenta: .4s ease; /* ============ 6. LUZ ============ O centro do degradê vai SEMPRE dentro do próprio gradiente. Nunca empurrar o bloco de luz com inset negativo. */ --luz-topo: radial-gradient(64% 52% at 50% -8%, var(--acento-luz) 0%, var(--acento) 20%, var(--acento-sombra) 46%, rgba(6,7,10,0) 76%); --luz-canto: radial-gradient(44% 40% at 78% 12%, var(--acento-luz) 0%, var(--acento) 19%, var(--acento-sombra) 44%, rgba(6,7,10,0) 72%); --luz-verde: radial-gradient(66% 54% at 14% 100%, var(--verde-superficie) 0%, rgba(6,7,10,0) 66%); --luz-clara: radial-gradient(50% 44% at 80% 8%, #FFE9CE 0%, #FFC9A6 26%, rgba(232,217,189,0) 66%), radial-gradient(60% 50% at 8% 100%, #D9CDAE 0%, rgba(232,217,189,0) 62%); } /* ============================================================ TEMA. Aplique .tema-escuro, .tema-claro ou .tema-claro-alto no ou em qualquer bloco. Os componentes leem só estes aliases, nunca as cores brutas. É isso que faz a mesma peça funcionar nos três fundos sem reescrever nada. ============================================================ */ .tema-escuro{ --fundo: var(--preto); --fundo-alt: var(--preto-alt); --fundo-elevado: var(--preto-elevado); --texto: var(--texto-escuro); --texto-sutil: var(--texto-escuro-sutil); --texto-secundario: var(--texto-escuro-secundario); --texto-fraco: var(--texto-escuro-fraco); --cor-acento: var(--acento); --cor-acento-suave: var(--acento-suave); --borda: var(--borda-escura); --borda-forte: var(--borda-escura-forte); --cor-grid: var(--borda-grid); --g-fino: var(--grao-fino); --g-grosso: var(--grao-grosso); background: var(--fundo); color: var(--texto); } .tema-claro{ --fundo: var(--osso); --fundo-alt: var(--osso-alto); --fundo-elevado: var(--osso-alto); --texto: var(--texto-claro); --texto-sutil: var(--texto-claro-sutil); --texto-secundario: var(--texto-claro-secundario); --texto-fraco: var(--texto-claro-fraco); --cor-acento: var(--acento-claro); --cor-acento-suave: var(--acento-claro-suave); --borda: var(--borda-clara); --borda-forte: var(--borda-clara-forte); --cor-grid: var(--borda-grid-claro); --g-fino: var(--grao-fino-claro); --g-grosso: var(--grao-grosso-claro); background: var(--fundo); color: var(--texto); } .tema-claro-alto{ --fundo: var(--osso-alto); --fundo-alt: var(--osso); --fundo-elevado: #FFFFFF; --texto: var(--texto-claro); --texto-sutil: var(--texto-claro-sutil); --texto-secundario: var(--texto-claro-secundario); --texto-fraco: var(--texto-claro-fraco); --cor-acento: var(--acento-claro); --cor-acento-suave: var(--acento-claro-suave); --borda: var(--borda-clara); --borda-forte: var(--borda-clara-forte); --cor-grid: var(--borda-grid-claro); --g-fino: var(--grao-fino-claro); --g-grosso: var(--grao-grosso-claro); background: var(--fundo); color: var(--texto); }