/* ==========================================================================
   tokens.css — design system do Coxixo
   Fonte única de verdade para cor, tipografia, espaçamento e movimento.
   Nenhum valor bruto (#hex, px de espaçamento) deve aparecer nos outros
   arquivos: sempre referenciar uma variável daqui.
   ========================================================================== */

:root {
  /* ---------- Cores da marca ---------------------------------------------
     Amostradas do material oficial (EVENTOS_COXIXO.pdf).
     Fundo escuro é o padrão do site inteiro.                              */
  --verde-profundo: #142f23; /* fundo principal — cor da marca */
  --verde-escuro:   #0d1f17; /* fundo alternado, header sólido, footer */
  --verde-medio:    #1e4230; /* cards e superfícies elevadas */
  --verde-vivo:     #1b7a3e; /* luz da parede — só detalhes e glow */
  --dourado:        #bb8d02; /* CTAs, títulos, bordas */
  --dourado-claro:  #d9a82b; /* hover de links e botões */
  --vinho:          #6e1a18; /* cortina de veludo — acento raro */
  --creme:          #f2ede3; /* texto principal sobre fundo escuro */
  --creme-suave:    #c9c2b4; /* texto secundário */
  --preto:          #080d0a;

  /* Cor com transparência, para overlays e bordas sutis.
     Usar rgb() com barra para poder variar o alfa no ponto de uso. */
  --rgb-dourado: 187 141 2;
  --rgb-creme:   242 237 227;
  --rgb-verde:   20 47 35;
  --rgb-preto:   8 13 10;

  /* Overlay do hero — garante contraste AA do texto sobre a foto. */
  --overlay-hero: rgb(var(--rgb-verde) / 0.72);

  /* ---------- Papéis semânticos ------------------------------------------
     Preferir estes nos componentes: se a paleta mudar, muda aqui.         */
  --bg:            var(--verde-profundo);
  --bg-alt:        var(--verde-escuro);
  --bg-elevado:    var(--verde-medio);
  --texto:         var(--creme);
  --texto-suave:   var(--creme-suave);
  --acento:        var(--dourado);
  --acento-hover:  var(--dourado-claro);
  --borda:         rgb(var(--rgb-creme) / 0.14);
  --borda-acento:  rgb(var(--rgb-dourado) / 0.4);

  /* ---------- Tipografia --------------------------------------------------
     A assinatura manuscrita do logo é IMAGEM, nunca fonte cursiva.        */
  --fonte-display: "Oswald", "Arial Narrow", sans-serif;   /* 500, 600 */
  --fonte-corpo:   "Poppins", system-ui, sans-serif;       /* 300, 400, 500 */
  --fonte-menu:    "Zilla Slab", Georgia, serif;           /* 400, 600 */

  /* Escala fluida: min em 360 px, max em ~1280 px. */
  --txt-xs:   0.75rem;                              /* 12 px — legendas */
  --txt-sm:   0.875rem;                             /* 14 px */
  --txt-base: 1rem;                                 /* 16 px — corpo */
  --txt-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --txt-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --txt-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --txt-2xl:  clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);   /* H2 */
  --txt-3xl:  clamp(2.25rem, 1.6rem + 2.8vw, 4rem);       /* H1 */
  --txt-num:  clamp(2.5rem, 1.8rem + 3vw, 3.75rem);       /* contadores */

  --ls-display: 0.04em;  /* caixa alta pede respiro */
  --ls-olho:    0.18em;  /* eyebrow / olho de seção */
  --lh-titulo:  1.12;
  --lh-corpo:   1.65;

  /* ---------- Espaçamento — escala de 4 px -------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Respiro vertical das seções — encolhe no mobile, cresce no desktop. */
  --sp-secao: clamp(3.5rem, 2rem + 7vw, 7rem);

  /* ---------- Layout ------------------------------------------------------ */
  --container: 1200px;
  --container-estreito: 780px;
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  /* Altura do header. É token porque `scroll-padding-top` e `scroll-margin-top`
     dependem dela: se o header crescer e este valor não acompanhar, o título
     da seção some atrás dele ao clicar numa âncora. */
  --header-altura: 68px;

  /* ---------- Forma e profundidade --------------------------------------- */
  --radius: 2px;         /* cantos quase retos — mais sóbrio */
  --radius-pill: 999px;
  --sombra-sm: 0 1px 2px rgb(var(--rgb-preto) / 0.3);
  --sombra:    0 6px 20px rgb(var(--rgb-preto) / 0.35);
  --sombra-lg: 0 18px 48px rgb(var(--rgb-preto) / 0.48);
  --glow-ouro: 0 0 0 1px rgb(var(--rgb-dourado) / 0.55),
               0 8px 28px rgb(var(--rgb-dourado) / 0.16);

  /* ---------- Movimento ---------------------------------------------------
     Sempre ease-out, 200–300 ms. Desligado em prefers-reduced-motion
     (ver base.css).                                                        */
  /* As durações ficam separadas porque também são usadas como *delay*
     (ver a transição de `visibility` dos overlays em components.css). */
  --dur-rapida: 160ms;
  --dur: 220ms;
  --dur-lenta: 320ms;

  --transicao-rapida: var(--dur-rapida) ease-out;
  --transicao: var(--dur) ease-out;
  --transicao-lenta: var(--dur-lenta) ease-out;

  /* ---------- Camadas ----------------------------------------------------- */
  --z-header: 100;
  --z-menu-mobile: 110;
  --z-fab: 120;
  --z-lightbox: 200;
}

/* No desktop o header é mais alto. Redefinindo o token aqui, o recuo das
   âncoras se ajusta sozinho — não há um segundo valor para esquecer. */
@media (min-width: 1024px) {
  :root {
    --header-altura: 84px;
  }
}