/* ============================================================================
   BRAND.CSS — DESIGN SYSTEM DA CASA (white label)  ·  marca: APOSTA MUITO (conceito Impulso)
   ----------------------------------------------------------------------------
   Único arquivo de cores/fonte/raios/tamanhos. Carrega depois do assets/theme/main.css e
   sobrescreve as variáveis (o main.css não tem cor de marca fixa). Original do topzinho em
   assets/brand.topzinho-original.css. Fonte local em assets/instrument-sans.css.

   Paleta do brand book:
     Preto Placar  #0A0B0A  fundo base (~70% da marca)
     Limão Arranque #C8FF2E destaque: botão de apostar, odds que sobem, barra do símbolo
     Branco        #FFFFFF  texto
     Cinzas de UI (do próprio brand book): #141613 cards · #1F211E / #2A2D27 bordas · #8A8C84 texto apagado · #B8BAB2 / #ECEAE4 texto secundário
   Regra: limão só sobre preto. No tema claro a primária vira o preto e o logo troca pra versão preta.

   Mapa rápido:
   - --primary-main  = cor de ação (botões, tags, bordas ativas, bottom bar)     - --primary-dark = fundo tingido da primária
   - --text-dark     = texto em cima da primária                                 - --success-main = ganhos   - --text-tertiary = odds
   - --paper-*       = superfícies (header, cards, footer)                       - --main-background = fundo do html
   ============================================================================ */

/* ---------- FONTE ---------- */
:root {
  --font-primary: 'Instrument Sans';   /* 400–700 variável (assets/instrument-sans.css). Pesos 800 do layout caem pra 700. */
}

/* ---------- CORES FIXAS (independem do tema) ---------- */
:root {
  --gradient-degree: -76.22deg;
  --white: #ffffff;
  --black: #0A0B0A;
  --red: #E5484D;
  /* níveis VIP (GameX) */
  --bronze: #aa5d38;
  --silver: #808698;
  --gold: #da8a17;
  --platinum: #72cdd4;
}

