/* ============================================================ 01 — TOKENS Fonte: Manual de Marca C.B. Caçambas · Briefing seção 7 Zero valores mágicos fora deste arquivo. ============================================================ */ :root { /* ===== CORES DE MARCA (Manual de Marca — valores oficiais) ===== */ --color-white: #FFFFFF; --color-cb-blue: #2544A6; /* Azul C.B. */ --color-green: #0C3B4C; /* Verde */ --color-navy: #020611; /* Azul Marinho */ --color-blue: #184BF5; /* Azul — cor de ação */ --color-teal: #2584A6; /* Verde Turquesa */ /* ===== NEUTROS DERIVADOS (uso funcional) ===== */ --color-gray-50: #F7F8FA; --color-gray-100: #EEF0F4; --color-gray-200: #DDE1E8; --color-gray-300: #C3C9D4; --color-gray-500: #7A8394; --color-gray-700: #454C59; --color-gray-900: #1A1E26; /* ===== SUPERFÍCIES ===== O Manual de Marca nunca usa branco puro como superfície de página: as 16 páginas do manual e o verso do cartão são cinza-claro com textura de papel. Branco fica reservado para painéis e cartões sobre o papel — é o que cria profundidade sem sombra. */ --paper: #E9EBEF; /* superfície de página, cinza-claro frio */ --paper-warm: #EDECE8; /* variante quente (verso do cartão) */ --surface: var(--color-white); --bg-light: var(--paper); --bg-subtle: var(--paper-warm); --bg-dark: var(--color-navy); --bg-deep: var(--color-green); --bg-brand: var(--color-cb-blue); --text-primary: var(--color-gray-900); --text-secondary: var(--color-gray-700); /* #7A8394 dava só 3,2:1 sobre o papel — o próprio briefing (matriz 7.2) o marca como limítrofe e restrito a texto ≥18px, mas ele era usado em legenda, rótulo e nota de 11 a 14px. Este tom dá 4,74:1 no papel e 5,66:1 no branco, mantendo a hierarquia de cinza-azulado. */ --text-muted: #5F6875; --text-on-dark: var(--color-white); --text-on-dark-muted: rgba(255, 255, 255, 0.86); --text-on-dark-faint: rgba(255, 255, 255, 0.74); /* ===== CONTEXTO DE TEXTO ===== Toda superfície declara qual trio de tons vale dentro dela, e os componentes consomem `--txt*` em vez de apontar para um tom fixo. Motivo: as regras antigas eram do tipo `.section--deep p { color: ... }`, e "descendente" não distingue um parágrafo sobre o fundo escuro de um parágrafo dentro de um cartão BRANCO apoiado nesse fundo — a nota do formulário virava texto branco sobre painel branco, invisível. Com variável de contexto, o cartão branco simplesmente redeclara o trio. */ --txt: var(--text-primary); --txt-soft: var(--text-secondary); --txt-faint: var(--text-muted); /* Marcador [CONFIRMAR] também segue o contexto: o par âmbar-claro sobre fundo escuro ficava ilegível quando o marcador caía dentro de um painel branco apoiado numa seção escura (a nota do formulário). */ --warn-fg: #6B4E06; --warn-bg: rgba(184, 134, 11, 0.07); --warn-bd: var(--warning); --action: var(--color-blue); --action-hover: #0F3ACC; --border-subtle: var(--color-gray-200); --border-on-dark: rgba(255, 255, 255, 0.12); --success: #1B8A5A; --error: #C6303B; --warning: #B8860B; --whatsapp: #25D366; --whatsapp-hover: #1FB855; /* ===== GRADIENTES ===== `--gradient-field` é o fundo escuro OFICIAL da marca: o segundo dos quatro fundos autorizados na página "Aplicações de Cores" do Manual de Marca — Azul Marinho com Azul. O azul entra como BRILHO DE CANTO, não como varredura diagonal sobre a seção inteira. É assim na peça de out-of-home: o miolo onde a headline fica é quase preto e o azul sangra pelas quinas. Com a varredura, o destaque azul do título caía para 1,9:1 no trecho mais claro — azul sobre azul, exatamente o ✗ de "Regramento identidade visual". */ --gradient-field: radial-gradient(115% 85% at 106% 112%, rgba(24, 75, 245, 0.90) 0%, rgba(18, 48, 127, 0.52) 30%, rgba(2, 6, 17, 0) 60%), radial-gradient(90% 70% at -8% -12%, rgba(24, 75, 245, 0.34) 0%, rgba(2, 6, 17, 0) 55%), linear-gradient(180deg, #030A1E 0%, #020611 100%); --gradient-field-alt: radial-gradient(110% 80% at -6% 108%, rgba(24, 75, 245, 0.82) 0%, rgba(18, 48, 127, 0.46) 32%, rgba(2, 6, 17, 0) 62%), radial-gradient(85% 70% at 104% -10%, rgba(24, 75, 245, 0.30) 0%, rgba(2, 6, 17, 0) 55%), linear-gradient(180deg, #030A1E 0%, #020611 100%); --gradient-brand: linear-gradient(135deg, #2544A6 0%, #184BF5 100%); --gradient-dark: var(--gradient-field); /* Lavagem sobre foto: a página "Brand Colors" do manual usa lavagem AZUL, não preta. Só é aplicada quando a foto precisa receber texto por cima. */ --wash-blue: linear-gradient(100deg, rgba(2, 6, 17, 0.95) 0%, rgba(18, 48, 127, 0.86) 40%, rgba(24, 75, 245, 0.28) 76%, rgba(24, 75, 245, 0.04) 100%); --wash-bottom: linear-gradient(180deg, rgba(2, 6, 17, 0) 38%, rgba(2, 6, 17, 0.62) 100%); --gradient-overlay: var(--wash-blue); /* Grão de papel das superfícies claras — a textura visível no manual. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* ===== TIPOGRAFIA ===== */ --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Escala tipográfica — fluida com clamp() */ --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem); /* 44 → 84px */ --fs-h1: clamp(2.25rem, 1.5rem + 3.0vw, 3.75rem); /* 36 → 60px */ --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); /* 28 → 44px */ --fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); /* 22 → 30px */ --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);/* 18 → 22px */ --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); /* 17 → 21px */ --fs-body: 1rem; /* 16px */ --fs-small: 0.875rem; /* 14px */ --fs-eyebrow: 0.8125rem; /* 13px */ --lh-tight: 1.06; --lh-heading: 1.18; --lh-body: 1.65; --lh-lead: 1.55; --ls-display: -0.03em; --ls-heading: -0.02em; --ls-body: 0; --ls-eyebrow: 0.14em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ===== ESPAÇAMENTO — base 8px ===== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-11: 6.5rem; /* 104px */ --space-12: 8rem; /* 128px */ --section-py: clamp(4rem, 2rem + 6vw, 8rem); --section-py-lg: clamp(5rem, 2.5rem + 8vw, 10rem); /* ===== CONTAINERS E GRID ===== */ --container-max: 1320px; --container-narrow: 880px; --container-wide: 1560px; --container-px: clamp(1.25rem, 4vw, 3rem); --grid-columns: 12; /* 24 → 40px. O gutter anterior (20–32px) deixava os cartões de produto colados; espaço é a ferramenta de premiumização (briefing 7.4). */ --grid-gap: clamp(1.5rem, 1.1rem + 1vw, 2.5rem); /* ===== BORDAS, RAIOS E SOMBRAS ===== */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; /* Raio dos painéis e blocos de imagem. O manual aplica raio generoso nos ladrilhos de cor, no cartão, na peça de out-of-home e nas composições foto+painel — é uma característica da marca, não decoração. */ --radius-panel: 22px; /* Botão: PÍLULA. A peça de out-of-home do Manual de Marca ("Solicite um orçamento técnico!") usa pílula, não retângulo arredondado. */ --radius-btn: var(--radius-full); /* Sombras são exceção. O manual constrói profundidade por CONTRASTE DE SUPERFÍCIE (painel branco sobre papel cinza) e por fio de 1px — não por sombra. Card com sombra em todo lugar é o que dá aparência de template. */ --shadow-xs: 0 1px 2px rgba(2, 6, 17, 0.05); --shadow-sm: 0 2px 8px rgba(2, 6, 17, 0.06); --shadow-md: 0 8px 24px rgba(2, 6, 17, 0.08); --shadow-lg: 0 16px 48px rgba(2, 6, 17, 0.12); --shadow-blue: 0 10px 28px rgba(24, 75, 245, 0.28); --border-1: 1px solid var(--border-subtle); /* Fio técnico: o separador de 1px que estrutura as páginas do manual. */ --rule: 1px solid rgba(2, 6, 17, 0.13); --rule-on-dark: 1px solid rgba(255, 255, 255, 0.16); /* ===== MOVIMENTO ===== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.2s; --dur-base: 0.3s; --dur-slow: 0.6s; --dur-reveal: 0.8s; /* ===== HEADER ===== */ --header-h: 96px; --header-h-scroll: 72px; --z-header: 800; --z-float: 900; --z-drawer: 950; --z-modal: 1000; } @media (max-width: 1023px) { :root { --header-h: 72px; --header-h-scroll: 64px; } }