/* GENERADO por compilar-tokens.mjs a partir de variables.scss. No editar. */
/**
 * Tokens del sistema de diseño de AppLibris.
 *
 * Los componentes usan SIEMPRE el token semántico (--al-*), nunca el
 * color crudo: es lo que permite cambiar de tema (claro/oscuro y, en
 * Plus, «Académica», «Botánica», «Archivo Real») sin tocar un solo
 * componente. Ver docs/DISENO.md. Este fichero se copia tal cual a
 * frontend/src/theme/variables.scss.
 *
 * ## La paleta: «Biblioteca clásica», sacada del logo
 * Los colores NO están inventados: se midieron píxel a píxel sobre el
 * logo de la marca (design/logo/origen/), que son tres libros
 * encuadernados formando una A. De ahí salen el azul marino (#223249,
 * el lomo azul), el granate (#502129, el lomo burdeos), el verde
 * bosque (#283629, el libro abierto), el oro (#a58765, los filetes de
 * los lomos) y el pergamino (#ece0c8, las páginas).
 *
 * El azul es el color principal (navegación, acciones); el granate es
 * el acento que celebra (el check, «Leyendo»); el oro es SIEMPRE
 * decorativo: filetes, esquineras y marcos de guarda, nunca texto
 * pequeño. El fondo es papel, no blanco. El texto es «tinta», un
 * marrón muy oscuro, nunca negro puro.
 *
 * Los tonos 600/700/800 valen para texto sobre claro; los 300/400,
 * para texto sobre oscuro. Todos los contrastes están verificados a
 * AA (ver design/tokens/contraste.mjs).
 */
