/* ========================================================================== Design System · Dra. Bruna Fonseca · tokens.css (v1.0 · 2026-10-31) Base: Manual de Identidade Visual. Cores oficiais medidas dos arquivos .ai. Uso: antes de components.css. Fonte: carregue Montserrat (300,400,500,600) do Google Fonts. ========================================================================== */ :root { /* ---------- 1. Cores oficiais da marca (não alterar) ---------- */ --bf-verde-profundo: #1E3A3A; /* principal: títulos, texto, rodapé */ --bf-bordo: #7A2535; /* destaque: CTA "Agendar" */ --bf-salvia: #4D8A7E; /* apoio: ícones, grafismos, detalhes */ --bf-pedra: #71756E; /* apoio: bordas, legendas grandes */ --bf-perola: #F3F2EB; /* fundo base */ --bf-preto: #1D1D1B; /* preto de apoio */ --bf-branco: #FFFFFF; /* ---------- 2. Escalas derivadas (para estados e acessibilidade) ---------- */ --bf-verde-950: #142828; /* hover sobre verde profundo, overlays */ --bf-verde-900: #1E3A3A; /* = verde profundo */ --bf-salvia-50: #EEF4F2; --bf-salvia-100: #DCEAE6; /* fundo de ícones (manual) */ --bf-salvia-200: #B8D2CB; --bf-salvia-300: #7FB5A9; /* sálvia sobre fundo escuro (5.3:1) */ --bf-salvia-500: #4D8A7E; /* = sálvia oficial, só decorativo/ícones */ --bf-salvia-700: #3B6F64; /* sálvia com texto: botão WhatsApp (5.1:1) */ --bf-salvia-800: #2F5E55; /* hover do botão WhatsApp */ --bf-bordo-50: #F6E9EB; --bf-bordo-400: #9C3346; --bf-bordo-500: #7A2535; /* = bordô oficial */ --bf-bordo-600: #5E1C29; /* hover / pressionado */ --bf-areia: #E8E7DE; /* superfície alternada (manual) */ --bf-linha: #DCDDD5; /* bordas suaves de cards (manual) */ --bf-linha-forte: #CFD1C8; /* bordas de campos, divisores */ --bf-pedra-700: #61655E; /* texto secundário em fundo pérola (5.3:1) */ --bf-erro: #B3261E; --bf-erro-50: #FBEDEC; /* ---------- 3. Tokens semânticos (use estes nos componentes) ---------- */ --color-bg: var(--bf-perola); --color-bg-alt: var(--bf-areia); --color-surface: var(--bf-branco); --color-surface-dark: var(--bf-verde-profundo); --color-text: var(--bf-verde-profundo); --color-text-muted: var(--bf-pedra-700); --color-text-on-dark: var(--bf-perola); --color-text-muted-on-dark: #B8C4BF; --color-heading: var(--bf-verde-profundo); --color-accent: var(--bf-bordo); --color-accent-hover: var(--bf-bordo-600); --color-support: var(--bf-salvia); --color-support-on-dark: var(--bf-salvia-300); --color-whatsapp: var(--bf-salvia-700); --color-whatsapp-hover: var(--bf-salvia-800); --color-border: var(--bf-linha); --color-border-strong: var(--bf-linha-forte); --color-border-on-dark: rgba(243, 242, 235, .18); --color-link: var(--bf-bordo); --color-focus: var(--bf-bordo); --color-focus-on-dark: var(--bf-perola); --color-error: var(--bf-erro); --color-error-bg: var(--bf-erro-50); --color-success: var(--bf-salvia-700); --color-icon-bg: var(--bf-salvia-100); /* ---------- 4. Tipografia ---------- */ --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif; --fw-light: 300; /* detalhes, contatos */ --fw-regular: 400; /* texto corrido */ --fw-medium: 500; /* assinaturas, eyebrow */ --fw-semibold: 600; /* títulos e botões */ /* Escala fluida: mínimo em 375px, máximo em 1280px */ --fs-display: clamp(2.5rem, 1.88rem + 2.65vw, 4rem); /* 40 → 64 */ --fs-h1: clamp(2.125rem, 1.67rem + 1.94vw, 3.25rem); /* 34 → 52 */ --fs-h2: clamp(1.75rem, 1.44rem + 1.33vw, 2.5rem); /* 28 → 40 */ --fs-h3: clamp(1.375rem, 1.22rem + .66vw, 1.75rem); /* 22 → 28 */ --fs-h4: clamp(1.125rem, 1.02rem + .44vw, 1.375rem); /* 18 → 22 */ --fs-lead: clamp(1.125rem, 1.07rem + .22vw, 1.25rem); /* 18 → 20 */ --fs-body: 1.0625rem; /* 17 */ --fs-small: .9375rem; /* 15 */ --fs-caption: .8125rem; /* 13 */ --fs-eyebrow: .8125rem; /* 13, caixa-alta espaçada */ --fs-button: .9375rem; /* 15, caixa-alta */ --lh-tight: 1.1; --lh-heading: 1.2; --lh-body: 1.6; --ls-eyebrow: .22em; --ls-button: .12em; --measure: 65ch; /* largura máxima de parágrafos */ /* ---------- 5. Espaçamento (base 4px) ---------- */ --space-1: .25rem; /* 4 */ --space-2: .5rem; /* 8 */ --space-3: .75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --section-y: clamp(4rem, 2.6rem + 6vw, 8rem); /* 64 → 128 */ --gutter: clamp(1.25rem, .9rem + 1.6vw, 3rem); /* 20 → 48 */ /* ---------- 6. Layout ---------- */ --container: 75rem; /* 1200 */ --container-narrow: 48rem; /* 768, textos longos */ --header-h: 5rem; /* 80 desktop */ --header-h-mobile: 4rem; /* 64 mobile */ /* Breakpoints (referência; CSS custom properties não funcionam em @media): sm 480px · md 768px · lg 1024px · xl 1280px */ /* ---------- 7. Raios ---------- */ --radius-sm: .5rem; /* 8 · tags, checkbox */ --radius-md: .75rem; /* 12 · campos de formulário */ --radius-lg: 1.25rem; /* 20 · cabeçalho, blocos */ --radius-xl: 1.5rem; /* 24 · cards (manual) */ --radius-pill: 999px; /* botões (manual) */ --radius-arco: 999px 999px var(--radius-xl) var(--radius-xl); /* moldura de foto em arco */ /* ---------- 8. Sombras (tingidas de verde profundo, sempre suaves) ---------- */ --shadow-sm: 0 1px 2px rgba(30, 58, 58, .06), 0 1px 1px rgba(30, 58, 58, .04); --shadow-md: 0 10px 24px -10px rgba(30, 58, 58, .16); --shadow-lg: 0 24px 48px -18px rgba(30, 58, 58, .22); --shadow-header: 0 6px 20px -12px rgba(30, 58, 58, .25); --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 6px var(--color-focus); /* ---------- 9. Movimento ---------- */ --dur-fast: 150ms; /* hover, cor */ --dur-base: 250ms; /* menus, acordeões */ --dur-slow: 400ms; /* entrada de seções */ --ease-out: cubic-bezier(.2, .7, .2, 1); /* ---------- 10. Camadas ---------- */ --z-header: 100; --z-fab: 200; --z-overlay: 300; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }