/* ============================================================ VARIABLES — t06-pilates ⚡ ARQUIVO DE PERSONALIZAÇÃO DE DESIGN Edite aqui para mudar cores, fontes e espaçamentos. Não é necessário tocar em nenhum outro CSS. ============================================================ */ :root { /* ── PALETA DE CORES ─────────────────────────────────────── Perfil: Studio de Pilates / Saúde / Bem-estar Tom: Sage + Marfim + Caramelo — premium e acolhedor */ --color-bg: #F7F5F0; /* fundo geral (marfim quente) */ --color-surface: #FFFFFF; /* cards e seções brancas */ --color-primary: #5a3d4f; /* verde sage escuro — principal */ --color-primary-dark: #2A3F37; /* hover e estados ativos */ --color-primary-subtle: #EBF0EE; /* fundos suaves e ícones */ --color-accent: #C9A882; /* caramelo — destaque e CTAs secundários */ --color-accent-dark: #B08B60; /* hover do accent */ --color-text: #1C1C1C; /* texto principal */ --color-text-muted: #6B6B6B; /* texto secundário e descrições */ --color-divider: #E2DDD6; /* bordas e separadores */ --color-hero-overlay: rgba(20, 32, 28, 0.60); /* overlay do hero */ --color-whatsapp: #25D366; /* verde WhatsApp — não mude */ --color-whatsapp-dark: #128C7E; /* hover WhatsApp */ /* ── TIPOGRAFIA ──────────────────────────────────────────── Display : Gloock — editorial, elegante, serif suave Body : Outfit — clean, geométrica, boa legibilidade Para trocar: atualize aqui E o do Google Fonts no do index.html */ --font-display: 'Gloock', Georgia, serif; --font-body: 'Outfit', system-ui, -apple-system, sans-serif; /* ── ESCALA TIPOGRÁFICA ──────────────────────────────────── Baseada em 1rem = 16px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.625rem; /* 42px */ --text-5xl: 3.5rem; /* 56px */ --text-6xl: 4.75rem; /* 76px */ /* ── ESPAÇAMENTO ───────────────────────────────────────────*/ --section-py: 5rem; /* padding vertical das seções */ --container-max: 1140px; /* largura máxima do conteúdo */ --container-px: 1.5rem; /* padding lateral do container */ /* ── COMPONENTES ───────────────────────────────────────────*/ --radius-sm: 3px; --radius: 6px; --radius-lg: 12px; --shadow: 0 2px 16px rgba(0, 0, 0, 0.07); --shadow-md: 0 4px 32px rgba(0, 0, 0, 0.10); --ease: 0.28s ease; }