/* * ╔══════════════════════════════════════════════════════════════╗ * ║ CHEF DINIS PINTO — css/tokens.css ║ * ║ FONTE ÚNICA DE VERDADE — Design Tokens ║ * ║ ║ * ║ EDIÇÃO RÁPIDA: ║ * ║ • Cor dourada → --ouro ║ * ║ • Fundo principal → --negro ║ * ║ • Fonte de títulos → --fonte-t + URL Google Fonts no HTML ║ * ║ • Fonte de corpo → --fonte-c + URL Google Fonts no HTML ║ * ║ • Fonte de UI/nav → --fonte-u + URL Google Fonts no HTML ║ * ║ • Altura navbar → --navbar-h ║ * ╚══════════════════════════════════════════════════════════════╝ */ :root { /* ══════════════════════════════════════════════════════════ PALETA — Contraste WCAG 2.1 AA/AAA documentado ══════════════════════════════════════════════════════════ */ /* Fundos */ --negro: #0A0A0A; /* Fundo principal */ --grafite: #141414; /* Fundo secções escuras alternadas */ --grafite-2: #1C1C1C; /* Cards e elementos secundários */ --grafite-3: #242424; /* Hover em fundos escuros */ /* Texto */ --branco: #FFFFFF; /* Títulos hero */ --creme: #F5F0E8; /* Texto principal — 18.7:1 ✅ AAA */ --cinza: #9E9E9E; /* Texto secundário — 6.7:1 ✅ AA — aumentado */ --cinza-2: #787878; /* Texto terciário — 5.0:1 ✅ AA — aumentado */ --cinza-footer:#909090; /* Rodapé — 6.0:1 ✅ AA — aumentado */ /* Dourado — acento premium */ --ouro: #C6A76D; /* Dourado principal — 8.6:1 sobre negro ✅ AAA*/ --ouro-claro: #E2C98A; /* Hover/estados activos */ --ouro-escuro: #7A5C2A; /* Texto sobre fundos claros — 4.6:1 ✅ AA */ /* Fundo secção clara */ --clara: #F5F0E8; /* Mesma cor que --creme (papel semântico) */ /* WhatsApp (oficial — não alterar) */ --whatsapp: #25D366; --whatsapp-e: #128C7E; /* Feedback */ --sucesso: #2ecc71; --erro: #e74c3c; /* ══════════════════════════════════════════════════════════ TIPOGRAFIA Para trocar fonte: 1. Alterar variável aqui 2. Actualizar URL Google Fonts no de cada página ══════════════════════════════════════════════════════════ --fonte-t → Títulos H1/H2, navbar brand --fonte-c → Corpo de texto, parágrafos, citações --fonte-u → UI: navbar, botões, labels, badges ══════════════════════════════════════════════════════════ */ --fonte-t: 'Playfair Display', Georgia, serif; --fonte-c: 'Cormorant Garamond', Georgia, serif; --fonte-u: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Escala tipográfica fluid (clamp: min / preferred / max) */ --tx-xs: clamp(0.625rem, 1vw, 0.75rem); --tx-sm: clamp(0.75rem, 1.2vw, 0.875rem); --tx-base: clamp(1rem, 1.5vw, 1.05rem); --tx-lg: clamp(1.1rem, 2vw, 1.25rem); --tx-xl: clamp(1.25rem, 2.5vw, 1.5rem); --tx-2xl: clamp(1.5rem, 3vw, 2rem); --tx-3xl: clamp(1.8rem, 3.5vw, 3rem); --tx-hero: clamp(2.8rem, 6vw, 5.5rem); /* ══════════════════════════════════════════════════════════ ESPAÇAMENTO — Base 8px ══════════════════════════════════════════════════════════ */ --sp-1: 0.5rem; /* 8px */ --sp-2: 1rem; /* 16px */ --sp-3: 1.5rem; /* 24px */ --sp-4: 2rem; /* 32px */ --sp-5: 2.5rem; /* 40px */ --sp-6: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-10: 5rem; /* 80px */ --sp-12: 6rem; /* 96px */ --secao-py: clamp(5rem, 8vw, 7rem); /* Padding vertical das secções */ /* ══════════════════════════════════════════════════════════ LAYOUT ══════════════════════════════════════════════════════════ */ --topbar-h: 36px; /* Altura da barra de topo dourada */ --navbar-h: 72px; /* Altura da navbar */ --header-h: 108px; /* topbar + navbar (padding-top do body) */ --radius: 3px; /* Border radius padrão */ --radius-lg: 8px; /* Border radius cards/blocos */ /* ══════════════════════════════════════════════════════════ NAVBAR — alterar apenas estas vars para customizar ══════════════════════════════════════════════════════════ */ --nav-link-size: 0.72rem; --nav-link-gap: 0.2rem; --nav-link-pad: 0.5rem 0.85rem; --nav-brand-size: 1.55rem; --nav-underline-h: 2px; --nav-mobile-bg: #0f0f0f; /* ══════════════════════════════════════════════════════════ TRANSIÇÕES ══════════════════════════════════════════════════════════ */ --t-fast: 0.18s ease; --t-base: 0.28s ease; --t-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1); --t-reveal: 0.75s cubic-bezier(0.4, 0, 0.2, 1); /* ══════════════════════════════════════════════════════════ SOMBRAS ══════════════════════════════════════════════════════════ */ --shadow-sm: 0 2px 8px rgba(0,0,0,.25); --shadow-md: 0 4px 20px rgba(0,0,0,.35); --shadow-lg: 0 8px 40px rgba(0,0,0,.5); /* ══════════════════════════════════════════════════════════ Z-INDEX — Hierarquia de camadas ══════════════════════════════════════════════════════════ */ --z-base: 1; --z-sticky: 200; --z-navbar: 1050; --z-topbar: 1060; --z-cookie: 9999; }