/* ==========================================================================
   CLUBE BOMBAR — TOKENS
   --------------------------------------------------------------------------
   Mesma fundação visual do site institucional (site/css/tokens.css), com os
   acréscimos que só um sistema precisa: altura de barra, alvo de toque,
   cores de estado. Cor nova NÃO se inventa aqui: tudo sai da paleta da marca.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- cor -- */
  --verde-profundo:  #08261F;   /* fundo dominante, navegação              */
  --verde-escuro:    #0D3329;   /* cartões, blocos secundários             */
  --preto:           #080807;   /* fundo da aplicação, topo                */
  --dourado:         #C9A227;   /* assinatura da marca                     */
  --dourado-escuro:  #8F7018;   /* bordas, ornamentos                      */
  --ambar:           #D88925;   /* atenção, indicadores, destaque quente   */
  --creme:           #F1E6C8;   /* textos de apoio                         */
  --branco-quente:   #F7F3E8;   /* textos principais                       */

  /* Derivados — sempre a partir das cores acima. */
  --verde-vinheta:   #041710;
  --verde-fumo:      #0A2B23;

  --linha:           rgba(201, 162, 39, .22);
  --linha-forte:     rgba(201, 162, 39, .45);
  --linha-fraca:     rgba(241, 230, 200, .12);
  --linha-tenue:     rgba(241, 230, 200, .07);

  --texto:           var(--branco-quente);
  --texto-suave:     rgba(247, 243, 232, .68);
  --texto-tenue:     rgba(247, 243, 232, .45);
  --texto-fantasma:  rgba(247, 243, 232, .28);

  /* Estados — derivados da paleta, não cores novas soltas. */
  --ok:              #6FA971;   /* verde de confirmação, dessaturado       */
  --ok-fundo:        rgba(111, 169, 113, .12);
  --alerta:          var(--ambar);
  --alerta-fundo:    rgba(216, 137, 37, .12);
  --falha:           #C0553C;   /* terracota: recusa sem virar vermelho de erro de sistema */
  --falha-fundo:     rgba(192, 85, 60, .14);

  /* --------------------------------------------------------- tipografia -- */
  --fonte-display: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --fonte-texto:   'Manrope', 'Inter', system-ui, -apple-system, sans-serif;

  --t-hero:  clamp(2.6rem, 8vw, 4.2rem);
  --t-d1:    clamp(1.9rem, 4.6vw, 2.9rem);
  --t-d2:    clamp(1.5rem, 3.4vw, 2.1rem);
  --t-d3:    clamp(1.2rem, 2.4vw, 1.55rem);
  --t-corpo: clamp(.97rem, 1.02vw, 1.05rem);
  --t-peq:   .875rem;
  --t-micro: .75rem;

  --olho:        .7rem;
  --trilha-olho: .3em;

  /* ------------------------------------------------------------ espaço -- */
  --e-1: .25rem;
  --e-2: .5rem;
  --e-3: .75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;

  --borda-pagina: clamp(1rem, 4vw, 2.5rem);
  --largura:      1180px;

  /* ------------------------------------------------------------- forma -- */
  /* Cantos discretos: cartaz de bar, não aplicativo de banco. */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-pill: 999px;

  --s-baixa: 0 1px 2px rgba(4, 12, 9, .35);
  --s-media: 0 14px 34px -18px rgba(4, 12, 9, .85);
  --s-alta:  0 34px 70px -30px rgba(4, 12, 9, .95);
  --s-dourada: 0 0 0 1px var(--linha-forte), 0 12px 30px -14px rgba(201, 162, 39, .3);

  /* ---------------------------------------------------------- movimento -- */
  --rapido: 160ms;
  --padrao: 300ms;
  --lento:  480ms;
  --curva:  cubic-bezier(.22, .61, .36, 1);

  /* -------------------------------------------------------- estrutura ---- */
  --topo-h:     64px;   /* barra superior                                  */
  --barra-h:    68px;   /* barra de navegação inferior, no celular         */
  --lateral-l:  248px;  /* menu lateral, no desktop                        */
  --toque:      44px;   /* alvo mínimo de toque                            */

  /* Granulação — a mesma do site, SVG embutido, sem custo de rede. */
  --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='.4'/%3E%3C/svg%3E");
}

@media (max-width: 760px) {
  :root { --topo-h: 58px; }
}