/* ============================================================
   ALPHAZ HABITAT — tokens da marca

   A identidade visual em um arquivo: cores, gradientes, fontes,
   tamanhos de texto, espaçamentos, raios e tempos de animação.

   Este é o arquivo para mudar a aparência do site, e trocar um
   valor aqui muda todos os lugares que o usam de uma vez. Quem
   consome estes tokens é css/estilos.css e css/mobile.css —
   nenhum dos dois define cor ou fonte por conta própria.

   As três marcas compartilham fontes, escala tipográfica e azul
   primário, mas cada uma tem o seu arquivo. Uma alteração que
   deva valer para todas precisa ser repetida em
   alphaz-group/css/marca.css e alphaz-concept/css/marca.css.

   O que é próprio da Habitat: o verde do botão principal, os
   azuis do hero e as cores do menu.

   Os valores vêm do Figma, página "Alphaz Habitat", frame HOME 1,
   1920 × 8112px.
   ============================================================ */

:root {

  /* ---------- CORES · marca ---------- */
  --cor-azul-profundo:      #152E44;  /* primária — a mesma da Group */
  --cor-tinta:              #0B121A;  /* texto sobre fundo claro */
  --cor-branco:             #FFFFFF;

  /* Verde do botão principal, exclusivo desta marca. */
  --verde-claro:            #5DC64F;
  --verde-escuro:           #345B2E;

  /* ---------- CORES · texto ---------- */
  --cor-texto-olho:         #8B93A4;  /* eyebrow sobre fundo claro */
  --cor-texto-corpo:        #6E7F93;
  --cor-texto-apoio:        #8BA7C1;
  --cor-menu-inativo:       rgba(255, 255, 255, 0.6);

  /* ---------- CORES · rodapé ---------- */
  --cor-texto-rodape:       #6E7F93;  /* todo o texto da área escura */
  --cor-linha-rodape:       #625955;  /* miolo opaco das linhas de 1px */

  /* Brilho que faz a passagem do fundo claro da seção anterior para
     o escuro do rodapé.

     As paradas intermediárias são calculadas, não copiadas do
     Figma: ele interpola gradiente com alfa direto e o CSS
     pré-multiplica, então uma parada final transparente puxaria a
     cor do meio para o lado errado. */
  --cor-glow-rodape:        #0C1A26;
  --cor-glow-rodape-meio:   #355570;
  --fundo-rodape-centro:    #152E44;
  --fundo-rodape-borda:     #071017;

  /* ---------- CORES · fundos ---------- */
  --fundo-claro:            #F1F2F4;
  --fundo-pedra:            #E2E1DF;  /* seção "nosso jeito de fazer" */
  --cor-texto-divisor:      #F7F7F7;  /* letreiro ALPHAZ do hero */

  /* ---------- Hero ---------- */

  /* Brilho do hero. Mesma geometria das outras duas marcas; o que
     muda é a cor.

     As paradas intermediárias são calculadas: o Figma interpola
     gradiente com alfa direto e o CSS pré-multiplica, então sem
     elas o azul sai saturado demais no meio da transição. */
  --grad-hero-brilho: radial-gradient(
    /* Raio e centro em porcentagem, nunca em pixels: assim a mesma
       geometria vale na caixa larga do desktop e na estreita do
       celular. Em pixels, o raio horizontal passa a valer várias
       vezes a largura da caixa menor e o degradê vira cor chapada. */
    93.9286% 93.9312% at 50% 6.0694%,
    rgba(0, 37, 65, 1) 0%,
    rgba(0, 50, 89, 1) 17.284%,
    rgba(0, 64, 114, 1) 34.568%,
    rgba(0, 91, 163, 1) 69.137%,
    rgba(19, 95, 155, 0.875) 72.995%,
    rgba(38, 100, 147, 0.75) 76.853%,
    rgba(77, 109, 131, 0.5) 84.568%,
    rgba(154, 127, 99, 0) 100%
  );

  /* Luz lateral do hero.

     Raios em porcentagem, e não em pixels, pela mesma razão do
     brilho acima: em pixels o token não sobrevive a uma caixa de
     outro tamanho, e no celular a elipse degenera em cor chapada. */
  --grad-hero-elipse: radial-gradient(
    50% 50% at 50% 50%,
    #033357 0%,
    rgba(1, 23, 66, 0.5) 42.8%,
    rgba(0, 12, 45, 0) 85.591%
  );

  /* Fundo vertical escuro usado no celular, no lugar da foto do
     hero. Dois tons chapados com uma rampa linear entre eles.

     O token serve ao caso comum, em que a caixa tem a altura
     visível. Uma caixa que transborda — o hero transborda, para o
     esvanecimento do pé existir — precisa remapear as paradas e
     usar só as duas cores: `--fundo-vertical-topo` e
     `--fundo-vertical-base`, logo abaixo. */
  --fundo-vertical-topo: #00082C;
  --fundo-vertical-base: #1B4567;

  --grad-fundo-vertical: linear-gradient(
    180deg,
    var(--fundo-vertical-topo) 0%,
    var(--fundo-vertical-topo) 37.2%,
    var(--fundo-vertical-base) 66.3%,
    var(--fundo-vertical-base) 100%
  );

  /* ---------- GRADIENTES recorrentes ---------- */
  /* Botão claro: mesma construção das outras marcas, cores
     próprias. */
  --grad-botao-claro: linear-gradient(
    to right,
    #E9E8E7 0%,
    #AEC4F4 89.804%,
    #E5E6FF 155.66%
  );
  --grad-botao-claro-texto: linear-gradient(to right, #152E44 0%, #3C3126 100%);

  /* Botão do rodapé: mesma construção, em pedra. Único sem borda e sem
     a sombra pêssego — sobre fundo escuro ela não teria o que fazer. */
  --grad-botao-rodape: linear-gradient(
    to right,
    #FFFFFF 0%,
    #C1B7AE 89.804%,
    #A49A92 155.66%
  );

  /* Botão branco da seção "nosso jeito de fazer": mesma construção,
     mais claro ainda — ele aparece sobre foto clara. */
  --grad-botao-branco: linear-gradient(
    to right,
    #E9E8E7 0%,
    #E6EEFF 89.804%,
    #FFFFFF 155.66%
  );

  --grad-botao-verde: linear-gradient(
    to right,
    #E9E8E7 -62.26%,
    var(--verde-claro) 5.48%,
    var(--verde-escuro) 155.66%
  );

  /* Botão "Enviar" do formulário de contato. Mesma construção do
     claro, puxando mais para o azul. */
  --grad-botao-enviar: linear-gradient(
    to right,
    #E9E8E7 0%,
    #CAD5EE 89.804%,
    #B3C8F5 155.66%
  );

  /* Linha de campo de formulário e divisor entre canais: preto a
     25%, que é o que o desenho pede sobre fundo branco. */
  --linha-formulario: rgba(0, 0, 0, 0.25);

  /* Botão escuro do "Comprar agora", nas páginas de produto. Mesma
     construção dos outros; sem borda e sem a sombra pêssego, como o
     do rodapé — ele aparece sobre fundo claro e a sombra some. */
  --grad-botao-escuro: linear-gradient(
    to right,
    #73818D 0%,
    #152E44 89.804%,
    #0B121A 155.66%
  );

  /* Botão dos cards de produto: mesma construção do claro, tom pêssego */
  --grad-botao-produto: linear-gradient(
    to right,
    #E9E8E7 0%,
    #F4CEAE 89.804%,
    #A49A92 155.66%
  );

  --borda-amostra:          #CBCBCB;  /* contorno das amostras de cor */
  --borda-botao:            #EFEFEF;
  --sombra-botao-repouso:   0 4px 47px rgba(243, 205, 173, 0.5);

  /* Luz do botão em hover — mesmo gesto da Group, mas aqui a Habitat tem
     botões de cores diferentes, e cada um acende na cor dele: verde no
     verde, azul no claro, pêssego no de produto. Uma luz verde num botão
     pêssego lê como erro.

     Só a cor mora aqui, em componentes RGB soltos; a receita da luz (as
     duas camadas, os raios, as opacidades) é uma só, no `estilos.css`.
     Cada valor é a parada do meio do gradiente do próprio botão. */
  --luz-azul:     174 196 244;   /* #AEC4F4 — botão claro */
  --luz-verde:     93 198  79;   /* #5DC64F — botão verde */
  --luz-pessego:  244 206 174;   /* #F4CEAE — botão de produto */
  --luz-bege:     193 183 174;   /* #C1B7AE — botão do rodapé */

  /* Títulos pintados com background-clip: text.

     O token guarda só as PARADAS. O ângulo não é compartilhável: o
     Figma o recalcula para a caixa de cada título, e numa página só
     ele varia de 139,2° (o título estreito da seção 5) a 162,5° (o
     largo da seção 4). Um ângulo fixo aqui erraria em quase todas.
     Cada seção declara o seu — o valor está no comentário da regra. */
  --paradas-titulo: var(--cor-azul-profundo) 30.446%, #9CA1B2 69.554%;

  /* Letreiro gigante do hero: as letras vão de transparente a quase
     branco, de cima para baixo */
  --grad-display: linear-gradient(
    180deg,
    rgba(247, 247, 247, 0) 25.131%,
    var(--cor-texto-divisor) 100%
  );

  /* ---------- TIPOGRAFIA ---------- */
  --fonte-titulo: "Ysabeau", "Optima", "Segoe UI", sans-serif;
  --fonte-corpo:  "Poppins", "Helvetica Neue", Arial, sans-serif;

  --fs-display:         545.87px;  /* letreiro "ALPHAZ" do hero */
  --fs-h1:               73.716px;
  --fs-olho:             27.644px;
  --fs-botao:                20px;
  --fs-corpo-destaque:       22px;
  --fs-legenda:          17.336px;
  --fs-corpo:                17px;
  --fs-micro:                11px;

  --lh-display:         495.711px;
  --lh-h1:               77.77px;
  --lh-olho:            50.127px;
  --lh-botao:           25.408px;
  --lh-corpo:            40.4px;
  --lh-legenda:        21.445px;
  --lh-micro:             30.4px;  /* rótulos de coluna e copyright */

  --ls-display:  -0.08em;
  --ls-titulo:   -0.04em;
  --ls-corpo:     0.05em;
  --ls-micro:     0.45em;

  --peso-display:   800;
  --peso-titulo:    500;
  --peso-botao:     600;
  --peso-corpo:     400;
  --peso-medio:     500;
  --peso-forte:     700;

  /* ---------- MEDIDAS ---------- */
  --container:          1780px;  /* mesmo grid único da Group */
  --recuo-lateral:        70px;

  --raio-botao:           60px;
  --raio-card:            25px;

  /* ---------- MOVIMENTO ---------- */
  --easing-saida: cubic-bezier(0.22, 0.61, 0.36, 1);
}