/* =========================================================================
   Helpsi — identidade da marca
   Consultório de Psicologia Socorro Menezes

   ESTE É O ARQUIVO DA IDENTIDADE VISUAL. Cor, tipografia, raio, sombra,
   duração de movimento e o slot do logotipo moram aqui, e só aqui.

   Quando a identidade nova ficar pronta, é este arquivo que muda. O site.css
   não conhece nenhum valor de marca: ele só consome as variáveis daqui. Trocar
   a paleta inteira é reescrever o bloco de cor abaixo, sem abrir mais nada.

   Regra que sustenta isso: nenhum hex, nenhuma família de fonte e nenhum raio
   solto fora deste arquivo. O guardião (scripts/guardiao.php) reprova o build
   se algum aparecer.
   ========================================================================= */

/* ------------------------------------------------------------------ fontes
   Auto-hospedadas em woff2, subset latino, variáveis (um arquivo por família
   cobre toda a faixa de peso). Nada de Google Fonts por CDN: custaria uma
   conexão a mais no caminho crítico, justo na métrica que o site precisa
   defender. Fraunces caiu de 65,7 KB para 24,0 KB e Inter de 47,1 KB para
   19,4 KB com o subset próprio.

   Para trocar a tipografia da marca: substitua os dois arquivos woff2, ajuste
   os nomes aqui e em --fonte-titulo / --fonte-corpo. Nada mais.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-pt.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-pt.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------------- cor
     Paleta atual, provisória até a identidade nova. Os nomes são de papel,
     não de aparência: quando o verde virar outra coisa, o nome continua
     valendo e nenhum componente precisa ser reescrito. */
  --marca-escura:    #1E3A34;   /* fundo de cabeçalho, rodapé e seção escura */
  --marca-media:     #2F5A50;   /* estados e realces sobre a escura */
  --marca-clara:     #E7EDEA;   /* preenchimento leve sobre fundo claro */
  --marca-destaque:  #C4714F;   /* acento: olho de seção, setas, ícones */
  --marca-acao:      #A85B3B;   /* fundo de botão principal */
  --marca-acao-alta: #8F4C30;   /* botão principal sob o cursor */

  --fundo-base:      #F7F3ED;   /* areia: fundo padrão da página */
  --fundo-alto:      #FFFFFF;   /* branco: seção que precisa avançar */
  --fundo-fundo:     #EFE9E0;   /* areia funda: seção que precisa recuar */
  --branco:          #FFFFFF;

  /* Variante do destaque para fundo escuro. O tom puro sobre a marca escura
     dá 3,40:1, abaixo do mínimo AA de 4,5:1 para texto pequeno. Este mantém
     matiz (42,6deg) e croma (0,116) em oklch e sobe só a luminosidade, o que
     leva o par a 4,55:1. Não usar sobre fundo claro. */
  --destaque-em-escuro: #DD8865;
  /* Variante para texto pequeno sobre fundo claro: 4,60:1 sobre --fundo-fundo
     e 5,03:1 sobre --fundo-base. */
  --destaque-em-claro:  #A05333;

  --texto:           #20211F;
  --texto-suave:     #5A5F5A;
  --texto-em-escuro: #DCE3DF;
  --texto-em-escuro-suave: #C3C7C1;

  --borda:           #E3DDD3;
  /* Borda de controle interativo. A --borda comum dá 1,35:1 sobre o branco,
     contra o mínimo de 3:1 que a WCAG 1.4.11 exige para limite de componente
     de interface. Esta passa em branco (3,38:1) e em areia (3,05:1). */
  --borda-campo:     #918B82;
  --borda-escura:    #3A5C53;
  --erro:            #9A3324;
  --erro-fundo:      #FBEDEA;
  --erro-borda:      #E9CFC8;
  --erro-texto:      #7C2A1D;
  --ok-texto:        #1B4038;
  --ok-borda:        #C6D7D1;

  /* ---------------------------------------------------------- tipografia */
  --fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-corpo:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida com clamp, em vez de escadinha de media query. */
  --t-display: clamp(2.4rem,   1.5rem + 4.1vw, 4rem);
  --t-heroi:  clamp(2.1rem,   1.35rem + 3.4vw, 3.5rem);
  --t-titulo: clamp(1.55rem,  1.28rem + 1.3vw, 2.15rem);
  --t-sub:    clamp(1.2rem,   1.1rem + .45vw,  1.45rem);
  --t-corpo:  clamp(1.0625rem, 1.03rem + .18vw, 1.125rem);
  --t-mini:   .9375rem;
  --t-micro:  .8125rem;

  --peso-titulo: 600;
  --entrelinha-titulo: 1.15;
  --entrelinha-corpo: 1.65;

  /* --------------------------------------------------------------- forma */
  --raio:      14px;
  --raio-mini: 8px;
  --raio-grande: 24px;
  --raio-pill: 999px;

  /* Sombra em camadas: um contato curto e rente, e uma difusão ampla.
     Nunca uma sombra difusa sozinha. */
  --sombra:      0 1px 3px rgb(32 33 31 / .06), 0 8px 24px rgb(32 33 31 / .06);
  --sombra-alta: 0 1px 2px rgb(32 33 31 / .07), 0 4px 10px rgb(32 33 31 / .06),
                 0 18px 40px rgb(32 33 31 / .08);
  --filete-interno: inset 0 0 0 1px rgb(32 33 31 / .08);
  --filete-interno-claro: inset 0 0 0 1px rgb(255 255 255 / .14);

  /* -------------------------------------------------------------- espaço */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;
  --e-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* Ritmo vertical das seções. Três densidades, e nada fora delas: seção que
     escolhe o próprio respiro é como o site perde o compasso. */
  --secao-y:          clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --secao-y-compacta: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  --secao-y-ampla:    clamp(4.5rem, 3rem + 6vw, 8rem);

  /* ------------------------------------------------------------- medidas */
  --medida: 66ch;          /* 62 a 72 caracteres por linha */
  --largura: 70rem;
  --largura-texto: 46rem;
  --alvo-toque: 44px;      /* mínimo da WCAG 2.5.8 */

  /* ------------------------------------------------------------ movimento */
  --curva: cubic-bezier(.2, .7, .3, 1);
  --rapido: 140ms;
  --medio: 260ms;

  /* --------------------------------------------------------------- logo
     Ainda não há logotipo: o cabeçalho e o rodapé mostram o lockup em texto,
     que é o que o art. 20 do Código de Ética exige de qualquer forma — nome e
     função em texto, nunca dentro de imagem.

     Quando o arquivo chegar, o caminho entra em app/config.php (marca.logo) e
     estas duas medidas passam a valer. O lockup em texto continua no HTML,
     escondido para o olho e visível para leitor de tela e para o Google. */
  --logo-altura: 2.25rem;
  --logo-altura-rodape: 2.75rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 1ms; --medio: 1ms; }
}