/* ========================================================================= HC GROUP STORE — DESIGN TOKENS (fonte única da verdade) ------------------------------------------------------------------------- Regras de uso: · Nenhum componente usa valor solto: sempre var(--hcg-*). · Cores: use os ALIASES semânticos (--hcg-brand, --hcg-ink, --hcg-line...) — as escalas numéricas existem para gerar novos aliases, não para uso direto nos componentes. · Espaçamento: escala de 4px (--hcg-space-*). Não inventar valores. · Tipografia: só os degraus da escala --hcg-text-*. ========================================================================= */ :root { /* ------------------------------------------------------------------ * 1. COR — escala da marca * ------------------------------------------------------------------ */ --hcg-blue-50: #edf8fb; --hcg-blue-100: #d8f0f7; --hcg-blue-200: #a9dceb; --hcg-blue-300: #72c2dc; --hcg-blue-400: #289cc3; --hcg-blue-500: #005c84; /* azul institucional do site atual */ --hcg-blue-600: #004e70; --hcg-blue-700: #003f5d; --hcg-blue-800: #07344b; --hcg-blue-900: #08283b; /* Rosa principal da marca e dos CTAs. */ --hcg-rose-50: #fdf4f6; --hcg-rose-100: #fbeef1; --hcg-rose-200: #f6d4dd; --hcg-rose-300: #f0aabc; --hcg-rose-400: #ec7391; --hcg-rose-500: #e53c61; --hcg-rose-600: #c22b4d; --hcg-rose-700: #9e2140; --hcg-rose-800: #741931; --hcg-rose-900: #4e1122; /* Neutros quentes (tom rosado) */ --hcg-neutral-0: #ffffff; --hcg-neutral-50: #faf5f6; --hcg-neutral-100: #f3ecee; --hcg-neutral-200: #eadfe3; --hcg-neutral-300: #d9cbd1; --hcg-neutral-400: #a9979f; --hcg-neutral-500: #6d5f66; --hcg-neutral-700: #453a40; --hcg-neutral-800: #2a1e24; --hcg-neutral-900: #241a1f; /* Semânticas */ --hcg-success: #1e9e6a; --hcg-success-dark: #147a50; --hcg-success-soft: #e8f7f0; --hcg-warning: #b7791f; --hcg-warning-soft: #fdf3e3; --hcg-danger: #c0392b; --hcg-danger-soft: #fdecea; --hcg-whatsapp: #25d366; --hcg-success-on-dark: #baf0d8; /* texto de sucesso sobre fundo escuro */ /* Aliases semânticos — USE ESTES nos componentes */ --hcg-brand: var(--hcg-rose-500); --hcg-brand-hover: var(--hcg-rose-600); --hcg-brand-soft: var(--hcg-rose-100); --hcg-ink: var(--hcg-neutral-800); /* texto principal */ --hcg-ink-soft: var(--hcg-neutral-500); /* texto secundário */ --hcg-line: var(--hcg-neutral-200); /* bordas/divisórias */ --hcg-surface: var(--hcg-neutral-0); /* fundo de cartões */ --hcg-surface-alt: var(--hcg-neutral-50); /* fundo de seções */ --hcg-surface-dark: var(--hcg-blue-500); /* rodapé/newsletter */ --hcg-institutional-blue: var(--hcg-blue-500); --hcg-institutional-blue-hover: var(--hcg-blue-700); --hcg-on-dark: #f4fbfd; /* texto sobre escuro */ --hcg-on-dark-soft: #c7e2ec; /* Alphas de superfície/atmosfera */ --hcg-brand-a05: rgba(229, 60, 97, 0.05); --hcg-brand-a09: rgba(229, 60, 97, 0.09); --hcg-brand-a14: rgba(229, 60, 97, 0.14); --hcg-brand-a18: rgba(229, 60, 97, 0.18); --hcg-brand-a20: rgba(229, 60, 97, 0.20); --hcg-brand-a28: rgba(229, 60, 97, 0.28); --hcg-brand-a35: rgba(229, 60, 97, 0.35); --hcg-success-a10: rgba(30, 158, 106, 0.10); --hcg-white-a36: rgba(255, 255, 255, 0.36); --hcg-white-a42: rgba(255, 255, 255, 0.42); --hcg-white-a52: rgba(255, 255, 255, 0.52); --hcg-white-a56: rgba(255, 255, 255, 0.56); --hcg-white-a58: rgba(255, 255, 255, 0.58); --hcg-white-a72: rgba(255, 255, 255, 0.72); --hcg-white-a75: rgba(255, 255, 255, 0.75); --hcg-white-a78: rgba(255, 255, 255, 0.78); --hcg-white-a85: rgba(255, 255, 255, 0.85); --hcg-white-a92: rgba(255, 255, 255, 0.92); --hcg-burgundy-a58: rgba(0, 92, 132, 0.58); /* Compatibilidade com nomes antigos (não usar em código novo) */ --hcg-rose: var(--hcg-brand); --hcg-rose-dark: var(--hcg-brand-hover); --hcg-rose-soft: var(--hcg-brand-soft); --hcg-blush: var(--hcg-surface-alt); --hcg-green: var(--hcg-success); --hcg-amber: var(--hcg-warning); --hcg-white: var(--hcg-neutral-0); /* ------------------------------------------------------------------ * 2. TIPOGRAFIA * ------------------------------------------------------------------ */ --hcg-font-display: "Bricolage Grotesque", "Segoe UI", sans-serif; /* títulos, preços */ --hcg-font-body: "Figtree", "Segoe UI", sans-serif; /* todo o resto */ /* Escala de tamanhos (única permitida) */ --hcg-text-2xs: 0.72rem; /* selos, contador, uppercase mínimo */ --hcg-text-xs: 0.8rem; /* metadados, legendas */ --hcg-text-sm: 0.9rem; /* UI: menus, labels, botões padrão */ --hcg-text-base: 1rem; /* corpo de texto */ --hcg-text-md: 1.1rem; /* lead, botões grandes, preço card */ --hcg-text-lg: 1.25rem; /* h3 / subtítulos */ --hcg-text-xl: clamp(1.4rem, 3vw, 2rem); /* h2 / títulos de seção */ --hcg-text-2xl: clamp(1.9rem, 4vw, 2.8rem); /* h1 / hero */ --hcg-text-price: 1.8rem; /* preço na página de produto */ /* Pesos */ --hcg-weight-regular: 400; --hcg-weight-medium: 500; --hcg-weight-semibold: 600; --hcg-weight-bold: 700; --hcg-weight-black: 800; /* Altura de linha e tracking */ --hcg-leading-tight: 1.15; /* títulos */ --hcg-leading-snug: 1.35; /* cards, UI compacta */ --hcg-leading-base: 1.6; /* corpo de texto */ --hcg-tracking-tight: 0; --hcg-tracking-wide: 0.05em; /* uppercase/eyebrows */ /* ------------------------------------------------------------------ * 3. ESPAÇAMENTO — escala de 4px * ------------------------------------------------------------------ */ --hcg-space-1: 0.25rem; /* 4px */ --hcg-space-2: 0.5rem; /* 8px */ --hcg-space-3: 0.75rem; /* 12px */ --hcg-space-4: 1rem; /* 16px */ --hcg-space-5: 1.25rem; /* 20px */ --hcg-space-6: 1.5rem; /* 24px */ --hcg-space-8: 2rem; /* 32px */ --hcg-space-10: 2.5rem; /* 40px */ --hcg-space-12: 3rem; /* 48px */ --hcg-space-16: 4rem; /* 64px */ /* Ritmos prontos */ --hcg-section-y: clamp(var(--hcg-space-10), 6vw, var(--hcg-space-16)); /* respiro vertical de seção */ --hcg-card-pad: var(--hcg-space-4); /* padding interno de cards */ --hcg-gap-grid: var(--hcg-space-4); /* gap padrão de grades */ /* ------------------------------------------------------------------ * 4. FORMA — raios, bordas, sombras * ------------------------------------------------------------------ */ --hcg-radius-sm: 8px; /* inputs, avisos */ --hcg-radius-md: 14px; /* cards, tabelas, painéis */ --hcg-radius-pill: 999px; /* botões, selos, buscas */ --hcg-radius-round: 50%; /* avatares, ícones, FAB */ --hcg-border-w: 1.5px; /* largura única de borda */ --hcg-shadow-sm: 0 4px 14px -6px rgba(42, 30, 36, 0.14); --hcg-shadow-md: 0 10px 30px -12px rgba(42, 30, 36, 0.18); --hcg-shadow-lg: 0 22px 60px -28px rgba(42, 30, 36, 0.34); --hcg-shadow-float: 0 26px 70px -34px rgba(0, 92, 132, 0.42); --hcg-shadow-brand: 0 8px 20px -8px rgba(229, 60, 97, 0.55); --hcg-shadow-whatsapp: 0 10px 24px -6px rgba(37, 211, 102, 0.55); --hcg-focus-ring: 0 0 0 3px rgba(229, 60, 97, 0.12); /* ------------------------------------------------------------------ * 5. CONTROLES — botões e campos * ------------------------------------------------------------------ */ --hcg-control-h-sm: 38px; /* botão da busca, quantidade */ --hcg-control-h: 46px; /* inputs e botões padrão */ --hcg-control-h-lg: 54px; /* CTAs principais */ --hcg-btn-pad-x: var(--hcg-space-6); --hcg-btn-pad-x-lg: var(--hcg-space-8); --hcg-input-pad-x: var(--hcg-space-4); /* ------------------------------------------------------------------ * 6. LAYOUT E MOVIMENTO * ------------------------------------------------------------------ */ --hcg-container-max: 1240px; --hcg-container-gutter: 2.5rem; /* usado como: width: min(max, 100% - gutter) */ --hcg-z-header: 90; --hcg-z-dropdown: 95; --hcg-z-float: 98; /* WhatsApp flutuante */ --hcg-z-drawer: 120; /* menu mobile */ --hcg-z-skip: 999; --hcg-motion-fast: 150ms; --hcg-motion-base: 220ms; --hcg-motion-slow: 420ms; --hcg-motion-orbit: 7600ms; --hcg-curve-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --hcg-curve-spring: cubic-bezier(0.16, 1, 0.3, 1); --hcg-ease-fast: var(--hcg-motion-fast) var(--hcg-curve-standard); --hcg-ease: var(--hcg-motion-base) var(--hcg-curve-standard); --hcg-ease-slow: var(--hcg-motion-slow) var(--hcg-curve-spring); }