/* Deletrazo — tokens · dirección Pulso · dark-first */
:root {
  --dz-noche-50: #F2F3FA;
  --dz-noche-100: #DDDFEC;
  --dz-noche-200: #B9BDD6;
  --dz-noche-300: #8F93B3;
  --dz-noche-400: #6A7095;
  --dz-noche-500: #4A5078;
  --dz-noche-600: #34395F;
  --dz-noche-700: #262B52;
  --dz-noche-800: #1F2240;
  --dz-noche-900: #14162B;
  --dz-noche-950: #0E1022;
  --dz-lima-50: #F7FCE3;
  --dz-lima-100: #EDF9C4;
  --dz-lima-200: #E0F494;
  --dz-lima-300: #C6EF3F;
  --dz-lima-400: #AFDB2B;
  --dz-lima-500: #9BC221;
  --dz-lima-600: #7C9E14;
  --dz-lima-700: #5F7A0E;
  --dz-lima-800: #465C0A;
  --dz-lima-900: #2F3F06;
  --dz-azul-50: #EEF1FF;
  --dz-azul-100: #DDE3FF;
  --dz-azul-200: #BCC8FF;
  --dz-azul-300: #8FA2FF;
  --dz-azul-400: #6B82F5;
  --dz-azul-500: #4A63E4;
  --dz-azul-600: #3A4EC2;
  --dz-azul-700: #2C3C9E;
  --dz-azul-800: #202C77;
  --dz-azul-900: #161E52;
  --dz-acierto-brillante: #58D68D;
  --dz-acierto-profundo: #1E7A43;
  --dz-acierto-cont-oscuro: #17342E;
  --dz-acierto-cont-claro: #DEF5E7;
  --dz-error-brillante: #FF8A7A;
  --dz-error-profundo: #B3372A;
  --dz-error-cont-oscuro: #3A222E;
  --dz-error-cont-claro: #FBE5E1;
  --dz-aviso-brillante: #FFC94D;
  --dz-aviso-profundo: #8A6210;
  --dz-aviso-cont-oscuro: #3A3122;
  --dz-aviso-cont-claro: #FBF0D7;
  --dz-mod-cimientos: #35407A;
  --dz-mod-cimientos-tinta: #35407A;
  --dz-mod-tilde: #2E7BD6;
  --dz-mod-tilde-tinta: #1F63B3;
  --dz-mod-vocales: #19B8A6;
  --dz-mod-vocales-tinta: #0E8073;
  --dz-mod-letras: #E0A02E;
  --dz-mod-letras-tinta: #9E6E14;
  --dz-mod-construccion: #F08CB4;
  --dz-mod-construccion-tinta: #C2517F;
  --dz-mod-lexico: #C3EAF4;
  --dz-mod-lexico-tinta: #4E93A8;
  --dz-fuente: Archivo, sans-serif;
  --dz-fuente-dislexia: 'Atkinson Hyperlegible', sans-serif;
  --dz-interlineado-dislexia: 1.7;
  --dz-tipo-display-xl: italic 900 46px/1.1 var(--dz-fuente);
  --dz-tipo-display-lg: italic 900 34px/1.15 var(--dz-fuente);
  --dz-tipo-titulo: 700 26px/1.2 var(--dz-fuente);
  --dz-tipo-subtitulo: 700 21px/1.3 var(--dz-fuente);
  --dz-tipo-cuerpo-lg: 500 18px/1.5 var(--dz-fuente);
  --dz-tipo-cuerpo: 400 16px/1.55 var(--dz-fuente);
  --dz-tipo-detalle: 500 14px/1.45 var(--dz-fuente);
  --dz-tipo-micro: 700 12px/1.4 var(--dz-fuente);
  --dz-esp-2: 2px;
  --dz-esp-4: 4px;
  --dz-esp-8: 8px;
  --dz-esp-12: 12px;
  --dz-esp-16: 16px;
  --dz-esp-24: 24px;
  --dz-esp-32: 32px;
  --dz-esp-48: 48px;
  --dz-esp-64: 64px;
  --dz-radio-sm: 8px;
  --dz-radio-md: 12px;
  --dz-radio-lg: 20px;
  --dz-radio-pill: 999px;
  --dz-sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --dz-sombra-2: 0 4px 12px rgba(0,0,0,.45);
  --dz-sombra-3: 0 12px 32px rgba(0,0,0,.55);
  --dz-dur-instante: 80ms;
  --dz-dur-rapida: 160ms;
  --dz-dur-normal: 240ms;
  --dz-dur-celebracion: 600ms;
  --dz-tactil-min: 44px;

  /* alias de tema — modo oscuro (nativo) */
  --dz-fondo: var(--dz-noche-900);
  --dz-fondo-hundido: var(--dz-noche-950);
  --dz-superficie: var(--dz-noche-800);
  --dz-borde: var(--dz-noche-600);
  --dz-texto: var(--dz-noche-50);
  --dz-texto-suave: var(--dz-noche-300);
  --dz-primario: var(--dz-lima-300);
  --dz-sobre-primario: var(--dz-noche-900);
  --dz-secundario: var(--dz-azul-300);
  --dz-sobre-secundario: var(--dz-noche-900);
  --dz-acierto: var(--dz-acierto-brillante);
  --dz-acierto-fondo: var(--dz-acierto-cont-oscuro);
  --dz-error: var(--dz-error-brillante);
  --dz-error-fondo: var(--dz-error-cont-oscuro);
  --dz-aviso: var(--dz-aviso-brillante);
  --dz-aviso-fondo: var(--dz-aviso-cont-oscuro);
  --dz-foco: 2px solid var(--dz-azul-300);
}

