/* Tokens de comicrebels.com — MEDIDOS de DISEÑO/logo.png (768x650), no estimados.
   El contraste que aparece en cada comentario es sobre --papel (#FFFFFF).
   La regla del rojo NO vive aquí: vive en tools/check-a11y.mjs, que falla. */
:root {
  --papel:       #FFFFFF;  /* blanco puro (decisión del operador) */
  --papel-sucio: #F4F1EC;  /* bandas alternas, para que el blanco respire */
  --tinta:       #000000;  /* el pincel del globo · 21.00:1 */
  --tinta-texto: #272F2F;  /* el carbón de REBELS · 13.69:1 · texto de lectura */
  --magenta:     #801F62;  /* el de COMIC · 9.17:1 · NO es el #822886 de storypresstor */
  --rojo:        #FF0800;  /* el pañuelo · 3.97:1 · SOLO gráfico y texto grande */
  --rojo-texto:  #B40900;  /* 7.05:1 · cuando el rojo tenga que llevar texto */
  --chispa:      #FFF684;  /* la mecha · 1.12:1 · decorativo, siempre bajo tinta */

  --medianil: 24px;

  --fuente-texto:  'Amiko', system-ui, sans-serif;
  --fuente-cartel: 'Anton', Impact, 'Arial Black', sans-serif;
  --fuente-rotulo: 'BD Cartoon Shout', var(--fuente-cartel);

  --paso-0: 1rem;
  --paso-1: 1.33rem;
  --paso-2: 1.78rem;
  --paso-3: 2.37rem;
  --paso-4: 3.16rem;
  --paso-5: 4.21rem;

  /* ---- Derivados (2026-09-08, dirección «superficies con luz») -------------
     Los ocho colores de arriba son medidos y no se tocan. Lo de abajo se
     deriva de ellos: la línea y las sombras salen de --tinta-texto, y la
     sombra del botón primario, de --magenta (128,31,98). Tres niveles de
     elevación y tres radios PORQUE SIGNIFICAN COSAS DISTINTAS: si todo
     llevara la misma sombra y el mismo radio, no habría jerarquía, sólo
     decoración repetida. */
  --linea:       rgba(39, 47, 47, 0.12);   /* 1px, nunca 3px de negro */
  --linea-fuerte:rgba(39, 47, 47, 0.22);   /* separadores que sí mandan */
  /* Texto secundario. En HEX a propósito, no rgba: así entra en el bucle de
     contraste de check-a11y. Con rgba(39,47,47,.62) daba 4.0:1 sobre blanco
     —por debajo de AA— y ningún verificador lo veía. */
  --tinta-suave: #5D6161;                  /* 6.27:1 sobre --papel */

  --sombra-0: 0 1px 2px rgba(39, 47, 47, 0.05);
  --sombra-1: 0 2px 8px rgba(39, 47, 47, 0.06), 0 1px 2px rgba(39, 47, 47, 0.04);
  --sombra-2: 0 18px 40px -12px rgba(39, 47, 47, 0.18), 0 4px 12px rgba(39, 47, 47, 0.06);
  --sombra-cta: 0 6px 20px -6px rgba(128, 31, 98, 0.45);

  --r-1: 4px;    /* controles */
  --r-2: 10px;   /* superficies */
  --r-3: 18px;   /* el gesto del hero */

  --ancho: 1180px;
  --medida: 68ch;          /* medida de lectura */
  --cabecera: 72px;
  /* La cabecera se pega arriba en DOS sitios: `.cabecera` en el boceto y
     `.elementor-location-header` en WordPress, porque allí el sticky sólo puede
     ejercerlo el envoltorio (elementor-puente.css). El valor vive aquí para que
     no haya dos copias que puedan separarse; el enlace de salto pasa por encima
     con z-index 20. */
  --z-cabecera: 10;
  --transicion: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --transicion: 0ms; }
}