/*
 * tokens.css — Design tokens del Museo Virtual del Centenario Suseso.
 *
 * Fuente: paleta referencial de la sección 6.2 de PROMPT.md (Kit Digital del Gobierno de Chile).
 * Todo valor marcado con "VERIFICAR con Kit Digital" está pendiente de validación con la
 * Unidad de Comunicaciones de Suseso (ver TODO.md).
 *
 * Pares de contraste declarados para scripts/check-contrast.mjs. Formato de cada marcador:
 *   @contraste <primer plano> sobre <fondo> >= <razón mínima> : <uso>
 *
 * @contraste #0A132D sobre #FFFFFF >= 4.5 : texto principal sobre fondo base
 * @contraste #0A132D sobre #F2F4F7 >= 4.5 : texto principal sobre superficie
 * @contraste #006FB3 sobre #FFFFFF >= 4.5 : enlaces y botones primarios sobre fondo base
 * @contraste #006FB3 sobre #F2F4F7 >= 4.5 : enlaces sobre superficie
 * @contraste #FFFFFF sobre #006FB3 >= 4.5 : texto de botón primario
 * @contraste #5F6B7A sobre #FFFFFF >= 4.5 : texto secundario sobre fondo base
 * @contraste #5F6B7A sobre #F2F4F7 >= 4.5 : texto secundario sobre superficie
 * @contraste #B71C1C sobre #FFFFFF >= 4.5 : texto rojo de alerta sobre fondo base
 * @contraste #FFFFFF sobre #0A132D >= 4.5 : texto claro sobre cabecera o pie oscuro
 * @contraste #C9D3E3 sobre #0A132D >= 4.5 : texto secundario sobre pie oscuro
 * @contraste #FE6565 sobre #0A132D >= 3 : franja decorativa sobre pie oscuro
 * @contraste #006FB3 sobre #FFFFFF >= 3 : hilo del siglo y bordes de componentes
 * @contraste #6B7787 sobre #FFFFFF >= 3 : bordes de tarjetas y campos sobre fondo base
 * @contraste #6B7787 sobre #F2F4F7 >= 3 : bordes de tarjetas sobre superficie
 * @contraste #006FB3 sobre #F2F4F7 >= 3 : indicador de foco sobre superficie
 * @contraste #FFFFFF sobre #0A132D >= 3 : indicador de foco sobre fondo oscuro
 * @contraste #0A132D sobre #E3EEF7 >= 4.5 : texto de insignia de categoría
 * @contraste #7A1212 sobre #FCE8E8 >= 4.5 : texto de insignia "Contenido de muestra"
 */

:root {
  /* ---- Paleta institucional ---------------------------------------------------- */
  --sus-azul: #006FB3;          /* VERIFICAR con Kit Digital */
  --sus-azul-noche: #0A132D;    /* VERIFICAR con Kit Digital */
  --sus-rojo-marca: #FE6565;    /* VERIFICAR con Kit Digital. Solo decorativo */
  --sus-rojo-texto: #B71C1C;    /* VERIFICAR con Kit Digital */
  --sus-gris-texto: #5F6B7A;    /* VERIFICAR con Kit Digital */
  --sus-superficie: #F2F4F7;    /* VERIFICAR con Kit Digital */
  --sus-blanco: #FFFFFF;

  /* Derivados propios (no son del Kit; verificados con check-contrast.mjs) */
  --sus-borde: #6B7787;          /* 4,55:1 sobre blanco; bordes de componentes */
  --sus-azul-oscuro: #005A91;    /* estado hover/activo del azul */
  --sus-texto-sobre-oscuro: #C9D3E3;
  --sus-insignia-fondo: #E3EEF7;
  --sus-muestra-fondo: #FCE8E8;
  --sus-muestra-texto: #7A1212;

  /* ---- Roles ---------------------------------------------------------------------- */
  --fondo: var(--sus-blanco);
  --superficie: var(--sus-superficie);
  --tinta: var(--sus-azul-noche);
  --tinta-suave: var(--sus-gris-texto);
  --acento: var(--sus-azul);
  --acento-hover: var(--sus-azul-oscuro);
  --linea: var(--sus-azul);       /* el hilo del siglo */
  --borde: var(--sus-borde);
  --campo-oscuro: var(--sus-azul-noche);

  /* ---- Tipografía (sección 6.3) ---------------------------------------------------- */
  /* gobCL no está en insumos/fuentes: los títulos usan Roboto hasta recibirla (TODO.md). */
  --fuente-titulos: "gobCL", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fuente-texto: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Escala de razón 1,25 sobre 1 rem. Solo cinco pasos hacen el trabajo visible. */
  --paso-pequeno: 0.875rem;      /* 14 px: fechas, créditos, insignias */
  --paso-texto: 1rem;            /* 16 px: texto corrido */
  --paso-destacado: 1.25rem;     /* 20 px: entradillas, títulos de tarjeta */
  --paso-titulo: clamp(1.953rem, 1.4rem + 2.2vw, 3.052rem); /* 31–49 px: títulos de sección y h1 */
  --paso-monumento: clamp(4.768rem, 17vw, 17rem);           /* los años del siglo */

  --interlineado-texto: 1.5;
  --interlineado-titulo: 1.2;
  --interlineado-monumento: 0.86;
  --medida: 70ch;

  /* ---- Espacio ------------------------------------------------------------------- */
  --margen: clamp(1rem, 0.6rem + 1.8vw, 2rem);   /* margen exterior único de la página */
  --separacion-seccion: clamp(4.5rem, 3rem + 7vw, 10rem);
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;

  /* ---- Forma --------------------------------------------------------------------- */
  --radio-tarjeta: 0;            /* tarjetas y figuras: esquinas rectas, como fichas de archivo */
  --radio-boton: 999px;          /* botones: completamente redondos */
  --borde-ancho: 1px;
  --grosor-hilo: 3px;
  --objetivo-tactil: 2.75rem;    /* 44 px */

  /* ---- Separación (hover y foco, sección 10.9). Sin sombras en reposo. --------------- */
  --sombra-separacion: 0 0.75rem 1.75rem rgba(10, 19, 45, 0.18);
  --desplazamiento-separacion: 8px;

  /* ---- Foco (sección 6.2) ----------------------------------------------------------- */
  --foco-color: var(--sus-azul);
  --foco-halo: var(--sus-blanco);
  --foco-ancho: 3px;
  --foco-desfase: 2px;

  /* ---- Movimiento (sección 7) ------------------------------------------------------- */
  --duracion: 250ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-distancia: 12px;
  --reveal-retardo: 60ms;

  /* ---- Altura de la cabecera (la actualiza cabecera.js con ResizeObserver) ----------- */
  --cabecera-alto: 5rem;
  --zoom: 1;
}

/* Preferencia de contraste alto (sección 12) */
@media (prefers-contrast: more) {
  :root {
    --tinta-suave: var(--sus-azul-noche);
    --borde: var(--sus-azul-noche);
    --borde-ancho: 2px;
    --sombra-separacion: none;
  }
}