/* SimpleHair — folha única, mobile-first. Tokens espelham design/tokens.css. */ /* * O token da marca chama-se `--marca`, e não `--rose`. * * Ele se chamava `--dourado` e carregava o #d1a768 herdado do SimpleCar — * cor de estética automotiva, que nunca teve o que fazer num salão de * beleza. Trocar a cor era fácil; o que travava era o NOME, espalhado por * duas folhas e por dois logos. Token batizado com o nome da cor é * exatamente o que apodrece na primeira troca de marca. */ :root { --marca: #c8697d; /* o rosé: acentos, bordas, ícones */ --marca-forte: #a8455c; /* link e hover sobre fundo claro */ --marca-clara: #e8b4b8; /* * O par do botão preenchido, junto, porque um não vale sem o outro. * * No claro: rosé fechado com texto branco (5,8:1). No escuro a solução * inverte — rosé claro com texto quase preto (7,0:1). Usar o mesmo par * nos dois temas dava 3,6:1 num dos lados, abaixo do legível para texto * de botão. E botão ilegível que diz "Agendar" é venda perdida, não * detalhe de acessibilidade. */ --btn-fundo: #a8455c; --btn-tinta: #ffffff; --btn-fundo-hover: #8f3a4e; /* * A barra do topo tem paleta própria, e não os neutros da página. * * Ela era grafite com cinzas AZULADOS (#b9bcc4, #3a3d45) sobrando da * paleta antiga — cinza frio ao lado de rosé quente é o tipo de briga que * ninguém sabe nomear mas todo mundo enxerga: a tela parece "meio suja". * * Agora é um vinho fechado da própria marca. A cor da casa fica presente * em toda tela do painel, sem precisar de logo grande. */ --topo-fundo: #5c2c3a; --topo-tinta: #f6e6ea; --topo-suave: #d9b3bf; --topo-borda: #7a3d4e; --verde: #2ab7a9; --grafite: #2a2126; --fundo: #faf7f8; --alerta: #e05656; --texto: #2a2126; --texto-suave: #6f6169; --superficie: #ffffff; --superficie-alta: #fbf8f9; /* cabeçalho de tabela */ --realce: #fdf6f8; /* linha sob o cursor */ --borda: #ebe2e6; /* Avisos e etiquetas. Ficam em token porque o tema escuro precisa de fundos translúcidos: os pastéis claros somem sobre grafite. */ --ok-fundo: #e9f8f6; --ok-borda: #a9e3dc; --ok-texto: #17635a; --erro-fundo: #fdecec; --erro-borda: #f3c9c9; --erro-texto: #923535; --info-fundo: #eef4ff; --info-borda: #c9daf8; --info-texto: #2c5cc5; --atencao-fundo: #fdf0e8; --atencao-borda: #f0cdb8; --atencao-texto: #a84f2c; --neutro-fundo: #f2f3f5; --neutro-texto: #6b7280; --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-brand: 'Poppins', 'Montserrat', var(--font-ui); --raio: 8px; --sombra: 0 4px 12px rgba(0, 0, 0, 0.06); --sombra-forte: 0 8px 24px rgba(0, 0, 0, 0.12); color-scheme: light; } /* * Tema escuro. Só troca token — nenhuma regra de layout se repete aqui, e é * de propósito: quem mexer no claro acerta o escuro junto. * * O seletor é o atributo `data-tema` do , escrito pelo servidor * (App\Support\Tema) ou pelo script inline do , nunca por media query * — quem escolheu "claro" num aparelho no escuro tem de continuar no claro. */ [data-tema='escuro'] { /* * No escuro os papéis se invertem: o rosé claro vira a cor de texto e * ícone (é ele que tem contraste sobre fundo escuro), e o tom fechado * passa a ser o fundo de botão. */ --marca: #e08a9c; --marca-forte: #f0b8c2; --marca-clara: #f0b8c2; /* Invertido: o rosé claro carrega texto escuro. Ver o comentário no :root. */ --btn-fundo: #e08a9c; --btn-tinta: #171416; --btn-fundo-hover: #f0b8c2; /* No escuro o topo fecha mais, para não competir com o conteúdo. */ --topo-fundo: #3d1d27; --topo-tinta: #f6e6ea; --topo-suave: #c9a0ac; --topo-borda: #562b37; --verde: #35cdbe; --fundo: #171416; --alerta: #ff8484; --texto: #f4eff1; --texto-suave: #a89aa1; --superficie: #201c1f; --superficie-alta: #272227; --realce: #2a252a; --borda: #332c32; --ok-fundo: rgba(42, 183, 169, 0.14); --ok-borda: rgba(42, 183, 169, 0.34); --ok-texto: #6fdccf; --erro-fundo: rgba(255, 107, 107, 0.14); --erro-borda: rgba(255, 107, 107, 0.34); --erro-texto: #ff9c9c; --info-fundo: rgba(108, 152, 245, 0.14); --info-borda: rgba(108, 152, 245, 0.34); --info-texto: #9dbcff; --atencao-fundo: rgba(198, 108, 74, 0.16); --atencao-borda: rgba(198, 108, 74, 0.36); --atencao-texto: #e0a184; --neutro-fundo: #262a31; --neutro-texto: #9aa0aa; --sombra: 0 4px 12px rgba(0, 0, 0, 0.4); --sombra-forte: 0 8px 24px rgba(0, 0, 0, 0.55); /* Faz o navegador pintar barras de rolagem, seletores de data e o interior dos