/* ======================================================================== NOVRA CONSULTORIA · DESIGN TOKENS v1.0 Sistema visual baseado no Brand Guidelines V1 Última atualização: Maio 2026 ======================================================================== */ :root { /* ==================================================================== 01 · CORES — PALETA OFICIAL ==================================================================== */ /* Primárias · Núcleo da Marca */ --color-onyx: #0A0A0B; /* Preto profundo · backgrounds dark */ --color-ink: #1A1A1D; /* Preto secundário · cards dark */ --color-bone: #F5F2EC; /* Off-white quente · backgrounds light */ /* Marca · Assinatura */ --color-azure: #1E40FF; /* Azul autoridade · CTAs e destaques */ --color-azure-glow: #5B7FFF; /* Azul suave · hover e variações */ /* Apoio · Dados & Crescimento */ --color-green: #00D97E; /* Verde sinal · KPIs positivos */ --color-mint: #A8F0CE; /* Mint suave · backgrounds de sucesso */ /* Acento · Premium */ --color-gold: #C9A961; /* Champagne · momentos premium */ /* Neutros · Suporte */ --color-smoke-900: #2A2A2E; /* Bordas em dark */ --color-smoke-600: #6B6B73; /* Textos secundários */ --color-smoke-300: #D4D2CC; /* Bordas em light */ --color-smoke-100: #EDEAE3; /* Backgrounds alternativos */ /* Aliases semânticos · facilita manutenção */ --bg-primary: var(--color-bone); --bg-dark: var(--color-onyx); --bg-alt: var(--color-smoke-100); --text-primary: var(--color-onyx); --text-secondary: var(--color-smoke-600); --text-inverse: var(--color-bone); --border-light: var(--color-smoke-300); --border-dark: var(--color-smoke-900); --accent-primary: var(--color-azure); --accent-success: var(--color-green); --accent-premium: var(--color-gold); /* ==================================================================== 02 · TIPOGRAFIA ==================================================================== */ /* Famílias */ --font-display: 'Satoshi', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* Pesos */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* Tamanhos · escala fluida (clamp para responsividade) */ --fs-hero: clamp(48px, 8vw, 96px); /* H1 Display */ --fs-h1: clamp(40px, 6vw, 72px); /* H1 padrão */ --fs-h2: clamp(32px, 5vw, 52px); /* H2 Seções */ --fs-h3: clamp(24px, 3vw, 32px); /* H3 Subtítulos */ --fs-h4: 22px; /* H4 Destaques */ --fs-lead: 20px; /* Lead paragraph */ --fs-body: 17px; /* Corpo principal */ --fs-body-sm: 15px; /* Corpo pequeno */ --fs-caption: 13px; /* Captions e labels */ --fs-micro: 11px; /* Microcopy */ --fs-kpi: clamp(80px, 12vw, 160px); /* Números hero */ /* Line-heights */ --lh-tight: 0.95; /* Hero / KPIs */ --lh-snug: 1.1; /* Headings */ --lh-normal: 1.6; /* Body padrão */ --lh-relaxed: 1.7; /* Body em destaque */ /* Letter-spacing (tracking) */ --ls-hero: -0.04em; /* H1 Display */ --ls-tight: -0.03em; /* H2 */ --ls-snug: -0.02em; /* H3 */ --ls-normal: 0; /* Body */ --ls-wide: 0.1em; /* Captions */ --ls-wider: 0.15em; /* Labels uppercase */ --ls-widest: 0.2em; /* Mockup tags */ /* ==================================================================== 03 · ESPAÇAMENTO · GRID DE 8PX (REGRA DE OURO 04) ==================================================================== */ --space-1: 4px; /* Micro ajustes */ --space-2: 8px; /* Base do grid */ --space-3: 12px; --space-4: 16px; /* Espaçamento padrão */ --space-5: 24px; --space-6: 32px; /* Espaçamento médio */ --space-7: 48px; --space-8: 64px; /* Espaçamento grande */ --space-9: 96px; /* Seções */ --space-10: 128px; /* Bloco maior */ /* Containers · larguras máximas */ --container-sm: 720px; --container-md: 960px; --container-lg: 1200px; --container-xl: 1400px; /* Padding lateral responsivo */ --gutter: clamp(24px, 5vw, 64px); /* ==================================================================== 04 · BORDAS E RAIOS ==================================================================== */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; /* Cards e botões (padrão sistema) */ --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Pills e tags */ --border-width: 1px; --border-style: solid; /* ==================================================================== 05 · SOMBRAS · SUAVES (REGRA DE OURO 05: ZERO SOMBRA PESADA) ==================================================================== */ --shadow-none: none; --shadow-sm: 0 2px 8px rgba(10, 10, 11, 0.04); --shadow-md: 0 8px 24px rgba(10, 10, 11, 0.06); --shadow-lg: 0 12px 32px rgba(10, 10, 11, 0.08); --shadow-focus: 0 0 0 3px rgba(30, 64, 255, 0.25); /* ==================================================================== 06 · TRANSIÇÕES E ANIMAÇÃO ==================================================================== */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ==================================================================== 07 · Z-INDEX · CAMADAS ==================================================================== */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; /* ==================================================================== 08 · BREAKPOINTS · (referência · usar em media queries) ==================================================================== */ /* --bp-sm: 640px --bp-md: 768px --bp-lg: 1024px --bp-xl: 1280px --bp-2xl: 1536px */ } /* ============================================================================ FONTES EXTERNAS · CARREGAMENTO Satoshi via Fontshare · Inter via Google Fonts IMPORTANTE: Estes @import devem estar AQUI ou no dos HTMLs ============================================================================ */ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');