/* ============================================================
   themes.css — Sistema de diseño (tokens) de LeoPlay.
   Paleta inspirada en el cuadernillo original: papel crema de
   cuaderno, doodles y personajes kawaii (gallina, libros).
   ============================================================ */

:root {
  /* Paleta base */
  --color-bg: #FBF6E9;
  --color-bg-alt: #F3ECD8;
  --color-surface: #FFFFFF;
  --color-ink: #2B2B2B;
  --color-muted: #6b6458;
  --color-border: #E7DEC7;

  --color-accent-1: #F4874B;   /* coral - CTA principal */
  --color-accent-1-dark: #D96B31;
  --color-accent-2: #7EC8B9;   /* verde agua - secundario */
  --color-accent-2-dark: #5FA98F;
  --color-accent-3: #8B7FD1;   /* violeta - docente / diploma */
  --color-accent-4: #F4A9C4;   /* rosa - avatares / lúdico */
  --color-accent-5: #F4D35E;   /* amarillo - XP / estrellas */

  --color-correct: #4CAF7D;
  --color-incorrect: #E85C4A;

  --grad-hero: linear-gradient(135deg, #FDE9CE 0%, #F7D9E4 45%, #DCEFE7 100%);
  --grad-avatar-1: linear-gradient(160deg, #F4A9C4, #F4874B);
  --grad-avatar-2: linear-gradient(160deg, #7EC8B9, #5FA98F);
  --grad-avatar-3: linear-gradient(160deg, #F4D35E, #F4874B);
  --grad-avatar-4: linear-gradient(160deg, #8B7FD1, #6f63b8);
  --grad-avatar-5: linear-gradient(160deg, #F4D35E, #7EC8B9);
  --grad-avatar-6: linear-gradient(160deg, #7EC8B9, #8B7FD1);
  --grad-avatar-7: linear-gradient(160deg, #F4874B, #8B7FD1);
  --grad-avatar-8: linear-gradient(160deg, #F4A9C4, #8B7FD1);

  --font-display: "Baloo 2", "Segoe UI Rounded", "Comic Sans MS", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 8px 24px rgba(43, 43, 43, 0.08);
  --shadow-card: 0 14px 34px rgba(139, 127, 209, 0.16);
  --shadow-press: inset 0 3px 8px rgba(0,0,0,0.15);

  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.6);

  --neu-light: #ffffff;
  --neu-dark: #e3dabf;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --color-bg: #1E1B2E;
  --color-bg-alt: #262238;
  --color-surface: #2A2640;
  --color-ink: #F3EFE3;
  --color-muted: #b8b2c9;
  --color-border: #3B3654;

  --grad-hero: linear-gradient(135deg, #2A2440 0%, #3A2A44 45%, #1F3A38 100%);

  --shadow-soft: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-card: 0 14px 34px rgba(0,0,0,0.45);

  --glass-bg: rgba(42, 38, 64, 0.55);
  --glass-border: rgba(255,255,255,0.08);

  --neu-light: #322c4c;
  --neu-dark: #16131f;

  color-scheme: dark;
}

/* Accesibilidad: texto grande */
.a11y-large-text {
  font-size: 112%;
}
.a11y-large-text .reading-text p {
  font-size: 1.18em;
  line-height: 1.7;
}

/* Accesibilidad: alto contraste */
.a11y-high-contrast {
  --color-bg: #000000;
  --color-bg-alt: #0a0a0a;
  --color-surface: #101010;
  --color-ink: #FFFFFF;
  --color-muted: #e6e6e6;
  --color-border: #FFFFFF;
  --color-accent-1: #FFB347;
  --color-accent-2: #47D6C2;
  --color-accent-3: #C7A8FF;
  --color-correct: #6BFFB0;
  --color-incorrect: #FF7A6E;
}
.a11y-high-contrast .option-card,
.a11y-high-contrast .card,
.a11y-high-contrast .stat-card {
  border: 2px solid var(--color-border) !important;
}