/* ==========================================================================
   b.elzark — Design Tokens
   Base: Manual da Marca v01 / Outubro 2020 (transbrand)
   Desvio autorizado: Nexa (comercial, sem licença) → Outfit (Google Fonts)
   ========================================================================== */

/* --- Fonte oficial ------------------------------------------------------
   Outfit auto-hospedada em assets/fonts desde 13/08/2026. Antes vinha do
   Google Fonts, o que entregava IP e User-Agent de todo visitante ao Google
   ANTES de o banner de consentimento aparecer: transferência a terceiro fora
   do alcance da escolha do titular. Auto-hospedar resolve isso e de quebra
   tira dois handshakes (googleapis + gstatic) do caminho crítico.

   Fonte variável: um arquivo cobre os pesos 100 a 900, então os seis pesos
   que o site usa (200 a 800) saem de um download só.
   Licença SIL OFL 1.1, cópia em assets/fonts/OFL.txt.

   Os unicode-range são os mesmos que o Google declara, e valem a pena: hoje
   nenhuma página do site usa caractere de latin-ext, então esse arquivo nunca
   chega a ser baixado. Fica no repo como seguro para copy futura.
   Ressalva antiga, não mudou com a auto-hospedagem: a seta dos CTAs (U+2192)
   está fora dos dois subsets e sempre renderizou em fonte de sistema. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Cor: paleta principal do manual --------------------------------- */
  --preto: #000000;   /* Pantone Neutral Black C */
  --branco: #ffffff;

  /* Neutros: opacidades do preto, não cores novas.
     O manual não prevê cinzas — são tom/sobretom do preto para bordas
     e texto secundário, mantendo a paleta fiel. */
  --preto-88: rgba(0, 0, 0, 0.88);
  --preto-64: rgba(0, 0, 0, 0.64);
  --preto-40: rgba(0, 0, 0, 0.40);
  --preto-16: rgba(0, 0, 0, 0.16);
  --preto-08: rgba(0, 0, 0, 0.08);

  --branco-88: rgba(255, 255, 255, 0.88);
  --branco-64: rgba(255, 255, 255, 0.64);
  --branco-40: rgba(255, 255, 255, 0.40);
  --branco-16: rgba(255, 255, 255, 0.16);
  --branco-08: rgba(255, 255, 255, 0.08);

  /* Papéis semânticos — seções claras (padrão) */
  --fundo: var(--branco);
  --texto: var(--preto);
  --texto-suave: var(--preto-64);
  --borda: var(--preto-16);

  /* --- Paleta de suporte -----------------------------------------------
     Não usada no site (decisão do projeto: preto e branco puros).
     Mantida documentada para peças futuras. Regra do manual: usar
     SOMENTE tom + sobretom da mesma dupla, nunca misturar duplas.
       azul   #024D66 / #0099C0     roxo  #504571 / #D0A8EF
       verde  #2F433C / #A5D5B6     rosa  #F95758 / #FFB8B8
       nude   #CE8C78 / #EAC1AF
     -------------------------------------------------------------------- */

  /* --- Tipografia ------------------------------------------------------- */
  --fonte: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Pesos — hierarquia por peso, como manda o manual */
  --peso-thin: 200;
  --peso-light: 300;
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-bold: 700;
  --peso-black: 800;

  /* Escala fluida, mobile-first (80% do tráfego é mobile) */
  --t-display: clamp(2.75rem, 11vw, 7rem);    /* hero */
  --t-h1: clamp(2.25rem, 7.5vw, 4.5rem);
  --t-h2: clamp(1.75rem, 5vw, 3rem);
  --t-h3: clamp(1.375rem, 3.5vw, 2rem);
  --t-h4: clamp(1.125rem, 2.5vw, 1.375rem);
  --t-corpo-g: clamp(1.0625rem, 2vw, 1.25rem);
  --t-corpo: 1rem;
  --t-peq: 0.875rem;
  --t-micro: 0.75rem;

  --lh-apertado: 1.02;   /* display */
  --lh-titulo: 1.12;
  --lh-corpo: 1.6;

  --ls-display: -0.03em;
  --ls-titulo: -0.02em;
  --ls-eyebrow: 0.14em;  /* rótulos uppercase */

  /* --- Espaçamento (escala 4px) ---------------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-24: 6rem;
  --e-32: 8rem;

  /* Respiro vertical de seção — encolhe no mobile */
  --secao-y: clamp(4rem, 11vw, 9rem);
  --margem-x: clamp(1.25rem, 5vw, 4rem);

  /* --- Layout ----------------------------------------------------------- */
  --largura-max: 78rem;      /* 1248px */
  --largura-texto: 42rem;    /* medida de leitura confortável */

  /* --- Forma ------------------------------------------------------------ */
  --raio: 4px;               /* cards de produto do manual */
  --raio-g: 9px;             /* botões */
  --raio-pill: 999px;

  /* --- Movimento -------------------------------------------------------- */
  --tempo: 300ms;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Alvo de toque ---------------------------------------------------- */
  --toque-min: 48px;         /* mínimo confortável no mobile */
}

/* Seções em fundo preto — inverte os papéis semânticos */
.inverso {
  --fundo: var(--preto);
  --texto: var(--branco);
  --texto-suave: var(--branco-64);
  --borda: var(--branco-16);

  background-color: var(--fundo);
  color: var(--texto);
}

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