:root {
  /* ---- Marca: los colores del logo ---- */
  /* Azul marino: el lomo azul del logo. El color principal. */
  --al-azul-50: #eef1f6;
  --al-azul-100: #e1dcd2;   /* papel teñido de azul (10%): fondo de iconos y chips, cálido sobre el papel */
  --al-azul-200: #b6c3d6;
  --al-azul-300: #8aa0c0;   /* azul sobre fondo oscuro: 6.3:1 */
  --al-azul-400: #3e4a62;
  --al-azul-500: #223249;   /* EL azul de marca. Con texto papel: 11.3:1 */
  --al-azul-600: #1e2c40;
  --al-azul-700: #1a2537;   /* cabeceras, barra de navegación */
  --al-azul-900: #141d2b;   /* fondo del tema oscuro */

  /* Granate: el lomo burdeos. El acento que celebra. */
  --al-granate-100: #ecdcd4;  /* papel teñido de granate: fondo del acento suave */
  --al-granate-300: #c98a8a;  /* granate sobre oscuro: 6.0:1 */
  --al-granate-400: #7f4e52;
  --al-granate-500: #502129;  /* EL granate. Con texto papel: 11.5:1 */
  --al-granate-600: #43202a;
  --al-granate-700: #3a1720;

  /* Verde bosque: el libro abierto del logo. Estados «leído». */
  --al-verde-100: #e4ebe2;
  --al-verde-300: #8fae8f;    /* verde sobre oscuro: 7.0:1 */
  --al-verde-400: #39493c;
  --al-verde-500: #283629;
  --al-verde-600: #22301f;
  --al-verde-700: #1d2b1e;

  /* Oro: los filetes de los lomos. SIEMPRE decorativo. */
  --al-oro-100: #f3e9d6;
  --al-oro-300: #cdb188;    /* filetes sobre oscuro y texto dorado en oscuro: 8.3:1 */
  --al-oro-400: #bb9a6f;
  --al-oro-500: #a58765;    /* EL oro: marcos de guarda, esquineras, estrellas */
  --al-oro-700: #6b4f2e;    /* oro como texto sobre papel: 6.6:1 */
  --al-oro-800: #5a4222;    /* oro como texto, contraste alto: 8.2:1 */

  /* Papel: las páginas del logo. El fondo de toda la app. */
  --al-papel-50: #f6efe1;   /* EL fondo: papel cálido, nunca blanco puro */
  --al-papel-100: #f0e7d5;  /* superficie secundaria, chips, filas alternas */
  --al-papel-200: #ece0c8;  /* EL pergamino: bordes, fondo del icono */
  --al-papel-300: #dbc6a9;  /* bordes fuertes, skeletons */

  /* Tinta: el texto. Un marrón muy oscuro, no negro. */
  --al-tinta-100: #e2ddd4;  /* neutro: «Abandonado», deshabilitado */
  --al-tinta-200: #c8c0b3;
  --al-tinta-300: #a2988a;
  --al-tinta-400: #776a59;  /* texto terciario, también en letra pequeña: 4.6:1 sobre papel (30-09-2026; era #7d6f5e, 4.3:1) */
  --al-tinta-500: #54483c;  /* texto secundario: 7.8:1 sobre papel */
  --al-tinta-700: #352d25;
  --al-tinta-900: #1f1a16;  /* EL texto: 15.1:1 sobre papel */
  --al-blanco: #ffffff;

  /* ---- Semánticos (los que usan los componentes) ---- */
  --al-fondo: var(--al-papel-50);
  --al-fondo-elevado: #fdfaf3;                  /* tarjetas, hojas modales: papel un punto más claro, NO blanco */
  --al-superficie: #fdfaf3;
  --al-superficie-2: var(--al-papel-100);       /* chips, campos, filas alternas */
  --al-superficie-3: var(--al-papel-200);       /* skeletons, pistas de progreso */
  --al-texto: var(--al-tinta-900);
  --al-texto-2: var(--al-tinta-500);
  --al-texto-3: var(--al-tinta-400);
  --al-texto-inverso: var(--al-papel-50);

  --al-primario: var(--al-azul-500);            /* botón principal, pestaña activa, enlaces */
  --al-primario-texto: var(--al-papel-50);
  --al-primario-fuerte: var(--al-azul-700);     /* texto azul, hover/pressed */
  --al-primario-suave: var(--al-azul-100);      /* fondos de chip y de icono */
  --al-acento: var(--al-granate-500);           /* el check, «Leyendo», CTA de celebración */
  --al-acento-texto: var(--al-papel-50);
  --al-acento-fuerte: var(--al-granate-600);    /* granate como texto */
  --al-acento-suave: var(--al-granate-100);
  --al-oro: var(--al-oro-500);
  --al-oro-texto: var(--al-oro-800);
  --al-oro-suave: var(--al-oro-100);            /* fondo del chip «Pendiente» */

  --al-borde: var(--al-papel-200);
  --al-borde-fuerte: var(--al-papel-300);
  --al-filete: var(--al-oro-500);               /* las líneas doradas: filetes, esquineras y marcos de guarda */

  /*
   * El marco de guarda: el filete doble dorado que enmarca el
   * contenido de cada pantalla, como la guarda de un tomo
   * encuadernado. Son tokens y no valores sueltos porque el grosor
   * cambia en oscuro (el oro pesa más sobre fondo oscuro).
   */
  --al-guarda-linea: 1.5px;
  --al-guarda-linea-interior: 1px;
  --al-guarda-hueco: 5px;                       /* separación entre las dos líneas */
  --al-guarda-esquina: 38px;                    /* lado del ornamento de esquina */
  --al-guarda-radio: var(--al-radius-sm);
  --al-guarda-color: var(--al-oro-500);
  --al-guarda-color-interior: rgb(165 135 101 / 45%);

  /* Estados de lectura: un color por estado, siempre el mismo en toda la app */
  --al-estado-leido: var(--al-verde-500);
  --al-estado-leyendo: var(--al-granate-500);
  --al-estado-pendiente: var(--al-oro-500);
  --al-estado-abandonado: var(--al-tinta-300);

  --al-exito: #2f6b46;
  --al-aviso: #8a6118;
  --al-error: #8f3030;
  --al-info: var(--al-azul-500);

  /* Las apps de las que se importa (Perfil › Importar tu biblioteca): su color, para reconocerlas */
  --al-app-goodreads: #553b08;
  --al-app-storygraph: #0e4a53;
  --al-app-fable: #1f3b36;

  /* Sombras: marrón tinta muy diluido, nunca negro (el negro ensucia el papel) */
  --al-sombra-suave: 0 4px 16px rgb(31 26 22 / 9%);
  --al-sombra-media: 0 8px 24px rgb(31 26 22 / 14%);
  --al-sombra-portada: 0 14px 28px -12px rgb(31 26 22 / 42%);   /* la portada «flota» sobre la estantería */
  --al-sombra-hoja: 0 -8px 32px rgb(31 26 22 / 16%);             /* hojas modales que suben */
  --al-sombra-texto: 0 1px 2px rgb(31 26 22 / 50%);              /* texto claro sobre foto/portada */

  /* Degradados de marca */
  --al-degradado-marca: linear-gradient(135deg, #1a2537 0%, #2c3f5a 100%);   /* cabeceras, ex libris, splash */
  --al-degradado-check: linear-gradient(135deg, #502129 0%, #6b2f38 100%);   /* el botón «Marcar como leído» */
  --al-degradado-barra: linear-gradient(135deg, #1a2537 0%, #2c3f5a 100%);   /* el relleno de las barras de Estadísticas (objetivo, por mes, por género) */
  --al-degradado-papel: linear-gradient(180deg, #f6efe1 0%, #f0e7d5 100%);   /* fondos de pantalla hero */
  --al-degradado-portada: linear-gradient(90deg, rgb(0 0 0 / 22%) 0%, rgb(255 255 255 / 10%) 6%, rgb(0 0 0 / 0%) 14%); /* el lomo de una portada: se superpone a la imagen */

  /* ---- Tipografía ---- */
  /* Fraunces (serifa con carácter, «editorial») para títulos, títulos de libro y cifras grandes.
     Manrope (sans humanista, muy legible) para todo lo demás. Ambas OFL, empaquetadas en assets/fonts. */
  --al-fuente-titulos: 'Fraunces', Georgia, 'Times New Roman', serif;
  --al-fuente: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --al-texto-xs: 12px;
  --al-texto-sm: 13px;
  --al-texto-md: 15px;      /* cuerpo */
  --al-texto-lg: 17px;      /* sinopsis, lectura larga */
  --al-titulo-sm: 18px;
  --al-titulo-md: 22px;
  --al-titulo-lg: 28px;
  --al-titulo-xl: 34px;
  --al-display: 42px;       /* cifras de estadísticas, saludo */
  --al-interlineado: 1.5;
  --al-interlineado-titulo: 1.18;
  --al-mayusculas: 0.12em;  /* letter-spacing de las etiquetas en mayúsculas («PARA TI», «NOVEDADES») */

  /* ---- Movimiento ---- */
  --al-dur-instant: 100ms;  /* feedback táctil */
  --al-dur-fast: 180ms;     /* hover, chips, iconos */
  --al-dur-base: 280ms;     /* la mayoría: aparecer, cambiar de estado */
  --al-dur-slow: 420ms;     /* hojas modales, estanterías */
  --al-dur-pagina: 360ms;   /* transición entre páginas */
  --al-dur-wow: 1200ms;     /* el check que se dibuja, confeti, splash */
  --al-escalon: 40ms;       /* retardo entre elementos de una lista (stagger), máximo 8 elementos */

  /* Entrar con ease-out, salir con ease-in. Invertirlas hace que todo
     parezca pesado. La «spring» es para lo que celebra (el check). */
  --al-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --al-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --al-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --al-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --al-ease-pagina: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Espaciado y forma ---- */
  --al-space-1: 4px;
  --al-space-2: 8px;
  --al-space-3: 12px;
  --al-space-4: 16px;
  --al-space-5: 20px;
  --al-space-6: 24px;
  --al-space-8: 32px;
  --al-space-10: 40px;
  --al-space-12: 48px;
  --al-radius-sm: 8px;
  --al-radius-md: 14px;
  --al-radius-lg: 20px;
  --al-radius-xl: 28px;
  --al-radius-pill: 999px;
  --al-radius-portada: 4px;   /* las portadas son casi rectas: son libros, no tarjetas */
  --al-nav-alto: 64px;
  --al-banner-alto: 60px;     /* hueco RESERVADO para el banner de AdMob: nunca salta el layout */
  --al-portada-ancho: 112px;  /* tamaño estándar de portada en estanterías (proporción 2:3) */
  --al-margen: var(--al-space-5);

  /* ---- Puente a Ionic ---- */
  --ion-background-color: var(--al-fondo);
  --ion-background-color-rgb: 246, 239, 225;
  --ion-text-color: var(--al-texto);
  --ion-text-color-rgb: 31, 26, 22;
  --ion-font-family: var(--al-fuente);
  --ion-toolbar-background: var(--al-fondo);
  --ion-toolbar-color: var(--al-texto);
  --ion-item-background: transparent;
  --ion-card-background: var(--al-superficie);
  --ion-border-color: var(--al-borde);
  --ion-placeholder-color: var(--al-texto-3);
  /* Velo de hojas y modales: azul noche en vez del negro por defecto de Ionic, que agrisaba el papel. */
  --ion-backdrop-color: #141d2b;

  --ion-color-primary: #223249;
  --ion-color-primary-rgb: 34, 50, 73;
  --ion-color-primary-contrast: #f6efe1;
  --ion-color-primary-contrast-rgb: 246, 239, 225;
  --ion-color-primary-shade: #1e2c40;
  --ion-color-primary-tint: #3a475b;

  --ion-color-secondary: #502129;
  --ion-color-secondary-rgb: 80, 33, 41;
  --ion-color-secondary-contrast: #f6efe1;
  --ion-color-secondary-contrast-rgb: 246, 239, 225;
  --ion-color-secondary-shade: #431c23;
  --ion-color-secondary-tint: #63373e;

  --ion-color-tertiary: #a58765;
  --ion-color-tertiary-rgb: 165, 135, 101;
  --ion-color-tertiary-contrast: #1f1a16;
  --ion-color-tertiary-contrast-rgb: 31, 26, 22;
  --ion-color-tertiary-shade: #917759;
  --ion-color-tertiary-tint: #ae9374;

  --ion-color-success: #2f6b46;
  --ion-color-success-rgb: 47, 107, 70;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #295e3e;
  --ion-color-success-tint: #447a59;

  --ion-color-warning: #8a6118;
  --ion-color-warning-rgb: 138, 97, 24;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #795515;
  --ion-color-warning-tint: #96712f;

  --ion-color-danger: #8f3030;
  --ion-color-danger-rgb: 143, 48, 48;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #7e2a2a;
  --ion-color-danger-tint: #9a4545;

  --ion-color-light: #f0e7d5;
  --ion-color-light-rgb: 240, 231, 213;
  --ion-color-light-contrast: #1f1a16;
  --ion-color-light-contrast-rgb: 31, 26, 22;
  --ion-color-light-shade: #d3cbbb;
  --ion-color-light-tint: #f2e9d9;

  --ion-color-medium: #54483c;
  --ion-color-medium-rgb: 84, 72, 60;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #4a3f35;
  --ion-color-medium-tint: #655a50;

  --ion-color-dark: #1f1a16;
  --ion-color-dark-rgb: 31, 26, 22;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1b1713;
  --ion-color-dark-tint: #35312d;

  color-scheme: light;
}

/**
 * Tema oscuro: «la biblioteca de noche». Fondo azul marino casi negro
 * (el azul-900 del logo, no gris), texto papel (no blanco: el blanco
 * puro deslumbra), y el oro y el granate un punto más claros para
 * conservar el contraste. Se aplica por preferencia del sistema salvo
 * que el usuario fije el tema en Ajustes (data-theme en <html>, lo
 * pone TemaService).
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --al-fondo: var(--al-azul-900);
  --al-fondo-elevado: #1c2738;
  --al-superficie: #1c2738;
  --al-superficie-2: #243147;
  --al-superficie-3: #2d3c55;
  --al-texto: #f0e6d2;
  --al-texto-2: #c2b7a0;
  --al-texto-3: #988d7f;  /* 4.6:1 sobre las tarjetas (30-09-2026; era #94897a, 4.4:1) */
  --al-texto-inverso: var(--al-tinta-900);

  --al-primario: var(--al-azul-300);
  --al-primario-texto: var(--al-azul-900);
  --al-primario-fuerte: #a8bad6;
  --al-primario-suave: rgb(138 160 192 / 18%);
  --al-acento: var(--al-granate-300);
  /*
   * El texto del acento solo va sobre `--al-degradado-check` (el botón
   * de acento y el de escanear). En oscuro, ese degradado se aclara un
   * punto para despegarse del fondo noche, y el texto pasa a papel
   * (5,9:1 y 4,7:1 en los dos extremos). Antes el degradado seguía
   * siendo el granate oscuro del tema claro con texto azul noche encima:
   * ilegible.
   */
  --al-acento-texto: #f6efe1;
  --al-degradado-check: linear-gradient(135deg, #8f4450 0%, #a3525e 100%);
  --al-acento-fuerte: #dba5a5;
  --al-acento-suave: rgb(201 138 138 / 18%);
  --al-oro-texto: var(--al-oro-300);
  --al-oro-suave: rgb(205 177 136 / 16%);

  --al-borde: rgb(240 230 210 / 12%);
  --al-borde-fuerte: rgb(240 230 210 / 20%);
  --al-filete: var(--al-oro-300);

  /* El oro pesa más sobre fondo oscuro: el filete se afina. */
  --al-guarda-color: var(--al-oro-300);
  --al-guarda-color-interior: rgb(205 177 136 / 38%);
  --al-guarda-linea: 1px;

  --al-estado-leido: var(--al-verde-300);
  --al-estado-leyendo: var(--al-granate-300);
  --al-estado-pendiente: var(--al-oro-300);
  --al-estado-abandonado: var(--al-tinta-400);

  --al-exito: #6fae86;
  --al-aviso: #d4a850;
  --al-error: #d98080;

  --al-sombra-suave: 0 4px 16px rgb(0 0 0 / 32%);
  --al-sombra-media: 0 8px 24px rgb(0 0 0 / 42%);
  --al-sombra-portada: 0 14px 28px -12px rgb(0 0 0 / 70%);
  --al-sombra-hoja: 0 -8px 32px rgb(0 0 0 / 48%);
  --al-degradado-marca: linear-gradient(135deg, #141d2b 0%, #223249 100%);
  /*
   * Las barras de Estadísticas, en el azul de la noche (12-10-2026): con el
   * degradado de marca, el relleno salía MÁS oscuro que su pista y lo vacío
   * parecía lleno (en «Por mes», casi todos los meses). 4,2:1 sobre la pista.
   */
  --al-degradado-barra: linear-gradient(135deg, #8aa0c0 0%, #a8bad6 100%);
  --al-degradado-papel: linear-gradient(180deg, #141d2b 0%, #1c2738 100%);

  --ion-background-color: #141d2b;
  --ion-background-color-rgb: 20, 29, 43;
  --ion-text-color: #f0e6d2;
  --ion-text-color-rgb: 240, 230, 210;
  --ion-toolbar-background: #141d2b;
  --ion-toolbar-color: #f0e6d2;
  --ion-card-background: #1c2738;
  --ion-border-color: rgb(240 230 210 / 12%);
  --ion-placeholder-color: #94897a;
  --ion-color-primary: #8aa0c0;
  --ion-color-primary-rgb: 138, 160, 192;
  --ion-color-primary-contrast: #141d2b;
  --ion-color-primary-contrast-rgb: 20, 29, 43;
  --ion-color-primary-shade: #798da9;
  --ion-color-primary-tint: #96aac6;
  --ion-color-secondary: #c98a8a;
  --ion-color-secondary-rgb: 201, 138, 138;
  --ion-color-secondary-contrast: #141d2b;
  --ion-color-secondary-contrast-rgb: 20, 29, 43;
  --ion-color-secondary-shade: #b17979;
  --ion-color-secondary-tint: #ce9696;
  --ion-color-light: #243147;
  --ion-color-light-rgb: 36, 49, 71;
  --ion-color-light-contrast: #f0e6d2;
  --ion-color-light-contrast-rgb: 240, 230, 210;
  --ion-color-light-shade: #1f2b3e;
  --ion-color-light-tint: #3a4659;
  --ion-color-dark: #f0e6d2;
  --ion-color-dark-rgb: 240, 230, 210;
  --ion-color-dark-contrast: #141d2b;
  --ion-color-dark-contrast-rgb: 20, 29, 43;
  --ion-color-dark-shade: #d3cab9;
  --ion-color-dark-tint: #f2e9d7;

  color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --al-fondo: var(--al-azul-900);
  --al-fondo-elevado: #1c2738;
  --al-superficie: #1c2738;
  --al-superficie-2: #243147;
  --al-superficie-3: #2d3c55;
  --al-texto: #f0e6d2;
  --al-texto-2: #c2b7a0;
  --al-texto-3: #988d7f;  /* 4.6:1 sobre las tarjetas (30-09-2026; era #94897a, 4.4:1) */
  --al-texto-inverso: var(--al-tinta-900);

  --al-primario: var(--al-azul-300);
  --al-primario-texto: var(--al-azul-900);
  --al-primario-fuerte: #a8bad6;
  --al-primario-suave: rgb(138 160 192 / 18%);
  --al-acento: var(--al-granate-300);
  /*
   * El texto del acento solo va sobre `--al-degradado-check` (el botón
   * de acento y el de escanear). En oscuro, ese degradado se aclara un
   * punto para despegarse del fondo noche, y el texto pasa a papel
   * (5,9:1 y 4,7:1 en los dos extremos). Antes el degradado seguía
   * siendo el granate oscuro del tema claro con texto azul noche encima:
   * ilegible.
   */
  --al-acento-texto: #f6efe1;
  --al-degradado-check: linear-gradient(135deg, #8f4450 0%, #a3525e 100%);
  --al-acento-fuerte: #dba5a5;
  --al-acento-suave: rgb(201 138 138 / 18%);
  --al-oro-texto: var(--al-oro-300);
  --al-oro-suave: rgb(205 177 136 / 16%);

  --al-borde: rgb(240 230 210 / 12%);
  --al-borde-fuerte: rgb(240 230 210 / 20%);
  --al-filete: var(--al-oro-300);

  /* El oro pesa más sobre fondo oscuro: el filete se afina. */
  --al-guarda-color: var(--al-oro-300);
  --al-guarda-color-interior: rgb(205 177 136 / 38%);
  --al-guarda-linea: 1px;

  --al-estado-leido: var(--al-verde-300);
  --al-estado-leyendo: var(--al-granate-300);
  --al-estado-pendiente: var(--al-oro-300);
  --al-estado-abandonado: var(--al-tinta-400);

  --al-exito: #6fae86;
  --al-aviso: #d4a850;
  --al-error: #d98080;

  --al-sombra-suave: 0 4px 16px rgb(0 0 0 / 32%);
  --al-sombra-media: 0 8px 24px rgb(0 0 0 / 42%);
  --al-sombra-portada: 0 14px 28px -12px rgb(0 0 0 / 70%);
  --al-sombra-hoja: 0 -8px 32px rgb(0 0 0 / 48%);
  --al-degradado-marca: linear-gradient(135deg, #141d2b 0%, #223249 100%);
  /*
   * Las barras de Estadísticas, en el azul de la noche (12-10-2026): con el
   * degradado de marca, el relleno salía MÁS oscuro que su pista y lo vacío
   * parecía lleno (en «Por mes», casi todos los meses). 4,2:1 sobre la pista.
   */
  --al-degradado-barra: linear-gradient(135deg, #8aa0c0 0%, #a8bad6 100%);
  --al-degradado-papel: linear-gradient(180deg, #141d2b 0%, #1c2738 100%);

  --ion-background-color: #141d2b;
  --ion-background-color-rgb: 20, 29, 43;
  --ion-text-color: #f0e6d2;
  --ion-text-color-rgb: 240, 230, 210;
  --ion-toolbar-background: #141d2b;
  --ion-toolbar-color: #f0e6d2;
  --ion-card-background: #1c2738;
  --ion-border-color: rgb(240 230 210 / 12%);
  --ion-placeholder-color: #94897a;
  --ion-color-primary: #8aa0c0;
  --ion-color-primary-rgb: 138, 160, 192;
  --ion-color-primary-contrast: #141d2b;
  --ion-color-primary-contrast-rgb: 20, 29, 43;
  --ion-color-primary-shade: #798da9;
  --ion-color-primary-tint: #96aac6;
  --ion-color-secondary: #c98a8a;
  --ion-color-secondary-rgb: 201, 138, 138;
  --ion-color-secondary-contrast: #141d2b;
  --ion-color-secondary-contrast-rgb: 20, 29, 43;
  --ion-color-secondary-shade: #b17979;
  --ion-color-secondary-tint: #ce9696;
  --ion-color-light: #243147;
  --ion-color-light-rgb: 36, 49, 71;
  --ion-color-light-contrast: #f0e6d2;
  --ion-color-light-contrast-rgb: 240, 230, 210;
  --ion-color-light-shade: #1f2b3e;
  --ion-color-light-tint: #3a4659;
  --ion-color-dark: #f0e6d2;
  --ion-color-dark-rgb: 240, 230, 210;
  --ion-color-dark-contrast: #141d2b;
  --ion-color-dark-contrast-rgb: 20, 29, 43;
  --ion-color-dark-shade: #d3cab9;
  --ion-color-dark-tint: #f2e9d7;

  color-scheme: dark;
}

/*
 * Sin animaciones para quien lo pide en el ajuste de accesibilidad de su
 * móvil («Reducir movimiento»). No hay ajuste propio en la app: Kevin lo
 * quitó el 25-09-2026 (la app es animada, sin opción), pero el del
 * sistema se respeta siempre, que es de accesibilidad.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --al-dur-instant: 0ms;
    --al-dur-fast: 0ms;
    --al-dur-base: 0ms;
    --al-dur-slow: 0ms;
    --al-dur-pagina: 0ms;
    --al-dur-wow: 0ms;
    --al-escalon: 0ms;
  }
}