/* ==========================================================================
   TOKENS — André Kalil Nutrição Esportiva
   Variáveis de cor, tipografia e espaçamento. Nenhuma regra de layout aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTES
   Auto-hospedadas. Nenhuma requisição a fonts.googleapis.com (§4).
   Subset: Latin + Latin Extended-A (pt-BR completo: ã õ ç é í ú â ê ô).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ------------------------------------------------------------------------
     COR

     Regra que evita o erro de acessibilidade do site antigo:
     se tem letra, é --bronze-texto. Se é forma, é --bronze.

     --bronze (#8A6E2F) dá 4,46:1 sobre --osso — REPROVA no AA de 4,5:1.
     É o token de "links e numeração" e --osso é o fundo dos cards, ou seja,
     o uso mais provável dele como texto cai justamente onde falha.
     --bronze-texto resolve: 5,55:1 sobre branco, 5,14:1 sobre osso.
     ------------------------------------------------------------------------ */

  --branco:        #FFFFFF;   /* fundo dominante                             */
  --osso:          #F7F6F3;   /* seções alternadas, cards                    */
  --grafite:       #14161A;   /* texto principal, títulos     18,11:1 / br   */
  --grafite-suave: #5A6068;   /* texto de apoio, legendas      6,35:1 / br   */

  --bronze:        #8A6E2F;   /* NÃO-TEXTO: bordas, filete, ícone preenchido */
  --bronze-texto:  #7E6529;   /* TEXTO: links, numeração       5,55:1 / br   */
  --bronze-claro:  #C9AC6B;   /* acento sobre escuro           7,49:1 / carv */
  --carvao:        #1C2024;   /* seções escuras e botão primário             */

  /* Papéis semânticos — usar estes no style.css, não os brutos acima */
  --bg:            var(--branco);
  --bg-alt:        var(--osso);
  --bg-escuro:     var(--carvao);
  --texto:         var(--grafite);
  --texto-suave:   var(--grafite-suave);
  --acento:        var(--bronze-texto);
  --acento-forma:  var(--bronze);
  --linha:         rgba(20, 22, 26, .12);
  --linha-escura:  rgba(255, 255, 255, .16);

  /* Botão primário: --carvao com texto branco = 16,39:1.
     O bronze nunca vira botão principal — foi o que quebrou o site atual (§5). */
  --btn-bg:        var(--carvao);
  --btn-texto:     var(--branco);
  --btn-bg-hover:  #2A3038;

  /* ------------------------------------------------------------------------
     TIPOGRAFIA
     Display: Newsreader — editorial, itálico verdadeiro para o recurso de
              uma palavra destacada por título.
     Corpo:   Inter Tight — espacejamento fechado para blocos densos,
              caixa alta que aguenta o eyebrow de 12px / 0.14em.
     ------------------------------------------------------------------------ */

  --font-display: 'Newsreader', 'Iowan Old Style', Palatino, Georgia, serif;
  --font-corpo:   'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  system-ui, sans-serif;

  /* Escala 64/44/32/24/18/16/14/12 em clamp().
     Piso em 375px, topo em ~1066px. Sem breakpoint de tipografia (§4). */
  --fs-display: clamp(2.25rem,  1.30rem + 4.05vw, 4rem);      /* 36 → 64 */
  --fs-h2:      clamp(1.75rem,  1.19rem + 2.37vw, 2.75rem);   /* 28 → 44 */
  --fs-h3:      clamp(1.5rem,   1.23rem + 1.15vw, 2rem);      /* 24 → 32 */
  --fs-h4:      clamp(1.25rem,  1.11rem + 0.60vw, 1.5rem);    /* 20 → 24 */
  --fs-lead:    clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);   /* 18 → 20 */
  --fs-body:    1rem;                                          /* 16      */
  --fs-sm:      0.875rem;                                      /* 14      */
  --fs-xs:      0.75rem;                                       /* 12      */

  --lh-titulo:  1.08;
  --lh-corpo:   1.6;
  --ls-titulo:  -0.02em;
  --ls-eyebrow:  0.14em;

  /* Medida de leitura — máx. 68 caracteres (§6.8) */
  --medida:     34em;

  /* ------------------------------------------------------------------------
     ESPAÇO E FORMA
     ------------------------------------------------------------------------ */

  --container:     1200px;
  --gutter:        clamp(1.5rem, 0.90rem + 2.60vw, 2.5rem);   /* 24 → 40  */
  --space-section: clamp(4.5rem, 2.40rem + 9.00vw, 7.5rem);   /* 72 → 120 */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;

  --radius-btn:  4px;
  --radius-card: 12px;

  /* Profundidade vem do contraste de fundo, não de sombra (§5) */
  --shadow: 0 1px 2px rgba(20, 22, 26, .06);

  /* Alvo de toque mínimo — 44px (§8) */
  --alvo-toque: 44px;

  --transicao: 150ms ease;
}

/* Único movimento da página é a linha de progresso. Aqui ela é neutralizada
   junto com todo o resto, conforme §5 e §8. */
@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 0ms; }
}