/* ===========================================================================
 * tokens.css — Corporación de Fomento Productivo de Tocopilla
 * GRUPO INAN SpA
 *
 * ÚNICA fuente de colores, escalas, espaciados y duraciones del sitio.
 * Ningún otro archivo define un color. Si necesitas uno que no está aquí,
 * el lugar donde agregarlo es este, no el archivo donde te hizo falta.
 *
 * Fuente de la paleta: Manual básico de Logotipo, Municipalidad de Tocopilla.
 * La Corporación pertenece a la Municipalidad y adopta ese manual.
 *
 * ---------------------------------------------------------------------------
 * CÓMO LEER LOS RATIOS DE CONTRASTE
 *
 * Cada color lleva anotado su contraste y para qué sirve. Los números están
 * calculados con la fórmula de luminancia relativa de WCAG 2.1, no estimados.
 * Si cambias un color, RECALCULA; no ajustes el número a ojo.
 *
 * Umbrales de WCAG 2.1 nivel AA, que es el piso del proyecto:
 *
 *   4.5:1   texto normal
 *   3.0:1   texto grande (≥24px, o ≥18.66px en negrita) y componentes de UI
 *
 * REGLA DURA: ningún texto en amarillo, naranjo, naranjo claro o turquesa
 * sobre fondo claro. Si alguien pide "más naranjo", la respuesta es más
 * SUPERFICIE naranja con texto oscuro encima. Nunca texto naranjo.
 *
 * Toda superficie de color tiene su token --sobre-* con el color de texto
 * verificado. Úsalos en pareja; no improvises combinaciones.
 * ========================================================================= */

