/* ============================================================ MAIS — CORE (identidade · fonte da verdade ÚNICA) Base oficial: brandbook "Manchini — Projeto de Identidade Visual". Agnóstico de mídia: vale para a web (kit atual) e para os futuros kits deck (slides) e motion (vídeo), quando forem refeitos. Regra: todo kit importa este arquivo e consome os tokens semânticos. Nenhum kit importa outro kit. Tagline: "Cuidar é estratégico. Cuidar além é humano." ============================================================ */ /* Fontes (Google Fonts): */ :root { /* ================================================== 1. COR — CAMADA A · PRIMITIVAS OFICIAIS (brandbook) As 5 cores da marca. Só muda se o brandbook mudar. ================================================== */ --coral-500: #FF7060; /* Coral — energia, afeto, calor humano; acento vibrante */ --oliva-600: #5C8200; /* Verde oliva — natureza, cultivo, crescimento saudável */ --creme-100: #F7F4D2; /* Off-white quente — leve, luminoso; substitui o branco */ --taupe-600: #695F44; /* Cinza quente claro — firmeza suave, secundário */ --carvao-900: #312C1E; /* Cinza quente escuro — hierarquia sem dureza de preto */ /* ================================================== 1. COR — CAMADA B · DERIVADAS FUNCIONAIS Variações de trabalho das oficiais (hover, fundos suaves, bordas, estados). Não são cores novas de marca — são as oficiais em função de interface. ================================================== */ --coral-600: #E8654A; /* Coral pressionado (hover/active) */ --coral-800: #A03A28; /* Coral profundo — texto pequeno sobre coral-100 (AA) */ --coral-100: #FCE3DE; /* Fundo de destaque suave */ --oliva-700: #44512E; /* Oliva escuro (ícones) */ --oliva-100: #E8EBD2; /* Fundo verde suave */ --creme-50: #FBF9E6; /* Creme mais claro (seções alternadas) */ --taupe-300: #B4AC97; /* Bordas / desabilitado */ --branco: #FFFFFF; /* Usar com parcimônia (a base é creme) */ --erro-600: #C0392B; /* Estado de erro (funcional, fora da marca) */ /* ================================================== 1. COR — CAMADA C · COMPLEMENTARES / EXPERIMENTAIS Contrastes que fazem sentido para a marca, usados em teste ("tudo é teste"). NÃO são cores oficiais. Podem entrar, sair ou mudar sem tocar no brandbook. ================================================== */ --teal-700: #077B5D; /* Teal profundo — contraste p/ seções institucionais */ --teal-800: #0A5E47; /* Teal escuro — display e marcador ativo sobre creme (7,3:1) */ --teal-100: #A5CCB8; /* Teal claro — marcador inativo, traços de apoio */ --sage-500: #8C9A65; /* Verde-sálvia — contraste p/ rodapé */ /* -------------------------------------------------- */ /* 2. PRIMITIVOS — ESPAÇO (escala de 8) */ /* Ratio universal; os kits usam rem/px conforme a mídia. */ /* -------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 1rem; /* 16px */ --space-4: 1.5rem; /* 24px */ --space-5: 2rem; /* 32px */ --space-6: 3rem; /* 48px */ --space-7: 4rem; /* 64px */ --space-8: 6rem; /* 96px */ --space-9: 8rem; /* 128px */ /* -------------------------------------------------- */ /* 3. PRIMITIVOS — RAIO E SOMBRA */ /* -------------------------------------------------- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-organico: 104px; /* formas orgânicas (ex.: card retrato) */ --radius-pill: 999px; --radius-full: 50%; --shadow-sm: 0 1px 2px rgba(49, 44, 30, .06); --shadow-md: 0 8px 24px rgba(49, 44, 30, .08); --shadow-lg: 0 16px 48px rgba(49, 44, 30, .10); /* -------------------------------------------------- */ /* 4. SEMÂNTICOS — COR (o papel, não o pigmento) */ /* Muda a marca inteira trocando o apontamento aqui. */ /* -------------------------------------------------- */ /* Superfícies */ --cor-fundo: var(--creme-100); --cor-fundo-alt: var(--creme-50); --cor-superficie: var(--branco); --cor-superficie-hover: var(--creme-50); /* hover de superfície clicável */ --cor-superficie-escura: var(--carvao-900); --cor-superficie-salvia: var(--sage-500); /* forma sólida sobre superfície clara (disco do .servico) — camada C */ /* Fundos de seção coloridos (padrão MAIS — cor protagonista, texto invertido, logo BRANCA por cima) */ --cor-secao-coral: var(--coral-500); /* hero, prova social */ --cor-secao-teal: var(--teal-700); /* institucional (experimental, camada C) */ --cor-rodape: var(--sage-500); /* rodapé (experimental, camada C) */ /* Display profundo e marcadores (camada C). Oliva-600 sobre creme dá 4,26:1 — só passa como texto GRANDE. O teal-800 dá 7,3:1 e serve display e rótulo pequeno igual. */ --cor-titulo-profundo: var(--teal-800); --cor-marcador: var(--teal-100); /* marcador em repouso */ --cor-marcador-ativo: var(--teal-800); /* marcador do item aberto */ /* Texto */ --cor-texto: var(--carvao-900); --cor-texto-suave: var(--taupe-600); --cor-texto-invertido:var(--creme-100); /* Marca / ação */ --cor-acento: var(--coral-500); --cor-acento-hover: var(--coral-600); --cor-marca: var(--oliva-600); /* Texto sobre o acento coral: CARVÃO passa AA (5,1:1); creme dá só 2,4:1. Trocar para creme aqui é decisão consciente fora de AA. */ --cor-texto-sobre-acento: var(--carvao-900); /* Linhas e estados */ --cor-borda: var(--taupe-300); --cor-foco: var(--coral-500); --cor-sucesso: var(--oliva-600); --cor-erro: var(--erro-600); /* -------------------------------------------------- */ /* 5. TIPOGRAFIA — famílias, pesos, line-height */ /* Brandbook: Lora Regular (títulos) · Lora Italic */ /* (subtítulos/quotes) · Poppins Light (texto corrido) */ /* · Semibold (destaques) · Medium (rodapés/labels). */ /* A ESCALA de tamanho é definida por cada kit. */ /* -------------------------------------------------- */ --fonte-titulo: 'Lora', Georgia, serif; --fonte-texto: 'Poppins', system-ui, -apple-system, sans-serif; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.6; --peso-light: 300; /* corpo de texto (padrão brandbook, em TODA mídia) */ --peso-regular: 400; --peso-medium: 500; /* rodapés, labels */ --peso-semibold: 600; /* destaques no texto */ } /* ============================================================ LOGO — regra de uso A MAIS trabalha com fundos de cor/textura. A logo padrão é a BRANCA (assets/logo-horizontal-branca.svg) sobre esses fundos. Exceção documentada: sobre os fundos-base claros da marca (creme/creme-50 — ex.: navbar), usa-se a versão colorida, pois a branca desaparece. Fora da marca (documento de terceiros em fundo branco), também a colorida. ============================================================ */