/* =========================================================
   TEMAS — Academia de Heróis RPG
   Paleta vibrante anime/mangá, 100% original.
   O tema é aplicado via atributo data-theme no <html>.
   ========================================================= */

/* ---------- BASE: tema ESCURO (padrão) ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0e23;
  --bg-2: #12163a;
  --surface: #1a1f4d;
  --surface-2: #242a63;
  --surface-3: #2e3680;

  --text: #f3f5ff;
  --text-muted: #a7aede;
  --border: #39408c;
  --shadow-color: #000000;

  --primary: #3466f7;
  --primary-ink: #ffffff;
  --primary-glow: rgba(52, 102, 247, 0.45);

  --accent: #ff2e88;   /* magenta */
  --accent-2: #ffd21f; /* amarelo-sinal */
  --accent-3: #00e0a4; /* verde menta */
  --danger: #ff5c3a;   /* coral */
  --danger-text: #ff8f75;
  --violet: #8a3ffc;

  /* Variantes legíveis sobre fundo escuro */
  --accent-ink: #14162b;   /* texto sobre --accent */
  --accent-text: #ff6aa9;  /* --accent como texto */
  --mint-text: #00e0a4;    /* --accent-3 como texto */
  --hero-fill: #ffd21f;    /* destaque do título da home */

  --star-empty: #7b83c9;
  --overlay: rgba(4, 6, 20, 0.78);
  --header-bg: rgba(11, 14, 35, 0.88);
  --halftone-color: rgba(255, 255, 255, 0.13);
  --scrollbar: #39408c;
}

/* ---------- TEMA CLARO ---------- */
[data-theme="light"] {
  color-scheme: light;

  --bg: #f2f4ff;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #e9edff;
  --surface-3: #dbe2ff;

  --text: #14162b;
  --text-muted: #4f5578;
  --border: #14162b;
  --shadow-color: #14162b;

  --primary: #1b4dff;
  --primary-ink: #ffffff;
  --primary-glow: rgba(27, 77, 255, 0.3);

  --accent: #e0136f;
  --accent-2: #ffcc00;
  --accent-3: #00a97f;
  --danger: #e0401f;
  --danger-text: #c22e12;
  --violet: #8a4bff;

  /* Variantes legíveis sobre fundo claro */
  --accent-ink: #ffffff;
  --accent-text: #c9105c;
  --mint-text: #00705a;
  --hero-fill: #b06a00;

  --star-empty: #6d74b0;
  --overlay: rgba(20, 22, 43, 0.55);
  --header-bg: rgba(255, 255, 255, 0.9);
  --halftone-color: rgba(20, 22, 43, 0.12);
  --scrollbar: #14162b;
}

/* ---------- Primeira visita: respeita o sistema ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --bg: #f2f4ff;
    --bg-2: #ffffff;
    --surface: #ffffff;
    --surface-2: #e9edff;
    --surface-3: #dbe2ff;

    --text: #14162b;
    --text-muted: #4f5578;
    --border: #14162b;
    --shadow-color: #14162b;

    --primary: #1b4dff;
    --primary-ink: #ffffff;
    --primary-glow: rgba(27, 77, 255, 0.3);

    --accent: #e0136f;
    --accent-2: #ffcc00;
    --accent-3: #00a97f;
    --danger: #e0401f;
    --danger-text: #c22e12;
    --violet: #8a4bff;

    --accent-ink: #ffffff;
    --accent-text: #c9105c;
    --mint-text: #00705a;
    --hero-fill: #b06a00;

    --star-empty: #6d74b0;
    --overlay: rgba(20, 22, 43, 0.55);
    --header-bg: rgba(255, 255, 255, 0.9);
    --halftone-color: rgba(20, 22, 43, 0.12);
    --scrollbar: #14162b;
  }
}