/* ---------- TEMA ESCURO (padrão) ---------- */
html[theme='dark'], :root, .force-dark {
  --white-black: #ffffff;
  --black-white: #0A0B0A;

  /* fundos / superfícies */
  --main-background: #0A0B0A;      /* Preto Placar — fundo do html */
  --paper-main: #111311;           /* header, blocos da home, footer, botão outline */
  --paper-dark: #141613;           /* cards (rally, pagamentos, bônus), inputs — "card" do brand book */
  --papaer-tertiary: #181A17;      /* (sic — nome original) card de provedor */
  --paper-light: #1F211E;          /* superfícies elevadas, hover */
  --paper-dark-mix: var(--paper-dark);
  --paper-light-mix: var(--paper-light);

  /* PRIMÁRIA — Limão Arranque */
  --primary-main: #C8FF2E;
  --primary-dark: #26330A;         /* tinta escura do limão: chip ativo, método de pagamento selecionado, gradientes */
  --primary-dark-mix: var(--primary-dark);
  --primary-main-mix: var(--primary-main);

  /* secundária = cinzas de UI (selects, bordas, disabled, texto apagado) */
  --secondary-main: #2A2D27;
  --secondary-dark: #3B3E37;
  --secondary-light: #8A8C84;
  --secondary-main-mix: var(--secondary-main);

  --tertiary-light: var(--main-background);
  --tertiary-main: var(--primary-main);
  --tertiary-main-mix: var(--primary-main-mix);
  --hover-main: var(--secondary-main);
  --disabled-main: var(--secondary-dark);
  --disabled-dark: var(--secondary-main);

  /* texto */
  --text-main: #ffffff;
  --text-dark: #0A0B0A;            /* texto sobre o limão — sempre preto (regra do brand book) */
  --text-top-card: var(--white);
  --text-secondary: var(--primary-main);
  --text-secondary-mix: var(--primary-main-mix);
  --text-handicap: var(--primary-main-mix);
  --text-tertiary: #E3FF8A;        /* odds: limão claro, distinto do botão */
  --text-disabled-main: var(--secondary-light);
  --text-disabled-dark-mix: var(--secondary-main-mix);
  --text-disabled-light: var(--secondary-light);

  /* estados */
  --error-main: #E5484D;
  --error-dark: #2B0F10;
  --success-main: #30D158;         /* ganhos / dinheiro — verde, separado do limão */
  --success-dark: #0C2A14;
  --info-main: #FFC533;
  --info-dark: #33270A;

  /* gradientes (usam a primária) */
  --event-card-gradient: linear-gradient(var(--gradientDegree), #0F1408 -6.75%, #3A4A0E 94.73%);
  --bet-boost-gradient: linear-gradient(to bottom, var(--paper-dark) 0%, var(--primary-dark) 100%);
  --product-gradient: linear-gradient(var(--gradientDegree), var(--paper-dark), var(--primary-dark));

  --invert-background: invert(0);
  --invert-color-sign-up: invert(0);
  --invert-color: invert(0);
}

/* ---------- TEMA CLARO ---------- */
/* Limão não tem contraste no branco → primária vira o Preto Placar (botão preto, texto branco); logo na versão preta. */
html[theme='light'], .force-light {
  --white-black: #0A0B0A;
  --black-white: #ffffff;
  --main-background: #E9E9E4;
  --paper-main: #ffffff;
  --paper-dark: #F2F2EE;
  --papaer-tertiary: #E4E5DF;
  --paper-light: #D9D9D3;
  --paper-dark-mix: var(--paper-dark);
  --paper-light-mix: var(--paper-light);
  --primary-main: #0A0B0A;
  --primary-dark: #E4E5DF;
  --primary-dark-mix: var(--primary-dark);
  --primary-main-mix: var(--primary-main);
  --secondary-main: #E4E5DF;
  --secondary-dark: #B8BAB2;
  --secondary-light: #6F716A;
  --secondary-main-mix: var(--secondary-main);
  --tertiary-light: var(--main-background);
  --tertiary-main: var(--primary-main);
  --tertiary-main-mix: var(--primary-main-mix);
  --hover-main: var(--secondary-main);
  --disabled-main: var(--secondary-dark);
  --disabled-dark: var(--secondary-main);
  --text-main: #0A0B0A;
  --text-dark: #ffffff;            /* texto sobre a primária (preta) */
  --text-top-card: var(--black);
  --text-secondary: var(--primary-main);
  --text-secondary-mix: var(--primary-main-mix);
  --text-handicap: var(--text-main);
  --text-tertiary: #4A5E00;        /* odds: limão escurecido pra contraste */
  --text-disabled-main: var(--secondary-light);
  --text-disabled-dark-mix: var(--secondary-main-mix);
  --text-disabled-light: var(--secondary-light);
  --error-main: #C8232A;
  --error-dark: #FBE3E4;
  --success-main: #1E9E45;
  --success-dark: #DDF3E3;
  --info-main: #B88600;
  --info-dark: #FBF1D4;
  --event-card-gradient: linear-gradient(var(--gradientDegree), #F2F2EE -6.75%, #E3F0B0 94.73%);
  --bet-boost-gradient: linear-gradient(to bottom, var(--paper-dark) 0%, var(--primary-dark) 100%);
  --product-gradient: linear-gradient(var(--gradientDegree), var(--paper-dark), var(--primary-dark));
  --invert-background: invert(0);
  --invert-color-sign-up: invert(0);
  --invert-color: invert(0);
}

/* ---------- FORMA / TAMANHOS ---------- */
:root {
  --radius: 8px;                   /* base: thumbs 8 · botões/nav 12 · cards grandes 16 · banners 20 (brand book usa 14–16 nos cards) */
  --gap: 12px;
  --padding: 8px;
  --text-small: 12px;              /* base da escala tipográfica */
  --button-small-height: 32px;
  --button-default-height: 38px;
  --button-big-height: 58px;
  --input-small-height: var(--button-default-height);
  --input-default-height: var(--button-big-height);
}
html[device='smallDesktop'] { --gap: 10px; --padding: 8px; --header-height: 104px; }
html[device='mobile']       { --gap: 8px;  --padding: 8px; --text-small: 10px; --text-icon: 0px; }

/* ---------- LOGO ---------- */
/* Desktop: img.header__logo = assets/brand/logo.svg (horizontal 580×100). Mobile: símbolo 40×40.
   Tema claro troca pra versão preta. Tudo por CSS — os HTMLs não precisam mudar. */
html[device='smallDesktop'] .header__logo-wrap,
html[device='desktop'] .header__logo-wrap { --header-logo-height: 48px; }   /* 580×100 → 278×48 */
html[theme='light'] img.header__logo { content: url("brand/logo-claro.svg"); }
html[device='mobile'] img.header__logo { content: url("brand/simbolo.svg"); width: 40px !important; height: 40px !important; }
html[device='mobile'][theme='light'] img.header__logo { content: url("brand/simbolo-claro.svg"); }

/* ---------- ÍCONES DO MENU ---------- */
/* Os ícones da nav (desktop, bottom bar mobile e menu lateral) são 13 imagens .webp em assets/brand/nav/
   (cassino, cassino-ao-vivo, esporte, ao-vivo, promocoes, desafios, colecoes, roda-da-fortuna, loja, nivel-vip,
   para-ti, torneio-relampago, virtuais). Os 12 chapados foram recoloridos pra cor primária por `python3 recolorir-nav.py`
   (originais laranja do topzinho em assets/brand/_original-topzinho/nav/; trocou a marca → rode de novo).
   `para-ti` (chama) fica vermelho de propósito — também é a cor que aparece bem sobre o círculo limão da bottom bar mobile.
   Tema claro: a primária vira preto, então os chapados viram preto (limão sobre branco não tem contraste). */
html[theme='light'] img[src*='brand/nav/']:not([src*='para-ti']) { filter: brightness(0); }