/* ============================================================
   PedeBeleza — Tokens de marca (brandbook oficial)
   Fonte: docs/brand/Brandbook Pede Beleza.pdf
   NÃO use HEX cru nas telas — sempre as variáveis abaixo.
   Carregue ESTE arquivo ANTES de style.css em cada *.html:
     <link rel="stylesheet" href="/assets/css/brand.css">
   ============================================================ */

/* Fonte de títulos (fallback aprovado até termos os arquivos da Oskar One) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');

:root {
  /* === Paleta oficial (5 cores, HEX exatos — pág. 15) === */
  --cor-primaria:        #6B7B54; /* Verde Oliva — A Essência (cor principal) */
  --cor-autoridade:      #2A3224; /* Verde Floresta Escuro — substitui o preto puro */
  --cor-fundo:           #F9F8F6; /* Off-White — O Respiro (substitui o branco puro) */
  --cor-superficie:      #D8CFC4; /* Nude Areia — O Toque (cards/superfícies) */
  --cor-acento:          #B57F6A; /* Terracota Suave — A Visibilidade (acento quente) */

  /* === Derivadas (interação/UI) === */
  --cor-primaria-hover:  #5A6847; /* oliva +escuro p/ hover/active */
  --cor-acento-hover:    #A06E5A; /* terracota +escuro p/ hover */
  --cor-texto:           #2A3224; /* texto principal = Verde Floresta */
  --cor-texto-suave:     #6B6F63; /* texto secundário/legendas */
  --cor-borda:           #E7E3DC; /* bordas/divisórias suaves (derivado do Nude) */
  --cor-superficie-2:    #EFEBE4; /* superfície intermediária (Off-White↔Nude) */

  /* === Estado (semânticos, harmonizados à paleta terrosa) === */
  --cor-erro:            #C0392B;
  --cor-erro-bg:         #F8ECEA;
  --cor-sucesso:         #6B7B54; /* o próprio oliva como "ok" */
  --cor-sucesso-bg:      #EEF2E8;
  --cor-aviso:           #B57F6A; /* terracota como alerta suave */
  --cor-aviso-bg:        #F6EEE9;
  --cor-info:            #557080; /* azul dessaturado, harmoniza c/ paleta */
  --cor-info-bg:         #ECF1F2;

  /* === Tipografia === */
  --fonte-logo:    'Waverly CF', 'Oskar One', serif;            /* só no logotipo */
  --fonte-titulo:  'Oskar One', 'Poppins', system-ui, sans-serif;
  --fonte-corpo:   'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  /* === Raios/escala (consistência) === */
  --raio-sm: 8px;
  --raio-md: 14px;
  --raio-lg: 24px;

  /* --- Aliases de compatibilidade (legado usa estes nomes) ---
     Mantidos para a migração não quebrar telas antigas.
     Na Etapa 3 as telas passam a usar os nomes --cor-* acima. */
  --primary:       var(--cor-primaria);
  --primary-hover: var(--cor-primaria-hover);
  --text:          var(--cor-texto);
}

/* === Tipografia base da marca === */
body { font-family: var(--fonte-corpo); }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); }

/* === Componente: logo da marca (header) === */
.logo-img {
  height: 88px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .logo-img { height: 60px; }
}