/* ==========================================================================
   TOKENS.CSS — Design System Institucional (Beága Eventos)
   Direção de Arte: Editorial, Corporativo, Sóbrio (Ticketmaster / Eventim)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. PALETA RESTRITA
     - Branco puro predominante
     - Azul-escuro (#0B2A6F) apenas no rodapé e na barra fixa de compra
     - Azul principal (#1D4ED8) apenas em links e no botão de compra
     - Laranja (#B45309) apenas para texto de alerta real ("Últimos ingressos")
     ------------------------------------------------------------------------ */
  --azul-principal: #1D4ED8;
  --azul-principal-hover: #1E40AF;
  --color-cta: var(--azul-principal);
  --azul-escuro: #0B2A6F;
  --azul-claro: #EAF2FF;
  --branco: #FFFFFF;

  --texto: #0F172A;
  --texto-suave: #475569;
  --texto-mutado: #64748B;
  --borda: #E2E8F0;
  --borda-forte: #CBD5E1;
  --superficie-neutra: #F8FAFC;

  --alerta-ultimos: #B45309;

  /* ------------------------------------------------------------------------
     2. TIPOGRAFIA
     - Títulos: Montserrat (peso 600)
     - Texto corrido: Inter (400, 500, 600) — mínimo 16px
     ------------------------------------------------------------------------ */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;     /* 12px — rótulos em caixa alta (DATA, LOCAL) */
  --text-sm: 0.875rem;    /* 14px — taxas, legendas e metadados */
  --text-base: 1rem;      /* 16px — texto corrido padrão */
  --text-md: 1.0625rem;   /* 17px — títulos pequenos (lotes, acordeões) */
  --text-lg: 1.25rem;     /* 20px — títulos médios (seções) */
  --text-xl: 1.625rem;    /* 26px — título principal do evento (mobile) */
  --text-2xl: 2.25rem;    /* 36px — título principal do evento (desktop) */

  /* ------------------------------------------------------------------------
     3. ESPAÇAMENTOS, RAIOS DE BORDA CURTOS (2px a 4px) E TOQUE (44px)
     ------------------------------------------------------------------------ */
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */

  --radius-xs: 2px;
  --radius-sm: 4px;

  --touch-target: 44px;
  --container-max: 1200px;
}