/* ==========================================================================
   variables.css — "Design tokens"
   --------------------------------------------------------------------------
   Aquí viven TODOS los colores y tipografías de la aplicación. Si quieres
   cambiar el aspecto (por ejemplo el color del club), este es el único sitio
   que hay que tocar: el resto de archivos CSS usan estas variables con var().
   ========================================================================== */

:root {
  /* Superficies y texto (modo claro) */
  --bg: #EDF0F3;          /* fondo de la página */
  --surface: #FFFFFF;     /* tarjetas, calendario, diálogos */
  --field: #F7F9FB;       /* fondo de campos de formulario */
  --ink: #1B2230;         /* texto principal */
  --muted: #5E6878;       /* texto secundario */
  --line: #D5DBE2;        /* bordes */

  /* Colores de acento y de estado */
  --accent: #0E6B73;      /* acento de "Mis lecturas" (verde azulado) */
  --accent-ink: #FFFFFF;  /* texto sobre el acento */
  --danger: #B3261E;      /* acciones destructivas / errores */
  --warn: #B4530A;        /* avisos de "Cerrar" encuesta (naranja) */
  --info: #1F6FB2;        /* avisos de "Revisar" participación (azul) */
  --promo: #2E7D4F;       /* avisos de promoción en Telegram/Instagram (verde) */

  /* Tipografías (con alternativas por si no cargan las de Google Fonts) */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Modo oscuro: se activa solo si el sistema operativo lo tiene activado */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12171F; --surface: #1A212C; --field: #141A23; --ink: #E8ECF2; --muted: #9AA4B5; --line: #2C3645;
    --accent: #52B5BD; --accent-ink: #0B1318; --danger: #F2867F; --warn: #F2A65A; --info: #7DB8F0; --promo: #7FD1A0;
  }
}

/* La pestaña del club usa otro color de acento (morado) para distinguirla
   a simple vista de "Mis lecturas". JS pone body[data-mode="club"]. */
body[data-mode="club"] { --accent: #7A3E8E; }
@media (prefers-color-scheme: dark) {
  body[data-mode="club"] { --accent: #C79AE0; }
}