/* ============================================================ ALCÂNTTARA STUDIO CRIATIVO — DESIGN TOKENS Fonte da paleta: assets/logo-original/*.svg (Illustrator, cores oficiais) Wordmark correto: "alcânttara" — acento circunflexo + DOIS T's. Nome legal/comercial: Alcânttara Studio Criativo - ME CNPJ: 34.693.687/0001-00 ============================================================ */ :root { /* ---- Cores oficiais (extraídas direto dos SVGs da logo) ---- */ --tinta: #1D1D1B; /* st2 — quase-preto, wordmark e texto principal */ --assinatura: #00A8C0; /* st1 — teal do rabisco/assinatura, cor de destaque GRÁFICO (ícone, swoosh, fundo de botão/swatch) */ --branco: #FFFFFF; /* st0 — versão reversa da logo em fundo escuro */ /* ---- Neutros de apoio (não estão no SVG — papel/fundo, uso livre) ---- */ --papel: #F3EEE4; /* fundo claro padrão das peças */ --papel-alt: #EAE2D2; /* cartões e blocos sobre o papel */ --tinta-60: rgba(29,29,27,.62); /* texto secundário sobre papel — 4.51:1, passa AA */ --tinta-38: rgba(29,29,27,.38); /* NÃO usar em texto com informação — 2.30:1, falha AA. Só decoração/textura. */ --branco-70: rgba(255,255,255,.72); /* texto secundário sobre tinta — 9.25:1, passa AA */ --branco-50: rgba(255,255,255,.5); /* texto terciário sobre tinta (kickers, meta) — 5.15:1, passa AA. (.45 falhava, 4.43:1) */ --linha: rgba(29,29,27,.14); /* hairline sobre papel */ --linha-clara: rgba(255,255,255,.18); /* hairline sobre tinta */ --cinza-painel: #ECECE9; /* cinza neutro (não vem do SVG, não é --papel) — nasceu no recibo de pagamento (13/08) pra bater com uma referência do José: painel claro colado num painel escuro. Hex direto, não HSL derivado de nenhuma outra cor — se precisar de mais de um tom de cinza um dia, deriva a partir deste. */ /* --assinatura (#00A8C0) É GRÁFICA, não é segura pra texto sobre fundo claro: teal sobre papel = 2.47:1, sobre branco = 2.85:1, ambos falham AA (mín. 4.5:1). Pra texto (rótulos, links) sobre fundo CLARO, use --assinatura-texto. Sobre fundo ESCURO (tinta) a original passa bem (5.92:1) — use --assinatura ali. */ --assinatura-texto: #007586; /* mesma família de cor, escurecida — 4.63:1 sobre papel, 5.36:1 sobre branco */ /* branco/tinta puros sobre a assinatura também têm um lado que falha: tinta sobre assinatura = 5.92:1 (OK) · branco sobre assinatura = 2.85:1 (FALHA). Botão/swatch com fundo assinatura → texto tinta, nunca branco. */ /* ---- Tipografia ---- */ /* A logo tem letterforms próprias (não reproduzir fora do arquivo da marca). Display: Cabinet Grotesk (Fontshare, grátis/uso comercial) — geométrica com mais caráter que Poppins, que virou clichê de SaaS. Corpo: Inter, humanista, cansa menos em bloco de texto longo (proposta, relatório). */ --fonte-display: 'Cabinet Grotesk', 'Century Gothic', system-ui, sans-serif; --fonte-texto: 'Inter', -apple-system, system-ui, sans-serif; --tam-hero: clamp(2.6rem, 6vw, 5rem); --tam-h1: clamp(1.8rem, 3.2vw, 2.6rem); --tam-h2: clamp(1.3rem, 2vw, 1.7rem); --tam-corpo: 1rem; --tam-legenda: .8125rem; /* ---- Espaço (base 8) ---- */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-6: 48px; --sp-8: 64px; --sp-12: 96px; /* ---- Cantos e sombra ---- */ --raio: 4px; --raio-card: 12px; --raio-card-lg: 14px; --sombra-card: 0 1px 2px rgba(29,29,27,.06), 0 8px 24px rgba(29,29,27,.08); --sombra-card-escura: 0 1px 2px rgba(0,0,0,.2), 0 20px 48px rgba(0,0,0,.35); /* ---- Modo Grafite (16/10/2026) ---- Terceiro modo ao lado do papel claro e do vidro. Referência: cards do iCloud+ (card quase preto sobre fundo grafite, profundidade só por sombra larga e difusa, zero borda). Fundo e card saem da --tinta, não de um cinza frio novo. Destaque = --assinatura (passa AA sobre os dois). Ver auditoria no fim. */ --grafite-fundo: #2C2C2A; /* fundo da seção, 2 tons acima da tinta */ --grafite-card: #1D1D1B; /* = --tinta */ --grafite-chip: #121211; /* quadradinho do ícone, mais fundo que o card */ --raio-grafite: 20px; --sombra-grafite: 0 2px 4px rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.34), 0 40px 80px rgba(0,0,0,.22); /* ---- Movimento ---- */ /* 3 velocidades. Rápida = feedback de interação (hover, foco). Média = entrada de elemento (fade, reveal). Lenta = só a assinatura se desenhando — é a única peça com esse tipo de movimento de marca, não usar em outro contexto. */ --dur-rapida: .2s; --dur-media: .4s; --dur-lenta: 1.8s; --ease-padrao: cubic-bezier(.4,0,.2,1); /* interações de UI em geral */ --ease-assinatura: cubic-bezier(.65,0,.35,1); /* só pro traço da assinatura */ /* ---- Breakpoints ---- */ /* CSS não aceita var() dentro de @media — isto é documentação, não token funcional. Usar estes 3 valores fixos em qualquer @media novo, não inventar um número solto por arquivo (isso já aconteceu: 640/760/820 coexistiam sem motivo). */ /* --bp-mobile: 640px; — abaixo disso, tudo empilha em 1 coluna */ /* --bp-tablet: 820px; — grids de 2 colunas colapsam aqui */ /* --bp-desktop: 1024px; — grids de 3+ colunas colapsam aqui, se precisar */ } /* ============================================================ AUDITORIA DE CONTRASTE (WCAG 2.1 AA — mín. 4.5:1 texto normal, 3:1 texto grande) Calculado, não estimado. Refazer se qualquer cor acima mudar. ------------------------------------------------------------ assinatura sobre tinta 5.92:1 OK assinatura sobre papel 2.47:1 FALHA — usar assinatura-texto assinatura sobre branco 2.85:1 FALHA — usar assinatura-texto assinatura-texto sobre papel 4.63:1 OK assinatura-texto sobre branco 5.36:1 OK branco sobre tinta 16.88:1 OK tinta sobre papel 14.60:1 OK tinta sobre branco 16.88:1 OK branco-70 sobre tinta 9.25:1 OK branco-50 sobre tinta 5.15:1 OK (branco-45 antigo: 4.43:1, FALHA) tinta-60 sobre papel 4.51:1 OK tinta-38 sobre papel 2.30:1 FALHA — não usar em texto com informação tinta-60 sobre branco 4.76:1 OK tinta sobre assinatura 5.92:1 OK (texto de botão/swatch c/ fundo assinatura) branco sobre assinatura 2.85:1 FALHA — nunca texto branco sobre fundo assinatura tinta sobre cinza-painel 14.26:1 OK assinatura-texto sobre cinza-painel 4.56:1 OK assinatura sobre cinza-painel ~2.6:1 FALHA — mesma regra do papel/branco, usar assinatura-texto --- Modo Grafite (medido 16/10/2026) --- branco sobre grafite-card 16.88:1 OK · sobre grafite-fundo 13.99:1 OK branco-70 sobre grafite-card 9.27:1 OK · sobre grafite-fundo 8.02:1 OK branco-50 sobre grafite-card 5.15:1 OK · sobre grafite-fundo 4.72:1 OK assinatura sobre grafite-card 5.92:1 OK · sobre grafite-fundo 4.91:1 OK ============================================================ */