/* ================================================== VIPZUE — DESIGN TOKENS Paleta oficial, tipografia, espaçamento, motion. Fonte de verdade: /identidade + DOCUMENTOS/00_REGRAS_GLOBAIS_SITES.txt.txt ================================================== */ :root { /* ---- Paleta oficial VIPZUE ---- */ --carvao: #141210; --grafite: #22201d; --cafe: #2f251f; --marrom: #4a372b; --bronze: #8a6a4b; --champagne: #c3a881; --bege: #b8aa96; --champagne-claro: #e7d6b7; --marfim: #f3ede3; /* Mesmas cores em componentes RGB, para compor luz e profundidade com transparência sem precisar inventar tons intermediários. REGRA: nenhum valor de cor fora desta lista pode aparecer no projeto. */ --carvao-rgb: 20 18 16; --grafite-rgb: 34 32 29; --cafe-rgb: 47 37 31; --marrom-rgb: 74 55 43; --bronze-rgb: 138 106 75; --champagne-rgb: 195 168 129; --bege-rgb: 184 170 150; --champagne-claro-rgb: 231 214 183; --marfim-rgb: 243 237 227; /* ---- Papéis semânticos ---- */ --bg-base: var(--carvao); --bg-raised: var(--grafite); --bg-deep: var(--cafe); --bg-accent-soft: var(--marrom); --accent: var(--champagne); --accent-soft: var(--bronze); --text-primary: var(--marfim); --text-secondary: var(--champagne-claro); --text-muted: var(--bege); --border-soft: rgb(var(--champagne-rgb) / 0.18); --border-strong: rgb(var(--champagne-rgb) / 0.38); /* ---- Tipografia / MAPA TIPOGRÁFICO ---- Definido por comparação visual dos glifos da referência, não apenas pelo papel nomeado no doc 00. EXPRESSÃO — headlines e itálicos editoriais. A referência mostra serifada de alto contraste com hastes finas, terminais afiados e itálico caligráfico: esse desenho corresponde a CANELA (o guia tipográfico indica Canela para "Hero do site"), com Noe Display como segunda opção. Gloock é a fonte nomeada no doc 00 e está carregada; é um pouco mais pesada que a referência. ESTRUTURA — menu, textos, cards, botões, FAQ, footer: SWITZER. ACENTO — números 01–07, etapas, P/J/C, microindicadores: CLASH DISPLAY. Gloock, Switzer e Clash Display são carregadas dos distribuidores oficiais (ver do index.html). Canela e Noe Display são comerciais e seguem pendentes — quando os arquivos existirem, entram na frente da pilha sem exigir nenhuma outra alteração. */ --font-expressao: "Canela", "Noe Display", "Gloock", Didot, "Bodoni MT", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --font-estrutura: "Switzer", "Suisse Int'l", Roobert, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-acento: "Clash Display", "Switzer", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---- Escala tipográfica fluida ---- Calibrada contra a referência: as headlines editoriais são bem maiores e com entrelinha mais fechada do que uma escala genérica. */ --fs-display: clamp(2.6rem, 1.2rem + 4.9vw, 5.1rem); --fs-h1: clamp(2.1rem, 1.15rem + 3.2vw, 3.45rem); --fs-h2: clamp(1.8rem, 1.1rem + 2.6vw, 3rem); --fs-h3: clamp(1.35rem, 1.05rem + 1.1vw, 1.95rem); --fs-body-lg: clamp(1rem, 0.94rem + 0.28vw, 1.13rem); --fs-body: 0.975rem; --fs-small: 0.855rem; --fs-micro: 0.72rem; /* Entrelinha e tracking das headlines editoriais */ --lh-display: 1.1; --lh-headline: 1.12; --tracking-headline: -0.015em; --tracking-eyebrow: 0.22em; /* ---- Espaçamento ---- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* Espaçamento vertical das seções (topo/base de cada .section). Era um valor fixo de 9rem (144px) em qualquer largura — no mobile isso sozinho somava ~288px de padding vazio por seção, e mais o padding das transições entre elas, o scroll virava muito espaço morto. Agora é fluido: encolhe no celular, sem crescer tanto no desktop quanto antes. */ --space-3xl: clamp(2.75rem, 1.4rem + 5.6vw, 6.5rem); --container-max: 1360px; --container-pad: clamp(1.25rem, 2vw + 0.5rem, 4rem); /* ---- Raio / bordas ---- */ --radius-sm: 6px; --radius-md: 14px; --radius-lg: 24px; /* ---- Motion ---- */ --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 220ms; --dur-base: 450ms; --dur-slow: 750ms; /* ---- Camadas ---- */ --z-nav: 40; --z-transition: 10; --z-modal: 100; color-scheme: dark; } /* prefers-reduced-motion: variáveis para desligar deslocamentos em massa nos módulos que leem estas custom properties diretamente. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } }