/* ============================================================
   BASE — reset, primitivas de layout e utilitários

   O alicerce do CSS: o reset do navegador, as duas primitivas de
   layout (.secao e .container), a tipografia base e os
   utilitários de acessibilidade.

   Este arquivo é idêntico nas três marcas. Só entra aqui o que
   vale para todas — qualquer regra que sirva a uma marca só
   pertence a css/marca.css ou a css/estilos.css. Uma alteração
   feita aqui precisa ser copiada para as outras duas:
   alphaz-group/css/base.css, alphaz-habitat/css/base.css e
   alphaz-concept/css/base.css.

   Nenhuma cor, fonte ou medida é escrita aqui. Todas chegam como
   token, definidas em css/marca.css.
   ============================================================ */

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* O fundo da página é declarado aqui, e precisa continuar sendo.

     Sem esta declaração, quem pinta o fundo é o canvas padrão do
     navegador — que fica cinza quando o sistema está em modo
     escuro, e esse cinza aparece em qualquer vão entre seções.

     `color-scheme: light` acompanha para que controle de
     formulário, barra de rolagem e realce de seleção também fiquem
     no tema claro. O site é claro por definição, não por omissão. */
  background-color: var(--cor-branco);
  color-scheme: light;

  /* Reativa as alternativas contextuais da fonte.

     O Chrome desliga o recurso 'calt' em qualquer texto que tenha
     letter-spacing, e todos os títulos do projeto têm. A Ysabeau
     usa 'calt' para apertar pares de letras, então sem esta linha
     os títulos saem mais largos do que o desenho prevê.

     Vale para a página inteira. A Poppins, usada no corpo, não tem
     'calt' e não é afetada. */
  font-feature-settings: "calt" 1;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ul, ol, hr {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

body {
  min-height: 100vh;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  letter-spacing: var(--ls-corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* ---------- Primitivas de layout ---------- */

/* Faixa de largura total. O fundo vai de borda a borda; o conteúdo
   dentro dela respeita o .container. */
.secao {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* A caixa de conteúdo de todas as seções.

   A largura útil é o token --container, e o recuo lateral fica por
   fora dela — por isso o max-width soma os dois lados. Em telas
   menores que a soma, o recuo continua garantindo respiro nas
   bordas.

   Os dois tokens vêm de css/marca.css e valem para a página
   inteira: mudá-los reposiciona todas as seções de uma vez. */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--recuo-lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--recuo-lateral);
}

/* ---------- Tipografia base ---------- */

.titulo {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
}

/* Título pintado com gradiente em vez de cor chapada.

   Depende de --grad-titulo, que cada marca define em
   css/marca.css. Seções que usam um ângulo próprio sobrescrevem o
   background-image na regra delas, em css/estilos.css. */
.titulo--gradiente {
  background-image: var(--grad-titulo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.olho {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: var(--lh-olho);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
}

/* ---------- Utilitários ---------- */

/* Texto que só leitores de tela alcançam: fica fora da tela sem
   sair da árvore de acessibilidade. */
.apenas-leitor-de-tela {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Contorno de foco para quem navega por teclado.

   Usa currentColor, então acompanha a cor do texto do elemento.
   Onde a cor do texto é transparente — botões com
   background-clip: text — a regra do botão precisa declarar
   outline-color, senão o contorno fica invisível. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- Acessibilidade: movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}