/* Mr. Oliver TCG · tokens de design
   Única fonte de cores, fontes e espaçamentos. No tema filho do WooCommerce,
   este arquivo é enfileirado antes de todos os outros. */

:root {
  /* marca (identidade 2026: azul royal e amarelo) */
  --cor-azul: #1E4AA8;
  --cor-azul-escuro: #163884;
  --cor-azul-noite: #0E2457;
  --cor-azul-claro: #E8EEFA;
  --cor-amarelo: #FCD116;
  --cor-amarelo-escuro: #EBBE00;
  --cor-amarelo-logo: #F9CC00;
  --cor-amarelo-claro: #FFF1B0;
  --cor-vermelho: #C8362B;
  --cor-verde: #1F6B57;
  --cor-verde-claro: #E3EFEA;
  --cor-laranja-dbs: #E07B39;

  /* neutros */
  --cor-fundo: #F4F5F7;
  --cor-superficie: #FFFFFF;
  --cor-texto: #12151C;
  --cor-apoio: #5A5F6B;
  --cor-borda: #E1E4EA;
  --cor-borda-forte: #C5CAD4;
  --cor-desativado: #8C909A;

  /* papéis */
  --cor-primaria: var(--cor-azul);
  --cor-destaque: var(--cor-amarelo);
  --cor-pix: var(--cor-verde);
  --cor-alerta: var(--cor-vermelho);
  --cor-foco: #0E2457;
  --cor-foco-escuro: var(--cor-amarelo); /* foco sobre fundo azul */

  /* jogos */
  --cor-jogo-pokemon: var(--cor-amarelo);
  --cor-jogo-onepiece: var(--cor-vermelho);
  --cor-jogo-dbs: var(--cor-laranja-dbs);
  --cor-jogo-3d: var(--cor-verde);
  --cor-jogo-geral: var(--cor-azul);

  /* tipografia */
  --fonte-titulo: "Rubik", system-ui, sans-serif;
  --fonte-texto: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-titulo: 800;
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --texto-3xl: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);
  --altura-linha: 1.5;

  /* espaçamento */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --gutter: 1rem;
  --largura-max: 1280px;

  /* forma */
  --raio-card: 18px;
  --raio-md: 12px;
  --raio-sm: 8px;
  --raio-pill: 999px;
  --borda: 1px solid var(--cor-borda);
  --sombra-leve: 0 1px 2px rgba(18, 21, 28, 0.06);
  --sombra-flutuante: 0 8px 24px rgba(18, 21, 28, 0.12);

  /* camadas */
  --z-header: 50;
  --z-megamenu: 60;
  --z-gaveta: 80;
  --z-aviso: 90;

  --transicao: 160ms ease;
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; }
}
@media (min-width: 1200px) {
  :root { --gutter: 2rem; }
}