/* ==========================================================================
   BLACK TIGER — Design Tokens
   Fonte: extração das 4 peças gráficas fornecidas pela proprietária.
   Uso: importar antes de qualquer CSS de tema.
   ========================================================================== */

:root {
  /* ---------- 1. CORES — Base (preto texturizado) ---------- */
  --bt-black:            #000000;  /* fundo absoluto, letterbox */
  --bt-ink:              #0A0A0A;  /* fundo padrão de página */
  --bt-surface:          #141414;  /* cards, seções alternadas */
  --bt-surface-2:        #1E1E1E;  /* cards elevados, inputs */
  --bt-line:             #2A2A2A;  /* divisores, bordas neutras */
  --bt-line-gold:        #4A3A16;  /* borda dourada apagada (boxes das peças) */

  /* ---------- 2. CORES — Ouro (cor primária da marca) ---------- */
  --bt-gold-900:         #6B4E17;  /* sombra do gradiente */
  --bt-gold-700:         #8C6B1F;
  --bt-gold-500:         #C9A227;  /* ★ OURO PRIMÁRIO — ícones, links, CTA */
  --bt-gold-300:         #E3C46A;  /* highlight do gradiente */
  --bt-gold-100:         #F5E3A8;  /* brilho especular, hover em texto */

  /* Gradiente metálico do lettering "WRESTLING" / "MUAY THAI" */
  --bt-gold-gradient: linear-gradient(
    175deg,
    #6B4E17 0%,
    #C9A227 22%,
    #F5E3A8 46%,
    #D9B33F 58%,
    #8C6B1F 78%,
    #C9A227 100%
  );

  /* ---------- 3. CORES — Prata (logo badge / lettering EXTREME) ---------- */
  --bt-silver-700:       #6E7378;
  --bt-silver-500:       #A9AEB4;
  --bt-silver-300:       #D6D9DC;
  --bt-silver-100:       #F2F4F5;
  --bt-silver-gradient: linear-gradient(
    175deg, #6E7378 0%, #D6D9DC 40%, #FFFFFF 52%, #A9AEB4 70%, #6E7378 100%
  );

  /* ---------- 4. CORES — Acentos ---------- */
  --bt-red-500:          #C1121F;  /* monograma "BT", identidade Recife Extreme */
  --bt-red-600:          #8E0D17;
  --bt-ember:            #E8763A;  /* brasa/faísca — só em imagem, não em UI */
  --bt-success:          #2E9E5B;  /* WhatsApp / confirmação */
  --bt-whatsapp:         #25D366;

  /* ---------- 5. CORES — Texto ---------- */
  --bt-text:             #FFFFFF;
  --bt-text-muted:       #B5B5B5;
  --bt-text-dim:         #7A7A7A;
  --bt-text-on-gold:     #0A0A0A;  /* texto sobre botão dourado sólido */

  /* ---------- 6. TIPOGRAFIA ---------- */
  /* Display: condensada, caixa alta, tracking largo (padrão das peças) */
  --bt-font-display: "Oswald", "Bebas Neue", "Anton", Impact, sans-serif;
  /* Texto: humanista, boa leitura em fundo escuro */
  --bt-font-body:    "Barlow", "Inter", -apple-system, Segoe UI, Roboto, sans-serif;
  /* Numérica/dados: tabular para preços e horários */
  --bt-font-num:     "Barlow Semi Condensed", "Inter", sans-serif;

  --bt-fw-regular: 400;
  --bt-fw-medium:  500;
  --bt-fw-bold:    700;

  /* Escala tipográfica (base 16px, razão 1.25 → 1.333 no display) */
  --bt-fs-xs:   0.75rem;   /* 12px — legendas de ícone */
  --bt-fs-sm:   0.875rem;  /* 14px */
  --bt-fs-base: 1rem;      /* 16px — corpo */
  --bt-fs-lg:   1.25rem;   /* 20px */
  --bt-fs-xl:   1.75rem;   /* 28px — subtítulo de seção */
  --bt-fs-2xl:  2.5rem;    /* 40px — título de seção */
  --bt-fs-3xl:  4rem;      /* 64px — hero */
  --bt-fs-4xl:  6rem;      /* 96px — lettering tipo "WRESTLING" */

  --bt-lh-tight: 0.95;     /* display */
  --bt-lh-snug:  1.2;
  --bt-lh-base:  1.6;      /* corpo */

  /* Tracking — assinatura visual da marca */
  --bt-ls-hero:   0.02em;
  --bt-ls-label:  0.28em;  /* "GRANDE NOVIDADE", "PARA QUEM QUER COMPETIR" */
  --bt-ls-eyebrow:0.18em;
  --bt-ls-body:   0;

  /* ---------- 7. ESPAÇAMENTO (base 4px) ---------- */
  --bt-sp-1:  0.25rem;
  --bt-sp-2:  0.5rem;
  --bt-sp-3:  0.75rem;
  --bt-sp-4:  1rem;
  --bt-sp-6:  1.5rem;
  --bt-sp-8:  2rem;
  --bt-sp-12: 3rem;
  --bt-sp-16: 4rem;
  --bt-sp-24: 6rem;   /* respiro entre seções — as peças são bem arejadas */
  --bt-sp-32: 8rem;

  --bt-container:     1200px;
  --bt-container-tight: 880px;

  /* ---------- 8. FORMA ---------- */
  --bt-radius-none: 0;
  --bt-radius-sm:   2px;
  --bt-radius:      4px;   /* padrão — as peças usam cantos quase retos */
  --bt-radius-lg:   8px;
  --bt-radius-pill: 999px;
  --bt-border:      1px solid var(--bt-line);
  --bt-border-gold: 1px solid var(--bt-gold-700);

  /* ---------- 9. ELEVAÇÃO E LUZ ---------- */
  --bt-shadow-sm: 0 1px 2px rgba(0,0,0,.6);
  --bt-shadow:    0 8px 24px rgba(0,0,0,.55);
  --bt-shadow-lg: 0 24px 64px rgba(0,0,0,.7);
  --bt-glow-gold: 0 0 24px rgba(201,162,39,.35);
  --bt-glow-gold-strong: 0 0 40px rgba(201,162,39,.55);
  /* Vinheta radial das peças: centro levemente iluminado, bordas pretas */
  --bt-vignette: radial-gradient(
    120% 90% at 50% 30%, rgba(201,162,39,.10) 0%, rgba(0,0,0,0) 55%
  ), radial-gradient(
    100% 100% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%
  );

  /* ---------- 10. MOVIMENTO ---------- */
  --bt-ease:      cubic-bezier(.22,.61,.36,1);
  --bt-ease-out:  cubic-bezier(.16,1,.3,1);
  --bt-dur-fast:  150ms;
  --bt-dur:       260ms;
  --bt-dur-slow:  520ms;

  /* ---------- 11. Z-INDEX ---------- */
  --bt-z-base: 0;
  --bt-z-sticky: 100;
  --bt-z-header: 200;
  --bt-z-overlay: 800;
  --bt-z-modal: 900;
  --bt-z-toast: 1000;
}

