/* ===========================================================
   TOKENS
   Tudo que define o visual mora aqui. Mexer neste arquivo
   muda a página inteira. Não repita cor ou tamanho no resto
   do CSS, puxe sempre a variável.
   =========================================================== */

:root {
  /* --- Cores -------------------------------------------- */
  --tinta:        #0B0A09;   /* fundo escuro principal */
  --carvao:       #15130F;   /* fundo escuro secundário */
  --grafite:      #211E19;   /* blocos e caixas no escuro */
  --chumbo:       #4A443D;   /* bordas no escuro */
  --cinza:        #8A8178;   /* texto apagado no escuro */
  --prata:        #CFC6B8;   /* texto de apoio no escuro */
  --nevoa:        #E8E3DA;   /* fundo claro secundário */
  --papel:        #F7F4EF;   /* fundo claro principal (sheet) */

  /* Acento. Trocar estas três linhas muda o acento da página
     inteira. Dourado é o padrão. Para testar outro caminho,
     comente e use o bloco alternativo abaixo. */
  --acento:       #C9A227;   /* dourado */
  --acento-claro: #E0B63A;
  --acento-fundo: #8A5F2B;   /* versão legível sobre fundo claro */

  /* Alternativa terracota (descomente para testar)
  --acento:       #C8361F;
  --acento-claro: #FF5A2D;
  --acento-fundo: #A62C18;
  */

  /* --- Vidro fosco (cards sobre fundo escuro) ----------- */
  --fosco-bg:     rgba(247, 244, 239, 0.05);
  --fosco-borda:  rgba(247, 244, 239, 0.14);
  --fosco-blur:   26px;

  /* --- Tipografia --------------------------------------- */
  --ff-sans:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --ff-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* clamp(mínimo no celular, escala fluida, máximo no desktop) */
  --fs-display: clamp(44px, 8.4vw, 118px);
  --fs-h1:      clamp(38px, 6.6vw,  84px);
  --fs-h2:      clamp(30px, 4.4vw,  52px);
  --fs-h3:      clamp(21px, 2.4vw,  30px);
  --fs-lead:    clamp(17px, 1.5vw,  20px);
  --fs-body:    16px;
  --fs-mono:    11px;

  --lh-display: 1.02;
  --lh-titulo:  1.1;
  --lh-lead:    1.5;
  --lh-body:    1.65;

  --ls-display: -0.025em;  /* tracking negativo nos títulos grandes */
  --ls-mono:    0.16em;    /* tracking largo nos rótulos mono */

  /* --- Movimento ---------------------------------------- */
  --dur-rapido: 0.18s;
  --dur:        0.35s;
  --dur-lento:  0.72s;

  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-saida: cubic-bezier(0.05, 0.7, 0.1, 1);  /* o principal: entra rápido e assenta devagar */

  --stagger:   90ms;   /* atraso entre itens de uma mesma sequência */

  /* --- Layout ------------------------------------------- */
  --margem:  clamp(20px, calc(100vw / 14), 112px);
  --gutter:  24px;
  --max:     1280px;
  --raio-sheet: 28px;
  --raio-pill:  999px;

  --z-header: 50;
}

/* Quem pediu menos movimento no sistema recebe menos movimento.
   Acessibilidade e também evita enjoo em scroll longo. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapido: 0.01s;
    --dur:        0.01s;
    --dur-lento:  0.01s;
    --stagger:    0ms;
  }
}