:root {

	/* =======================================================================
	 * 1. PALETA INSTITUCIONAL
	 *
	 * Los HEX son los valores canónicos. El manual tiene dos erratas en los
	 * RGB de 150 C y 485 C que se ignoran deliberadamente.
	 * ===================================================================== */

	/* Pantone 293 C · 9.47:1 sobre blanco · 8.81:1 sobre hueso.
	 * TEXTO DE CUALQUIER TAMAÑO. Color principal del sitio y el único
	 * autorizado para enlaces y énfasis. */
	--azul-institucional: #003DA6;

	/* Pantone 485 C · 4.69:1 sobre blanco · 4.36:1 sobre hueso.
	 * TEXTO NORMAL, PERO RESERVADO. Solo estados de error y alertas.
	 * No lo uses para enlaces ni énfasis general: en una interfaz el rojo
	 * lee como error, y gastarlo en decoración deja al sitio sin señal de
	 * error legible.
	 * OJO: sobre --hueso baja a 4.36:1 y FALLA AA. Solo sobre blanco puro. */
	--rojo: #E1251B;

	/* Pantone Process Blue C · 4.16:1 sobre blanco · 3.87:1 sobre hueso.
	 * SOLO TÍTULOS GRANDES (≥24px, o ≥19px en negrita).
	 * No llega a 4.5:1, así que no sirve para texto de cuerpo. */
	--azul-medio: #0082CA;

	/* Pantone 326 C · 2.72:1 sobre blanco.
	 * DECORATIVO. Fondos, iconografía, superficies. NUNCA texto. */
	--turquesa: #00AFAA;

	/* Pantone 1505 C · 2.86:1 sobre blanco.
	 * DECORATIVO Y SUPERFICIE DE BOTÓN. NUNCA texto.
	 * Nota histórica: el manual de proyecto autorizaba antes "botón naranjo
	 * con texto blanco". Eso da 2.86:1 y falla AA incluso para texto grande.
	 * Sobre naranjo va --sobre-naranjo (tinta), 5.41:1. */
	--naranjo: #FF6B00;

	/* Pantone 150 C · 1.79:1 sobre blanco.
	 * DECORATIVO. NUNCA texto. */
	--naranjo-claro: #FFB259;

	/* Pantone 116 C · 1.50:1 sobre blanco.
	 * DECORATIVO Y ACENTOS. NUNCA texto. */
	--amarillo: #FFCD00;


	/* =======================================================================
	 * 2. NEUTROS
	 *
	 * No están en el manual de marca. Se documentan como extensión de
	 * interfaz, derivados del azul institucional para que el gris del sitio
	 * no sea un gris cualquiera.
	 * ===================================================================== */

	/* 15.44:1 sobre blanco · 14.36:1 sobre hueso.
	 * Texto de cuerpo. Derivado oscuro del azul institucional. */
	--tinta: #11253F;

	/* 5.48:1 sobre blanco · 5.09:1 sobre hueso.
	 * Texto secundario: fechas, metadatos, pies de foto.
	 * Pasa AA para texto normal, pero no lo uses para párrafos largos. */
	--gris: #5A6B7D;

	/* 1.29:1 sobre blanco. SOLO BORDES Y SEPARADORES. Nunca texto.
	 * Los bordes decorativos no tienen requisito de contraste; los bordes
	 * que comunican estado (foco, error) sí, y usan otros tokens. */
	--linea: #DCE3EB;

	/* Fondo alterno para franjas y tarjetas. */
	--hueso: #F4F7FA;

	--blanco: #FFFFFF;

	/* Extensión: azul más oscuro para hover de enlaces. 13.11:1 sobre blanco.
	 * No está en el manual; se deriva para tener un estado hover que aumente
	 * el contraste en vez de reducirlo. */
	--azul-oscuro: #002B75;


	/* =======================================================================
	 * 3. PARES SUPERFICIE / TEXTO
	 *
	 * Cuando pintes un fondo de color, el texto encima sale de aquí. Estos
	 * son los únicos pares verificados; cualquier otra combinación hay que
	 * calcularla antes de usarla.
	 *
	 * Blanco NO se usa sobre superficie cálida. La única excepción es --rojo,
	 * documentada abajo.
	 * ===================================================================== */

	--sobre-azul-institucional: var(--blanco);   /*  9.47:1  ✓ AA texto normal */
	--sobre-azul-oscuro:        var(--blanco);   /* 13.11:1  ✓ AA texto normal */
	--sobre-naranjo:            var(--tinta);    /*  5.41:1  ✓ AA texto normal */
	--sobre-naranjo-claro:      var(--tinta);    /*  8.65:1  ✓ AA texto normal */
	--sobre-turquesa:           var(--tinta);    /*  5.67:1  ✓ AA texto normal */
	--sobre-amarillo:           var(--tinta);    /* 10.28:1  ✓ AA texto normal */
	--sobre-hueso:              var(--tinta);    /* 14.36:1  ✓ AA texto normal */
	--sobre-blanco:             var(--tinta);    /* 15.44:1  ✓ AA texto normal */

	/* EXCEPCIÓN DOCUMENTADA. Blanco sobre rojo da 4.69:1 y pasa AA; --tinta
	 * sobre rojo daría 3.29:1 y falla. Es la única superficie cálida donde
	 * el blanco es la opción correcta, precisamente porque es la única que
	 * cumple. */
	--sobre-rojo:               var(--blanco);   /*  4.69:1  ✓ AA texto normal */

	/* SOLO TEXTO GRANDE. Ninguna combinación sobre azul medio llega a 4.5:1:
	 * blanco da 4.16:1 y tinta 3.71:1. Se elige blanco por ser el mayor de
	 * los dos, y esta superficie no lleva texto de cuerpo. */
	--sobre-azul-medio:         var(--blanco);   /*  4.16:1  ✗ AA normal · ✓ AA grande */


	/* =======================================================================
	 * 4. ROLES SEMÁNTICOS
	 *
	 * Usa estos en el CSS del sitio, no los colores crudos. Así, el día que
	 * cambie una decisión de marca, se cambia aquí y no en 40 archivos.
	 * ===================================================================== */

	--color-texto:          var(--tinta);
	--color-texto-suave:    var(--gris);
	--color-texto-inverso:  var(--blanco);

	--color-fondo:          var(--blanco);
	--color-fondo-alt:      var(--hueso);
	--color-borde:          var(--linea);

	--color-enlace:         var(--azul-institucional);
	--color-enlace-hover:   var(--azul-oscuro);

	--color-error:          var(--rojo);
	--color-error-texto:    var(--rojo);          /* solo sobre blanco puro */

	/* El manual de marca NO tiene color de éxito ni de advertencia. En lugar
	 * de inventar un verde que no pertenece a la identidad, se reutiliza la
	 * paleta existente como SUPERFICIE, con su par de texto verificado.
	 * Si la Corporación define colores de estado, entran aquí. */
	--color-exito-superficie:       var(--turquesa);
	--color-exito-texto:            var(--sobre-turquesa);
	--color-advertencia-superficie: var(--amarillo);
	--color-advertencia-texto:      var(--sobre-amarillo);

	/* Foco visible. Requisito de WCAG 2.1 AA y de CLAUDE.md §8: el foco es
	 * visible SIEMPRE. Si en algún lugar hay outline:none, tiene que haber
	 * un reemplazo con al menos 3:1 contra el fondo adyacente. */
	--foco-color:   var(--azul-institucional);
	--foco-grosor:  3px;
	--foco-desfase: 2px;


	/* =======================================================================
	 * 5. TIPOGRAFÍA
	 *
	 * Argentum Sans para todo el sitio, display y cuerpo. Licencia SIL OFL
	 * 1.1, uso comercial permitido. Autohospedada en assets/fuentes/; las
	 * declaraciones @font-face viven en fuentes.css.
	 *
	 * Codec Warm, que el manual también lista, NO se usa: la versión
	 * disponible es Trial y su licencia excluye el uso como webfont.
	 * ===================================================================== */

	--fuente-base: "Argentum Sans", system-ui, -apple-system, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--fuente-display: var(--fuente-base);

	/* Pesos hospedados. Solo estos cuatro: el 500 no aportaba y cada peso
	 * extra es un archivo más que descargar. */
	--peso-normal:  400;
	--peso-semi:    600;
	--peso-negrita: 700;
	--peso-display: 800;

	/* -----------------------------------------------------------------------
	 * Escala fluida.
	 *
	 * Interpola entre 375px y 1440px de ancho de viewport. La estructura de
	 * cada clamp() es: clamp(mínimo, intercepto + pendiente*vw, máximo).
	 *
	 * El término en rem del valor preferido NO es decorativo: un font-size
	 * definido solo en vw no responde al zoom del navegador y rompería el
	 * criterio 1.4.4 de WCAG (redimensionar al 200%). Si tocas estos
	 * valores, conserva siempre el componente en rem.
	 *
	 * El cuerpo nunca baja de 16px (CLAUDE.md §3.2).
	 * --------------------------------------------------------------------- */

	--texto-xs:   0.8125rem;                                          /* 13px fijo · etiquetas y notas legales. NO para cuerpo. */
	--texto-sm:   clamp(0.875rem, 0.853rem + 0.094vw, 0.9375rem);     /* 14 → 15px · metadatos, fechas */
	--texto-base: clamp(1rem,     0.956rem + 0.188vw, 1.125rem);      /* 16 → 18px · CUERPO */
	--texto-md:   clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);       /* 18 → 20px · entradilla */
	--texto-lg:   clamp(1.25rem,  1.162rem + 0.376vw, 1.5rem);        /* 20 → 24px · h4 */
	--texto-xl:   clamp(1.5rem,   1.368rem + 0.563vw, 1.875rem);      /* 24 → 30px · h3 */
	--texto-2xl:  clamp(1.75rem,  1.530rem + 0.939vw, 2.375rem);      /* 28 → 38px · h2 */
	--texto-3xl:  clamp(2.125rem, 1.773rem + 1.502vw, 3.125rem);      /* 34 → 50px · h1 */
	--texto-4xl:  clamp(2.5rem,   1.972rem + 2.254vw, 4rem);          /* 40 → 64px · display de portada */

	/* Umbral de "texto grande" de WCAG, para saber cuándo --azul-medio es
	 * legítimo: 24px normal o 18.66px en negrita. En la escala de arriba eso
	 * es --texto-lg y superiores. */

	/* Interlineado. WCAG 1.4.12 pide que el cuerpo soporte 1.5 como mínimo;
	 * 1.6 da margen y se lee mejor en párrafos largos. */
	--interlineado-display:  1.1;
	--interlineado-titulo:   1.2;
	--interlineado-base:     1.6;
	--interlineado-suelto:   1.75;

	/* Argentum Sans es geométrica: a tamaños grandes gana cerrando un poco
	 * el tracking, y a tamaños pequeños en mayúsculas necesita abrirlo. */
	--letra-display:   -0.02em;
	--letra-titulo:    -0.01em;
	--letra-base:      0;
	--letra-mayuscula: 0.06em;

	/* Medida de lectura. Entre 60 y 75 caracteres por línea es el rango
	 * cómodo; por encima, el ojo pierde el renglón al volver. */
	--medida-texto: 68ch;


	/* =======================================================================
	 * 6. ESPACIADO
	 *
	 * Escala de base 4px. Usa los tokens, no valores sueltos: es lo que
	 * mantiene el ritmo vertical coherente entre secciones construidas por
	 * personas distintas en momentos distintos.
	 * ===================================================================== */

	--esp-3xs: 0.25rem;   /*  4px */
	--esp-2xs: 0.5rem;    /*  8px */
	--esp-xs:  0.75rem;   /* 12px */
	--esp-sm:  1rem;      /* 16px */
	--esp-md:  1.5rem;    /* 24px */
	--esp-lg:  2rem;      /* 32px */
	--esp-xl:  3rem;      /* 48px */
	--esp-2xl: 4rem;      /* 64px */
	--esp-3xl: 6rem;      /* 96px */
	--esp-4xl: 8rem;      /* 128px */

	/* Separación vertical entre secciones de página. Fluida, para que el
	 * móvil no quede con 96px de aire entre bloques. */
	--esp-seccion: clamp(3rem, 2.297rem + 3vw, 6rem);   /* 48 → 96px */

	/* Márgenes laterales del contenido en pantallas pequeñas. */
	--esp-borde-pantalla: clamp(1rem, 0.648rem + 1.5vw, 2rem);   /* 16 → 32px */


	/* =======================================================================
	 * 7. DISPOSICIÓN
	 * ===================================================================== */

	--ancho-contenedor: 75rem;   /* 1200px · retícula general */
	--ancho-estrecho:   45rem;   /*  720px · artículos y texto corrido */
	--ancho-ancho:      90rem;   /* 1440px · franjas de ancho completo */

	/* Radios contenidos a propósito. Es un organismo público: el diseño
	 * responde a esa seriedad (CLAUDE.md §4). Nada de esquinas de app. */
	--radio-sm:       2px;
	--radio-md:       4px;
	--radio-lg:       8px;
	--radio-completo: 999px;   /* solo píldoras y avatares */

	/* Sombras derivadas de --tinta, no de negro puro: una sombra negra sobre
	 * una paleta azul se ve sucia. */
	--sombra-sm: 0 1px 2px rgba(17, 37, 63, 0.06);
	--sombra-md: 0 4px 12px rgba(17, 37, 63, 0.08);
	--sombra-lg: 0 12px 32px rgba(17, 37, 63, 0.12);

	--z-base:      1;
	--z-elevado:   10;
	--z-cabecera:  100;
	--z-desplegable: 200;
	--z-modal:     1000;
	--z-aviso:     1100;


	/* =======================================================================
	 * 8. MOVIMIENTO
	 *
	 * CLAUDE.md §4: institucional no significa inerte, pero tampoco festival.
	 * Revelados suaves al entrar en viewport, desplazamientos cortos,
	 * duraciones 200–400ms, easing natural.
	 *
	 * Nada de parallax agresivo, contadores que giran, texto letra por letra
	 * ni carruseles automáticos. Si una animación llama más la atención que
	 * el contenido que anima, sobra.
	 *
	 * Anima solo transform y opacity. Animar width, height, top o margin
	 * fuerza recálculo de layout y castiga el INP, que es criterio de
	 * aceptación del proyecto (<200ms).
	 * ===================================================================== */

	--dur-rapida: 150ms;   /* microinteracciones: hover, foco */
	--dur-base:   250ms;   /* revelados, transiciones de estado */
	--dur-lenta:  400ms;   /* techo. Nada dura más que esto. */

	--suavizado-salida:   cubic-bezier(0.22, 1, 0.36, 1);
	--suavizado-estandar: cubic-bezier(0.4, 0, 0.2, 1);
	--suavizado-entrada:  cubic-bezier(0.55, 0, 1, 0.45);

	/* Desplazamiento máximo de un revelado al entrar en viewport.
	 * CLAUDE.md §4 lo fija en 16px; este token es ese techo, no una
	 * sugerencia. */
	--desplazamiento-revelado: 16px;
}


