/* ==========================================================================
   BOMBAR EVENTOS — TOKENS
   Mesma fundação do site principal (site/css/tokens.css e site/MARCA.md):
   paleta, as duas famílias tipográficas e o tratamento de foto. O que muda
   aqui é só o que esta página pede: escala um pouco mais contida e seções
   mais compactas, porque quem fala alto são as fotos.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- cor -- */
  --verde-profundo: #08261F;   /* fundo dominante, navegação               */
  --verde-escuro:   #0D3329;   /* placas, fundo de foto carregando          */
  --preto:          #080807;   /* seções alternadas, chamada final          */
  --dourado:        #C9A227;   /* assinatura: sobretítulo, fio, botão       */
  --dourado-escuro: #8F7018;   /* bordas, ornamento                         */
  --creme:          #F1E6C8;   /* frases de destaque                        */
  --branco-quente:  #F7F3E8;   /* títulos e texto principal                 */
  /* O âmbar da marca fica de fora de propósito: no sistema ele é reservado
     a drinks e cozinha, e esta página não precisa dele.                     */

  --verde-vinheta:  #041710;
  --linha:          rgba(201, 162, 39, .22);
  --linha-forte:    rgba(201, 162, 39, .5);
  --linha-fraca:    rgba(241, 230, 200, .12);

  --texto:          var(--branco-quente);
  --texto-suave:    rgba(247, 243, 232, .74);
  --texto-tenue:    rgba(247, 243, 232, .52);

  /* --------------------------------------------------------- tipografia -- */
  --fonte-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --fonte-texto:   'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida, sem media query. O teto do topo é menor que o do site
     principal: aqui o título divide a primeira tela com uma foto grande. */
  --t-hero:   clamp(2.45rem, 1.5rem + 3.6vw, 4.5rem);
  --t-titulo: clamp(1.95rem, 1.4rem + 2.2vw, 3.15rem);
  --t-frase:  clamp(1.55rem, 1.15rem + 1.7vw, 2.55rem);
  --t-grupo:  clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  --t-corpo:  clamp(1rem, .96rem + .18vw, 1.075rem);
  --t-peq:    .875rem;
  --t-micro:  .75rem;

  --olho:       .7rem;     /* sobretítulo                                 */
  --trilha-olho: .3em;

  /* ------------------------------------------------------------ espaço -- */
  /* Respiro vertical de seção mais curto que o do site: a página é uma
     sequência de fotos e não pode parecer que está faltando conteúdo.     */
  --secao:   clamp(2.75rem, 1.8rem + 3.6vw, 4.75rem);
  --borda:   clamp(1.125rem, .55rem + 2.6vw, 3.5rem);   /* margem lateral */
  --largura: 1320px;
  --vao:     clamp(.5rem, .3rem + .85vw, 1rem);          /* entre fotos   */

  /* Recuo que alinha um texto solto à coluna do .env, usado nas seções
     em que a foto encosta na borda da tela (topo e chamada final). Essas
     seções redefinem o valor com 100cqw, a largura da própria seção, que
     ao contrário de 100vw não conta a barra de rolagem.                   */
  --recuo: max(var(--borda), calc((100vw - var(--largura)) / 2 + var(--borda)));

  /* ------------------------------------------------------------- forma -- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;

  --s-media: 0 14px 34px -18px rgba(4, 12, 9, .85);
  --s-alta:  0 34px 70px -30px rgba(4, 12, 9, .95);

  /* ------------------------------------------------------------ imagem -- */
  /* Mais leve que o do site: as fotos de batizado são quase todas branco,
     e contraste alto estoura o balão e a toalha.                          */
  --trato-foto:        contrast(1.04) saturate(1.04) brightness(.98);
  --trato-foto-quente: contrast(1.08) saturate(1.1) brightness(.97) sepia(.06);

  /* ---------------------------------------------------------- movimento -- */
  --rapido: 180ms;
  --padrao: 340ms;
  --lento:  560ms;
  --curva:  cubic-bezier(.22, .61, .36, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);

  --nav-h: 64px;
}

@media (min-width: 960px) {
  :root { --nav-h: 76px; }
}

/* Granulação cinematográfica, SVG inline: sem custo de rede. */
:root {
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
}