/* ===== variables.css — Variaveis e @import de fontes (:root, tokens) =====
   Gerado por tools/split-css-modules.mjs (Fase B-CSS). Nao editar a divisao manualmente sem
   reconferir a cascata. Ver VaultBrain/Brain/Padroes/Padroes CSS.md ===== */
@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Poppins:wght@400;600;700;800&family=Saira+Stencil+One&display=swap');
:root {
  --bg: #0f1923;
  --surface: #1a2740;
  --surface2: #243350;
  --accent: #f5a623;
  --accent2: #e85d75;
  --green: #4cde8a;
  --blue: #4aa8f5;
  --purple: #b06aff;
  --red: #ff4d6a;
  --text: #f0f4ff;
  --text2: #8899bb;
  --gold: #ffd700; /* cor de fato usada (ouro), agora formalizada na paleta */
}

/* Componentes RGB da paleta, para usar em rgba(var(--x-rgb), alpha) e padronizar transparencias.
   Valores correspondem aos hex acima (slice de cores da camada de CSS). */
:root {
  --black-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;
  --accent-rgb: 245, 166, 35; /* = --accent #f5a623 */
  --gold-rgb: 255, 215, 0; /* = --gold #ffd700 */
  --purple-rgb: 176, 106, 255; /* = --purple #b06aff */
  --red-rgb: 255, 77, 106; /* = --red #ff4d6a */
  --surface-rgb: 26, 39, 64; /* = --surface #1a2740 */
  --green-rgb: 76, 222, 138; /* = --green #4cde8a */
}

/* Escala de border-radius (valores comuns; raros seguem literais). Slice da camada de CSS. */
:root {
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-circle: 50%;
}

/* ── Sombras ── */
:root {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow-accent: 0 0 12px rgba(var(--accent-rgb), 0.4);
  --shadow-glow-gold: 0 0 10px rgba(var(--gold-rgb), 0.4);
  --shadow-glow-purple: 0 0 12px rgba(var(--purple-rgb), 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* ── Bordas ── */
:root {
  --border-subtle: 1px solid rgba(255, 255, 255, 0.07);
  --border-dim: 1px solid rgba(255, 255, 255, 0.12);
  --border-normal: 1px solid rgba(255, 255, 255, 0.18);
  --border-bright: 1px solid rgba(255, 255, 255, 0.28);
  --border-accent: 1px solid rgba(var(--accent-rgb), 0.4);
  --border-gold: 1px solid rgba(var(--gold-rgb), 0.35);
  --border-purple: 1px solid rgba(var(--purple-rgb), 0.4);
}

/* ── Espaçamento ── */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}

/* Escala de z-index (camadas). Valores atuais preservados (slice 1 da camada de CSS).
   Centraliza o empilhamento; para renumerar a escala depois, mexer so aqui (com QA visual). */
:root {
  /* UI base */
  --z-behind: -1; /* atras do fundo (estaca de posicao) */
  --z-base: 0; /* chao / pseudo-fundos (wall-zone, ::before de card e soul-bag) */
  --z-content: 1; /* conteudo normal (unidade, conteudo do modal de almas) */
  --z-decor: 10; /* decoracao do frame do telefone */

  /* Dentro da batalha (relativo ao canvas) */
  --z-battle-vfx-low: 98; /* beam */
  --z-battle-vfx-mid: 99; /* ring, aoe */
  --z-battle-vfx-high: 100; /* texto flutuante, particula */
  --z-battle-overlay: 200; /* salto do macaco, inspecao, banner de furia */
  --z-battle-unit-bars: 300; /* barras de HP/SP da unidade */
  --z-battle-flash: 9998; /* flash de inicio de batalha */
  --z-battle-proj: 10000; /* projeteis */
  --z-battle-proj-top: 10001; /* projetil de coco */

  /* Tutorial ancorado (highlight/seta/balao) */
  --z-tut-highlight: 2;
  --z-tut-arrow: 4;
  --z-tut-bubble: 5;

  /* Modais e paineis */
  --z-modal-panel: 400; /* painel de som do pick */
  --z-modal: 500; /* bestiario, editor de deck */

  /* Overlays de topo (tutorial em tela cheia) */
  --z-overlay-tut-arrow: 99996;
  --z-overlay-tut-pause-backdrop: 99997;
  --z-overlay-tut-bubble: 99998;
  --z-overlay-tutorial: 99999;
}