/* =========================================================
   TOKENS DE DESIGN — Academia de Heróis RPG
   Variáveis globais: tipografia, espaçamento, raios, sombras.
   As cores vivem em themes.css (muda conforme o tema).
   ========================================================= */

:root {
  /* ---------- Tipografia ---------- */
  --font-display: "Arial Black", "Segoe UI Black", Impact, Haettenschweiler, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;

  /* Escala fluida (mobile-first) */
  --fs-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --fs-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --fs-base: clamp(1rem, 0.95rem + 0.35vw, 1.1rem);
  --fs-md: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
  --fs-lg: clamp(1.5rem, 1.25rem + 1.6vw, 2.4rem);
  --fs-xl: clamp(2.2rem, 1.5rem + 4vw, 4.5rem);
  --fs-hero: clamp(2.8rem, 1.4rem + 8vw, 7rem);

  --lh-tight: 1.05;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* ---------- Espaçamento ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* ---------- Raios e bordas ---------- */
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --border-w: 3px;
  --border-w-thin: 2px;

  /* ---------- Sombras duras (estilo cartaz de mangá) ---------- */
  --shadow-sm: 4px 4px 0 var(--shadow-color);
  --shadow-md: 6px 6px 0 var(--shadow-color);
  --shadow-lg: 10px 10px 0 var(--shadow-color);

  /* ---------- Movimento ---------- */
  --ease-pop: cubic-bezier(0.2, 0.9, 0.3, 1.4);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 500ms;

  /* ---------- Layout ---------- */
  --maxw: 1180px;
  --header-h: 64px;
  --tap: 44px; /* alvo mínimo de toque */

  /* ---------- Camadas ---------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-menu: 80;
  --z-overlay: 90;
}