/* modo claro */
.tema-claro, [data-theme="claro"] {
  --dz-fondo: var(--dz-noche-50);
  --dz-fondo-hundido: #FFFFFF;
  --dz-superficie: #FFFFFF;
  --dz-borde: var(--dz-noche-100);
  --dz-texto: var(--dz-noche-900);
  --dz-texto-suave: var(--dz-noche-500);
  --dz-primario: var(--dz-lima-700);
  --dz-sobre-primario: #FFFFFF;
  --dz-secundario: var(--dz-azul-500);
  --dz-sobre-secundario: #FFFFFF;
  --dz-acierto: var(--dz-acierto-profundo);
  --dz-acierto-fondo: var(--dz-acierto-cont-claro);
  --dz-error: var(--dz-error-profundo);
  --dz-error-fondo: var(--dz-error-cont-claro);
  --dz-aviso: var(--dz-aviso-profundo);
  --dz-aviso-fondo: var(--dz-aviso-cont-claro);
  --dz-foco: 2px solid var(--dz-azul-500);
}

/* modo dislexia
   Redefine --dz-fuente en vez de font-family: los tokens tipográficos son
   shorthand (`400 16px/1.55 var(--dz-fuente)`), así que cada elemento que use
   `font: var(--dz-tipo-*)` vuelve a imponer su familia y pisa la herencia.
   Cambiando la variable, todos los tokens resuelven a la fuente de dislexia. */
.modo-dislexia {
  --dz-fuente: var(--dz-fuente-dislexia);
  font-family: var(--dz-fuente-dislexia);
  line-height: var(--dz-interlineado-dislexia);
  text-align: left; /* nunca justificado */
}

/* Por el mismo motivo, el interlineado va dentro del shorthand y hay que
   reponerlo aparte en los contenedores de texto. */
.modo-dislexia body,
.modo-dislexia p,
.modo-dislexia li,
.modo-dislexia h1,
.modo-dislexia h2,
.modo-dislexia h3 {
  line-height: var(--dz-interlineado-dislexia);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dz-dur-instante: 0ms; --dz-dur-rapida: 0ms;
          --dz-dur-normal: 0ms; --dz-dur-celebracion: 0ms; }
}