/* ==========================================================================
   VARIANTES DE MARCA
   Cada site herda os tokens acima e sobrescreve apenas o acento.
   ========================================================================== */

/* CT Black Tiger PE — ouro puro, institucional */
[data-brand="ct"] {
  --bt-accent:      var(--bt-gold-500);
  --bt-accent-soft: var(--bt-gold-300);
  --bt-accent-deep: var(--bt-gold-700);
}

/* Recife Extreme — evento; prata dominante + vermelho de impacto */
[data-brand="extreme"] {
  --bt-accent:      var(--bt-red-500);
  --bt-accent-soft: #E8434F;
  --bt-accent-deep: var(--bt-red-600);
  --bt-display-fill: var(--bt-silver-gradient);
}

/* Rodrigo Filgueiras — pessoal; ouro mais sóbrio, menos textura */
[data-brand="rodrigo"] {
  --bt-accent:      var(--bt-gold-500);
  --bt-accent-soft: var(--bt-gold-100);
  --bt-accent-deep: var(--bt-gold-900);
  --bt-ink:         #0D0D0D;
}

/* ==========================================================================
   PRIMITIVAS REUTILIZÁVEIS
   ========================================================================== */

.bt-gold-text {
  background: var(--bt-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bt-silver-text {
  background: var(--bt-silver-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bt-eyebrow {
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-sm);
  letter-spacing: var(--bt-ls-label);
  text-transform: uppercase;
  color: var(--bt-text);
}

.bt-display {
  font-family: var(--bt-font-display);
  font-weight: var(--bt-fw-bold);
  line-height: var(--bt-lh-tight);
  letter-spacing: var(--bt-ls-hero);
  text-transform: uppercase;
}

/* Divisor com losango/estrela central — recorrente nas peças */
.bt-divider {
  display: flex;
  align-items: center;
  gap: var(--bt-sp-4);
  color: var(--bt-gold-500);
}
.bt-divider::before,
.bt-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bt-gold-700), transparent);
}

/* Botão primário — ouro sólido */
.bt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-sp-2);
  padding: var(--bt-sp-3) var(--bt-sp-8);
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-sm);
  letter-spacing: var(--bt-ls-eyebrow);
  text-transform: uppercase;
  border-radius: var(--bt-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--bt-dur) var(--bt-ease),
              box-shadow var(--bt-dur) var(--bt-ease),
              background-color var(--bt-dur) var(--bt-ease);
}
.bt-btn--primary {
  background: var(--bt-gold-500);
  color: var(--bt-text-on-gold);
}
.bt-btn--primary:hover {
  background: var(--bt-gold-300);
  box-shadow: var(--bt-glow-gold);
  transform: translateY(-1px);
}
/* Botão secundário — contorno, como as caixas "VAGAS LIMITADAS" */
.bt-btn--ghost {
  background: transparent;
  color: var(--bt-text);
  border-color: var(--bt-gold-700);
}
.bt-btn--ghost:hover {
  border-color: var(--bt-gold-500);
  color: var(--bt-gold-300);
}

/* Caixa com contorno dourado (padrão "TERÇA E QUINTA | 10:30") */
.bt-frame {
  border: var(--bt-border-gold);
  border-radius: var(--bt-radius);
  padding: var(--bt-sp-4) var(--bt-sp-6);
  background: rgba(255,255,255,.02);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}