/* ─────────────────────────────────────────────────────────────────────────────
   Tokens de design, IgorLive TV Jogos

   A referência é o material de divulgação da marca: preto profundo, laranja
   incandescente como cor de ação, e apoios saturados (roxo, azul, verde, rosa,
   dourado) nos emblemas. Nada de cinza chapado, tudo tem volume e brilho.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Marca ─────────────────────────────────────────────────────────────── */
  --marca-laranja: #f97316;
  --marca-laranja-claro: #ffb020;
  --marca-laranja-brilho: #ffd166;
  --marca-laranja-escuro: #c2410c;
  --marca-laranja-tinta: #431407;
  --marca-cinza: #8e9399;
  --marca-grafite: #2c3035;

  /* ── Superfícies ───────────────────────────────────────────────────────── */
  --fundo: #060407;
  --fundo-alt: #0c0910;
  --superficie: #14101a;
  --superficie-2: #1c1725;
  --superficie-3: #262032;
  --borda: #322a42;
  --borda-forte: #493c5f;

  /* ── Texto ─────────────────────────────────────────────────────────────── */
  --texto: #f6f4fa;
  --texto-suave: #b3abc4;
  --texto-fraco: #7a7190;

  /* ── Semânticos ────────────────────────────────────────────────────────── */
  --sucesso: #22c55e;
  --sucesso-fundo: #06301a;
  --erro: #f43f5e;
  --erro-fundo: #3b0a18;
  --alerta: #fbbf24;
  --info: #3b82f6;

  /* ── Categorias ────────────────────────────────────────────────────────── */
  --cat-filmes: #f97316;
  --cat-series: #3b82f6;
  --cat-novelas: #ec4899;
  --cat-geral: #8b5cf6;

  /* ── Tipografia ────────────────────────────────────────────────────────── */
  --fonte-display: 'Archivo Black', 'Arial Black', 'Segoe UI Black', Impact, system-ui, sans-serif;
  --fonte-corpo: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;

  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: 1.75rem;
  --texto-3xl: 2.25rem;
  --texto-4xl: 3rem;

  /* ── Espaçamento ───────────────────────────────────────────────────────── */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;

  /* ── Raios ─────────────────────────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  /* ── Sombras e brilhos ─────────────────────────────────────────────────── */
  --sombra-sm: 0 2px 8px rgb(0 0 0 / 0.5);
  --sombra-md: 0 10px 28px rgb(0 0 0 / 0.55);
  --sombra-lg: 0 24px 60px rgb(0 0 0 / 0.65);

  --glow-laranja:
    0 0 0 1px rgb(249 115 22 / 0.5), 0 10px 30px -6px rgb(249 115 22 / 0.55),
    0 0 60px -12px rgb(255 176 32 / 0.6);
  --glow-sucesso: 0 0 0 1px rgb(34 197 94 / 0.6), 0 10px 34px -8px rgb(34 197 94 / 0.5);
  --glow-erro: 0 0 0 1px rgb(244 63 94 / 0.6), 0 10px 34px -8px rgb(244 63 94 / 0.5);

  /* Relevo padrão dos elementos com volume (botões, cartões, alternativas). */
  --relevo:
    inset 0 1px 0 rgb(255 255 255 / 0.09), inset 0 -2px 0 rgb(0 0 0 / 0.4),
    0 10px 26px -12px rgb(0 0 0 / 0.9);

  /* ── Movimento ─────────────────────────────────────────────────────────── */
  --rapido: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --normal: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --lento: 460ms cubic-bezier(0.22, 1, 0.36, 1);
  --elastico: 520ms cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --largura-max: 1160px;
  --largura-jogo: 720px;
  --altura-topo: 72px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tema claro

   Não é uma inversão do escuro: o fundo é um creme quente, que conversa com o
   laranja da marca melhor do que branco puro, e as sombras ficam suaves. O
   laranja permanece o mesmo nos dois temas, porque é a cor da marca.
   ────────────────────────────────────────────────────────────────────────── */

:root[data-tema='claro'] {
  --fundo: #f8f5f1;
  --fundo-alt: #f1ece5;
  --superficie: #ffffff;
  --superficie-2: #f6f2ec;
  --superficie-3: #e9e2d8;
  --borda: #ded5c8;
  --borda-forte: #c3b8a6;

  --texto: #1b1518;
  --texto-suave: #574e58;
  --texto-fraco: #877d8a;

  --erro: #dc2626;
  --erro-fundo: #fee2e2;
  --sucesso: #15803d;
  --sucesso-fundo: #dcfce7;

  --sombra-sm: 0 2px 6px rgb(80 60 40 / 0.1);
  --sombra-md: 0 10px 26px rgb(80 60 40 / 0.13);
  --sombra-lg: 0 22px 52px rgb(80 60 40 / 0.18);

  --relevo:
    inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -2px 0 rgb(120 95 70 / 0.1),
    0 8px 20px -12px rgb(80 60 40 / 0.45);

  --glow-laranja:
    0 0 0 1px rgb(249 115 22 / 0.4), 0 10px 26px -8px rgb(249 115 22 / 0.5);
  --glow-sucesso: 0 0 0 1px rgb(21 128 61 / 0.45), 0 10px 28px -10px rgb(21 128 61 / 0.35);
  --glow-erro: 0 0 0 1px rgb(220 38 38 / 0.45), 0 10px 28px -10px rgb(220 38 38 / 0.35);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rapido: 1ms;
    --normal: 1ms;
    --lento: 1ms;
    --elastico: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}