/**
 * Sistema de temas — Light Anime | Dark Anime | Cyber Neon
 * Preferencia: settings.theme en IndexedDB
 */

html {
  color-scheme: light;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

/* ─── Light Anime (mejorado) ─────────────────────────────────────────────── */
:root,
[data-theme='light'] {
  color-scheme: light;

  --bg-body: #fafafa;
  --bg-gradient-1: #fbcfe8;
  --bg-gradient-2: #bae6fd;
  --bg-pattern: rgba(196, 181, 253, 0.35);

  --panel-bg: #ffffff;
  --panel-glass: rgba(255, 255, 255, 0.92);
  --text-color: #1e293b;
  --text-muted: #64748b;
  --border-dark: #1e293b;
  --border-subtle: rgba(30, 41, 59, 0.12);

  --pastel-pink: #fbcfe8;
  --pastel-purple: #c4b5fd;
  --pastel-green: #a7f3d0;
  --pastel-blue: #bae6fd;
  --pastel-yellow: #fef08a;

  --primary: #8b5cf6;
  --primary-hover: #7c3aed;
  --accent: #6c63ff;
  --positive: #10b981;
  --negative: #f43f5e;
  --glow: rgba(108, 99, 255, 0.35);

  --manga-border: 4px solid var(--border-dark);
  --manga-shadow: 6px 6px 0 var(--border-dark);
  --shadow-soft: 0 8px 32px rgba(30, 41, 59, 0.08);
  --nav-bg: rgba(255, 255, 255, 0.95);
  --chart-grid: rgba(30, 41, 59, 0.08);
  --chart-text: #64748b;
  --input-bg: #ffffff;
  --theme-color-meta: #6c63ff;
}

/* ─── Dark Anime ─────────────────────────────────────────────────────────── */
[data-theme='dark'] {
  color-scheme: dark;

  --bg-body: #0f1117;
  --bg-gradient-1: #1a1d29;
  --bg-gradient-2: #12151f;
  --bg-pattern: rgba(108, 99, 255, 0.06);

  --panel-bg: rgba(26, 29, 41, 0.85);
  --panel-glass: rgba(30, 34, 48, 0.75);
  --text-color: #e8eaef;
  --text-muted: #94a3b8;
  --border-dark: #3d4460;
  --border-subtle: rgba(148, 163, 184, 0.15);

  --pastel-pink: #4a2d42;
  --pastel-purple: #3b3560;
  --pastel-green: #1e3d34;
  --pastel-blue: #1e3347;
  --pastel-yellow: #3d3820;

  --primary: #a78bfa;
  --primary-hover: #c4b5fd;
  --accent: #8b7cf8;
  --positive: #34d399;
  --negative: #fb7185;
  --glow: rgba(139, 124, 248, 0.45);

  --manga-border: 2px solid var(--border-subtle);
  --manga-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px var(--glow);
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.35);
  --nav-bg: rgba(15, 17, 23, 0.92);
  --chart-grid: rgba(148, 163, 184, 0.1);
  --chart-text: #94a3b8;
  --input-bg: rgba(20, 23, 32, 0.9);
  --theme-color-meta: #8b7cf8;
}

/* ─── Cyber Neon ─────────────────────────────────────────────────────────── */
[data-theme='cyber'] {
  color-scheme: dark;

  --bg-body: #0a0e17;
  --bg-gradient-1: #0f1629;
  --bg-gradient-2: #060a12;
  --bg-pattern: rgba(0, 255, 213, 0.04);

  --panel-bg: rgba(12, 20, 36, 0.88);
  --panel-glass: rgba(15, 25, 45, 0.7);
  --text-color: #e0f7fa;
  --text-muted: #7dd3fc;
  --border-dark: #00ffd5;
  --border-subtle: rgba(0, 255, 213, 0.25);

  --pastel-pink: #2d1f3d;
  --pastel-purple: #1f2040;
  --pastel-green: #0d2e2a;
  --pastel-blue: #0c1e3a;
  --pastel-yellow: #2a2610;

  --primary: #00ffd5;
  --primary-hover: #5ffff0;
  --accent: #ff00aa;
  --positive: #00ff88;
  --negative: #ff3366;
  --glow: rgba(0, 255, 213, 0.35);

  --manga-border: 2px solid rgba(0, 255, 213, 0.5);
  --manga-shadow: 0 0 20px rgba(0, 255, 213, 0.2), 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 0 30px rgba(255, 0, 170, 0.08);
  --nav-bg: rgba(10, 14, 23, 0.95);
  --chart-grid: rgba(0, 255, 213, 0.08);
  --chart-text: #7dd3fc;
  --input-bg: rgba(8, 14, 28, 0.95);
  --theme-color-meta: #00ffd5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}