/* ===========================================================================
 * MOVIMIENTO REDUCIDO
 *
 * prefers-reduced-motion se respeta siempre y no es opcional (CLAUDE.md §4
 * y §8). Anular las duraciones aquí hace que todo lo que use los tokens
 * quede cubierto automáticamente.
 *
 * Esto NO sustituye la regla global de principal.css: los tokens solo
 * alcanzan a quien los usa, y hace falta una red que atrape también las
 * animaciones de Elementor y de cualquier plugin.
 *
 * Regla de diseño que hace esto seguro: el estado final de toda animación de
 * entrada tiene que ser el estado por defecto, y la animación solo lo
 * interpola. Si un elemento empieza con opacity:0 y solo se hace visible por
 * la animación, al desactivar el movimiento el contenido desaparece.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-rapida: 0.01ms;
		--dur-base:   0.01ms;
		--dur-lenta:  0.01ms;
		--desplazamiento-revelado: 0px;
	}
}


/* ===========================================================================
 * NOTAS PARA QUIEN EDITE ESTO EN DOS AÑOS
 *
 * 1. Si cambias un color, recalcula su contraste y actualiza el comentario.
 *    Un ratio anotado que ya no es verdad es peor que ninguno: alguien va a
 *    confiar en él.
 *
 * 2. Si agregas una superficie de color, agrega su --sobre-* en el mismo
 *    commit. Una superficie sin par de texto verificado es una violación de
 *    accesibilidad esperando a ocurrir.
 *
 * 3. Este archivo no tiene tema oscuro. No se pidió y un organismo público
 *    con dos temas es el doble de superficie que auditar. Si algún día se
 *    agrega, va como bloque [data-tema="oscuro"] redefiniendo SOLO los
 *    roles semánticos de la sección 4, nunca la paleta de la sección 1.
 *
 * 4. Si la Corporación adquiere la licencia webfont de Codec Warm, se
 *    sustituye cambiando únicamente --fuente-display y las declaraciones
 *    @font-face. Nada más debería tener que tocarse.
 *
 * 5. Herramienta para verificar un ratio: cualquier calculadora de contraste
 *    WCAG. La fórmula es luminancia relativa, no diferencia de brillo
 *    percibido; los dos números no coinciden y solo el primero es el que
 *    exige la norma.
 * ========================================================================= */