/* ============================================================
   TEMA — paleta e métricas extraídas da brx.bet.br
   Fonte única de cor/tipografia do site. Carregado em todas as páginas.
   Valores medidos do render real (ver _ref/brx/medidas-1440.json).
   ============================================================ */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/montserrat-400.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/montserrat-500.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/montserrat-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/montserrat-700.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fonts/montserrat-800.woff2') format('woff2')}

:root{
  /* ---------- paleta brx (6 cores, como no original) ---------- */
  --brx-base:#212425;            /* fundo da página            (config: primary)   */
  --brx-surface:#323637;         /* header, cards, inputs      (config: secondary) */
  --brx-elevated:#3a3f40;        /* hover / camada acima       */
  --brx-sunken:#1b1e1f;          /* poços: input, bg mais fundo*/
  --brx-field:#424344;           /* miolo de CAMPO de formulário — medido nos modais da brx:
                                    lá o campo é mais CLARO que a superfície e não tem borda */
  --brx-accent:#36a979;          /* verde da marca             (config: bubble)    */
  --brx-accent-hover:#2b8862;
  --brx-on-accent:#212425;       /* texto sobre o verde        (config: textButton)*/
  --brx-text:#fdffff;            /* texto principal            (config: texts)     */
  --brx-text-muted:#a8acad;      /* = branco a ~62% sobre a base */
  --brx-text-dim:#6b7273;
  --brx-money:#ffe800;           /* valores em dinheiro (medido no render)         */

  --brx-border:rgba(253,255,255,.10);
  --brx-border-strong:rgba(253,255,255,.20);

  /* ---------- métricas medidas ---------- */
  --brx-radius-sm:4px;
  --brx-radius:6px;              /* card de jogo — 473 usos no render deles */
  --brx-radius-md:8px;
  --brx-radius-pill:9999px;
  --brx-strip-h:0px;             /* faixa verde REMOVIDA em 18/08 (era 40) */
  --brx-header-h:65px;           /* header              */
  --brx-top:65px;                /* = só o header agora (era 40+65=105); é o topo do rail/sticky */
  --brx-rail-w:280px;            /* sidebar expandida   */
  --brx-rail-w-min:72px;         /* sidebar recolhida   */
  --brx-container:1108px;        /* largura ÚTIL do conteúdo (onde as capas começam) */
  --brx-container-outer:1140px;  /* = container + 16px de recuo de cada lado */
  --brx-card-w:166px;
  --brx-card-h:193px;
  --brx-card-ratio:166/193;      /* aspect-ratio quer número puro, não px */
  --brx-grid-gap:22px;           /* passo 188,5 entre capas (medido) */
  --brx-rail-item-h:40px;        /* item do menu lateral: 219x40 */
  --brx-rail-cta-h:50px;         /* card CTA do menu lateral: 239x50 */
  --brx-font:'Montserrat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* mobile 390 (medido em _ref/brx/medidas-390.json) */
  --brx-strip-h-mob:0px;         /* faixa verde removida em 18/08 (era 36) */
  --brx-header-h-mob:55px;
  --brx-top-mob:55px;            /* = só o header agora (era 36+55=91) */
  --brx-card-w-mob:117px;
  --brx-card-h-mob:136px;
  --brx-grid-gap-mob:10px;       /* passo 127, 3 capas por linha */

  /* ============================================================
     Aliases legados — as 6 famílias de token que existiam no site
     apontam todas para a paleta acima. Mantidos para não quebrar as
     ~9.500 linhas de CSS inline enquanto as fases 3-6 não chegam.
     ============================================================ */

  /* família A — index/esportes/jogo */
  --bg-body:var(--brx-base);
  --bg-darker:var(--brx-sunken);
  --bg-card:var(--brx-surface);
  --bg-hover:var(--brx-elevated);
  --bg-input:var(--brx-sunken);
  --bg-3:var(--brx-elevated);
  --bg-4:#454a4b;
  --text-primary:var(--brx-text);
  --text-secondary:var(--brx-text-muted);
  --text-3:var(--brx-text-dim);
  --accent-green:var(--brx-accent);
  --accent-green-hover:var(--brx-accent-hover);
  --accent-dim:rgba(54,169,121,.14);
  --accent-bd:rgba(54,169,121,.35);
  --odd-color:var(--brx-money);
  --odd-hover:#fff35c;
  --live-color:var(--brx-accent);
  --live-dim:rgba(54,169,121,.14);
  --live-bd:rgba(54,169,121,.35);
  --brand-violet-2:var(--brx-accent-hover);
  --danger:#ef4444;
  --warning:#f59e0b;
  --border:var(--brx-border);
  --border-md:var(--brx-border-strong);
  --border-soft:var(--brx-border);
  --radius:var(--brx-radius);          /* 6px — 473 usos no render deles */
  --radius-sm:var(--brx-radius-sm);    /* 4px */
  --radius-md:var(--brx-radius-md);    /* 8px */
  --radius-pill:var(--brx-radius-pill);
  --font-main:var(--brx-font);

  /* família B — cassino */
  --bg:var(--brx-base);
  --bg-2:var(--brx-sunken);
  --bg-5:#454a4b;
  --text:var(--brx-text);
  --text-2:var(--brx-text-muted);
  --accent:var(--brx-accent);
  --accent-h:var(--brx-accent-hover);
  --accent-bd2:rgba(54,169,121,.35);
  --success:var(--brx-accent);
  --r:var(--brx-radius-md);
  --r-sm:var(--brx-radius);
  --r-pill:var(--brx-radius-pill);

  /* família C — topbar */
  --header-bg:var(--brx-surface);
  --header-h:var(--brx-header-h);
  --wallet-bg:var(--brx-sunken);
  --accent-hover:var(--brx-accent-hover);
  --border-color:var(--brx-border);
  --text-white:var(--brx-text);
  --text-gray:var(--brx-text-muted);

  /* família D — resíduo do tema Stake */
  --stake-bg:var(--brx-base);
  --stake-card:var(--brx-surface);
  --stake-bg-modal:var(--brx-base);
  --stake-primary:var(--brx-accent);
  --stake-primary-hover:var(--brx-accent-hover);
  --stake-green:var(--brx-accent);
  --stake-muted:var(--brx-text-muted);
  --stake-text-ph:var(--brx-text-dim);
  --stake-border-focus:rgba(54,169,121,.5);

  /* família E — conta/carteira */
  --text-muted:var(--brx-text-muted);

  /* família F — chat da tabbar (era azul Stake) */
  --chat-bg:var(--brx-base);
  --chat-card:var(--brx-surface);
  --chat-input:var(--brx-sunken);
  --chat-border:var(--brx-border);
  --chat-muted:var(--brx-text-muted);
  --chat-input-focus:var(--brx-accent);
  --chat-send-btn:var(--brx-accent);
  --chat-send-btn-hover:var(--brx-accent-hover);
  --tabbar-item-active:var(--brx-accent);
}

/* ============================================================
   Normalização de tipografia
   button/input/select/textarea NÃO herdam font-family do body — o Chrome
   usa a fonte do sistema (Arial). Sem esta regra o site fica com duas
   tipografias: Montserrat no texto e Arial em todo botão/campo (a auditoria
   de fase 4 achava ~4.5 mil elementos assim só no cassino).
   Seletor de tipo: qualquer regra de classe da página continua ganhando.
   ============================================================ */
button, input, select, textarea, optgroup { font-family: inherit; }