/* Tokens de identidade do Atelier (ATL) — FONTE DA VERDADE. * * Valores: PALETA ATL — Família Verde v7 "Sálvia Moderna", aprovada por Adriano * em 20/07/2026. Original assinado: mkt/marca/paleta-atl.json. * * v7 separa DOIS PLANOS (decisão registrada no JSON): * · MARCA / ARTES (o que o cliente vê no Instagram): quente e assinada, com o * creme no papel principal. As molduras usam fundo profundo + texto creme. * · CHROME DO APP (a ferramenta que só o dono usa): moderno e frio — fundo * cinza-verde, cards brancos, e texto sobre verde em BRANCO (nunca creme). * O creme NÃO foi apagado: saiu da interface e vive nas artes. Os verdes são os * mesmos hex da v6. Motivo: o creme dominante lia como "coisa velha"; o dono * pediu chrome moderno/tecnológico. * * ⚠️ Corrigido em 20/07/2026. A versão anterior deste arquivo declarava que os * valores vinham "da grade.html em produção, que segue o globals.css do ponto" * — ou seja, era uma EXTRAÇÃO DA PRODUÇÃO, e ela divergia da paleta assinada * em três pontos que não são cosméticos: * · texto era #2c2c2c (neutro) — a paleta veta preto puro e define #3F4538 * · existia --nude-warm — nude é VETADO pela paleta * · estados eram menta/ardósia do Tailwind — a paleta veta cores saturadas, * e tom frio contra o creme quente lê como corpo estranho * * Decisão: aprovação assinada vence extração da produção. Se a produção vencer * a aprovação, a aprovação não significa nada. * * A NOMENCLATURA continua sendo a do `ponto` (arquitetura-macro-atl.md §3). * O que mudou foram os valores, não os nomes. * * Regra: markdown descreve intenção, código carrega valor. Nenhuma página deve * escrever hex na mão — o tema já divergiu três vezes por causa disso. * * Servido em https://mkt.ateliersalaodebeleza.com.br/tokens/atl.css * Quando a M6 (repositório único) for executada, muda para packages/tokens/. * NÃO faça app de produção depender dele em runtime. */ :root { /* ---- Verdes da marca (idênticos à v6) · 60% claro/foto · 30% sálvia · 10% profundo NAS ARTES ---- */ --verde-profundo: #3F4538; /* texto sobre claro, sombras, FUNDO DA ARTE */ --verde-salvia: #69715C; /* cor da marca: fills e detalhes SEM texto (verde médio) */ --verde-nevoa: #8FA382; /* formas orgânicas, apoio — NUNCA sob texto claro */ --verde-cha: #DDE3D3; /* fundo suave alternativo */ --verde-forte: #45503E; /* v7: verde ESCURO que carrega texto branco (CTA, aba ativa) */ --creme: #F2E9E2; /* NAS ARTES: fundo claro e texto sobre verdes. Fora do chrome. */ --creme-claro: #FAF6F1; /* Contrastes medidos (WCAG 2.x): * ARTES: profundo sobre creme ....... 8.3:1 AAA (moldura padrão) * creme sobre profundo ....... 8.3:1 AAA * CHROME: profundo sobre página ...... 7.6:1 AAA * profundo sobre card branco . 8.3:1 AAA * BRANCO sobre verde-forte ... 8.5:1 AAA (o CTA) * AVISOS: branco sobre sálvia ........ 3.6:1 PROIBIDO p/ texto (por isso o CTA é verde-forte) * creme sobre névoa .......... 2.3:1 PROIBIDO */ /* ---- ação / marca ---- * v7: o que CARREGA TEXTO (botão, aba ativa) usa verde ESCURO + BRANCO. * Sálvia é verde MÉDIO — branco nele dá só 3,6:1 ("cor de grude"). Sálvia * fica em fills/detalhes sem texto e na cor da própria marca (a logo). */ --acao-fundo: var(--verde-forte); /* #45503E — branco sobre ele = 8,5:1 */ --acao-texto: #FFFFFF; --brand-primary: var(--acao-fundo); --brand-primary-foreground: var(--acao-texto); /* Dourado é CONDICIONAL na paleta ("somente com aprovação explícita caso a * caso"). Uso aprovado: o ponto da wordmark "ATL." — e nada mais. * Não usar em foco, estado, seleção ou tipo de peça. */ --accent-gold: #C9A227; /* ---- ESCALA DE SUPERFÍCIE (v7 — chrome frio) ----------------------- * A página é um CINZA-VERDE claro e frio (#E9EDE9), não mais o creme * quente. Card branco flutua sobre ela por SOMBRA — dá profundidade e * cara de app nativo. O creme saiu daqui e foi para as artes. * Métrica de superfície é ΔL*, não WCAG (entre L* 85 e 100 a razão WCAG * fica presa em 1,05–1,25 e não discrimina). ΔL* página→card ≈ 8. * -------------------------------------------------------------------- */ --sup-afundada: #E0E6E0; /* campo, área vazia, bloco recuado */ --sup-pagina: #E9EDE9; /* o fundo do app: cinza-verde claro e frio */ --sup-card: #FFFFFF; /* card, separado por SOMBRA */ --sup-elevada: #FFFFFF; /* folha e nav: mesma superfície, sombra maior */ --surface: var(--sup-pagina); --surface-muted: var(--verde-cha); /* eixo LATERAL (tema), não elevação */ --text-default: var(--verde-profundo); --texto-suave-card: #59615A; /* 6.3:1 no card */ --texto-suave-pagina: #5E655D; /* v7: era claro demais (o "Sair" sumia sobre página clara) */ /* linhas frias e discretas — acompanham a sombra, não desenham cerca */ --linha-sutil: #E4E9E4; --linha: #D8DFD8; --linha-forte: #C3CBC3; /* ---- SOMBRA (v7 — neutra-fria) ------------------------------------- * v6 usava marrom-oliva (56,43,30) para casar com o creme quente. No * chrome frio isso "amarelava" o cinza-verde. v7 usa um verde-cinza * escuro dessaturado — escurece sem descolorir, sem calor. * Três camadas sempre: contato (1px, "cola" o card), média, ambiente. * -------------------------------------------------------------------- */ --sombra-rgb: 40, 48, 42; --sombra-card: 0 1px 1px -0.5px rgba(var(--sombra-rgb), .10), 0 3px 6px -2px rgba(var(--sombra-rgb), .09), 0 8px 16px -6px rgba(var(--sombra-rgb), .07); --sombra-elevada: 0 1px 2px -0.5px rgba(var(--sombra-rgb), .10), 0 6px 12px -4px rgba(var(--sombra-rgb), .12), 0 18px 36px -12px rgba(var(--sombra-rgb), .14); --sombra-afundada: inset 0 1px 2px rgba(var(--sombra-rgb), .10); /* ---- TIPOGRAFIA ----------------------------------------------------- * Revisto em 20/07/2026. Antes: 20 tamanhos entre 6 e 20px, hierarquia * carregada por PESO e CAIXA ALTA em vez de tamanho — que é como se fazia * quando tamanho não era recurso disponível (2013–2017). O maior texto de * conteúdo era 16px; a razão display/corpo era 1,33× quando o padrão atual * é 2,5–3×. Sete degraus, inteiros, sem meio pixel. * -------------------------------------------------------------------- */ --t-micro: 12px; /* piso absoluto de texto */ --t-menor: 14px; --t-corpo: 16px; /* era 13–15; o padrão do iOS é 17 */ --t-forte: 18px; --t-secao: 22px; /* era 12px CAIXA ALTA — o tique mais datado do arquivo */ --t-tela: 28px; --t-dado: 36px; /* numeral de destaque; era 19px */ --lh-apertada: 1.15; --lh-titulo: 1.25; --lh-forte: 1.35; --lh-corpo: 1.6; --lh-menor: 1.5; /* tracking negativo no topo: toda fonte de texto fica frouxa ampliada. * A ausência total de valores negativos denuncia falta de olho tipográfico. */ --tr-dado: -.03em; --tr-tela: -.025em; --tr-secao: -.015em; --tr-forte: -.01em; --tr-corpo: 0; --tr-micro: .01em; /* três pesos; 700 fica exclusivo de numeral grande */ --p-normal: 450; --p-medio: 500; --p-forte: 600; --p-dado: 700; /* ---- ESPAÇO — base 4, sete degraus ---- */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-12: 48px; /* regra: gap entre irmãos < padding interno < espaço entre seções, * com fator ≥2 em cada salto. Antes era 10 / 14 / 26 — a zona morta. */ --gap-irmaos: var(--e-2); /* 8 */ --pad-card: var(--e-4); /* 16 */ --gap-secao: var(--e-8); /* 32 */ --margem-coluna: 20px; /* ---- FORMA — 4 raios. Antes eram 9, com pico em 18–22px (o "bolha" * de 2020–2023). Regra do aninhado: interno = externo − padding. ---- */ --r-micro: 8px; --r-base: 14px; --r-alta: 20px; --r-pill: 999px; /* ---- estado de publicação (bolinha/rótulo sólido da grade) ---- */ --st-publicado: #2C4A32; --st-pendente: #6B5518; /* ocre discreto (dourado é condicional) */ --st-falha: #7A2E28; --st-expirado: #6E756A; /* ---- estado genérico (par fundo/texto para pílula, padrão do `ponto`) ---- * v7: reafinados para assentar no neutro frio; ainda discretos, sem saturação. * Família diferente da de cima: aqui são PARES. Não misturar com --st-*. */ --badge-ok-bg: #DBE7D4; --badge-ok-fg: #2C4A32; /* 7.7:1 */ --badge-alerta-bg: #ECE7D3; --badge-alerta-fg: #6B5518; /* 6.4:1 */ --badge-erro-bg: #EEDAD6; --badge-erro-fg: #7A2E28; /* 7.9:1 */ --badge-pendente-bg: #E1E6E1; --badge-pendente-fg: #49514A; /* 6.5:1 */ /* ---- compatibilidade com os nomes antigos ---- */ --sombra: var(--sombra-card); --raio: var(--r-base); /* ---- layout (mobile-first sempre) ---- */ --coluna-util: 28rem; --tap-min: 44px; --botao-min-h: 48px; /* ---- famílias ---- * DM Sans faz o texto; ela é boa, tem acentuação impecável e é variável. * Mas sozinha é "friendly tech", não "quiet luxury" — falta uma voz. * Instrument Serif entra SÓ em título de tela, numeral grande e wordmark. * Ambas OFL e embutidas em base64 nos consumidores (ver sync-tokens). */ --fonte: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --fonte-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; } /* ---- DEPRECADO ---------------------------------------------------------- * --nude-warm é VETADO pela paleta v6, junto com terracota, preto puro, cores * saturadas e gradientes chamativos. Mantido apontando para o verde de apoio * só para não quebrar consumidor legado em silêncio. Migrar e remover. */ :root { --nude-warm: var(--verde-nevoa); }