/*
 * GY Canvas — tokens de diseño.
 *
 * Los valores de la identidad, y sólo eso. El diseño está en canvas.css y no
 * debería llevar ni un color ni una tipografía en crudo: si hace falta uno
 * nuevo, se añade aquí primero.
 *
 * De todo esto, el proyecto sólo cambia cuatro cosas desde el personalizador
 * —el color de marca, el de acento, las dos tipografías y el redondeo—, que se
 * inyectan encima de este fichero. El resto de la escala se calcula sola con
 * color-mix(), a propósito: pedirle siete colores a un cliente es la forma más
 * rápida de acabar con una web de siete colores que no pegan entre sí.
 *
 * Un tema hijo que quiera repintar la marca entera redefine estas variables en
 * su style.css y no toca ni una regla de diseño.
 */

:root {
	/* --- Los dos colores del proyecto ---------------------------------- */
	/* Los pisa el personalizador. Estos son un punto de partida presentable. */
	--gyc-marca:  #1d4ed8;
	--gyc-acento: #f59e0b;

	/* --- Tinta y papel -------------------------------------------------- */
	--gyc-tinta:       #14171f;
	--gyc-tinta-suave: #4d5460;
	--gyc-apoyo:       #7b828e;
	--gyc-linea:       #e3e5ea;
	--gyc-papel:       #ffffff;
	--gyc-papel-hondo: #f6f7f9;

	/* --- La escala derivada --------------------------------------------- */
	/*
	 * color-mix() en vez de valores fijos: así el hover y el fondo tenue siguen
	 * al color de marca cuando el proyecto lo cambia. Con valores fijos, cambiar
	 * la marca dejaba los estados con el color del proyecto anterior, que es un
	 * fallo que no se ve hasta que alguien pasa el ratón por encima.
	 */
	--gyc-marca-oscura: color-mix(in oklab, var(--gyc-marca) 82%, black);
	--gyc-marca-clara:  color-mix(in oklab, var(--gyc-marca) 12%, white);
	--gyc-marca-tenue:  color-mix(in oklab, var(--gyc-marca) 6%, white);
	--gyc-marca-linea:  color-mix(in oklab, var(--gyc-marca) 28%, white);
	--gyc-acento-oscuro: color-mix(in oklab, var(--gyc-acento) 84%, black);

	/*
	 * El color de marca puesto sobre papel, para texto.
	 *
	 * Por defecto es el de marca, así que en la mayoría de proyectos no cambia
	 * nada. Existe porque hay marcas cuyo color NO vale como texto: un naranja,
	 * un amarillo o un lima sobre blanco se quedan en 2 o 3 de contraste, y la
	 * norma pide 4,5 para texto normal. Con este token, esos proyectos oscurecen
	 * los enlaces sin tener que repetir veintidós reglas en el tema hijo.
	 */
	--gyc-enlace:       var(--gyc-marca);
	--gyc-enlace-hover: var(--gyc-marca-oscura);

	/*
	 * El texto que va ENCIMA del color de marca. Blanco por defecto, pero una
	 * marca clara necesita aquí la tinta oscura, no el blanco: es el mismo
	 * problema por el otro lado.
	 */
	--gyc-sobre-marca: #ffffff;

	/* Abierto y cerrado. Verde y rojo, pero apagados: son un dato, no una alarma. */
	--gyc-bien: #157347;
	--gyc-mal:  #b02a37;

	/* --- Tipografía ------------------------------------------------------ */
	--gyc-titulos: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--gyc-texto:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/*
	 * Los tamaños escalan con la pantalla en un solo paso, con clamp(), en vez de
	 * ir cambiando en cada punto de ruptura. Menos reglas y ningún salto brusco
	 * justo en el ancho de una tableta.
	 */
	--gyc-t-hero:    clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem);
	--gyc-t-seccion: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	--gyc-t-titulo:  clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
	--gyc-t-cuerpo:  1.0625rem;
	--gyc-t-menudo:  .875rem;
	--gyc-t-mini:    .78rem;

	--gyc-alto-titulo: 1.15;
	--gyc-alto-texto:  1.65;

	--gyc-tracking-titulo: -.02em;
	--gyc-tracking-rotulo: .1em;

	/* --- Medidas --------------------------------------------------------- */
	--gyc-ancho-maximo:    1200px;
	--gyc-columna-lectura: 68ch;
	--gyc-margen:          clamp(1rem, .5rem + 2.5vw, 2.5rem);

	--gyc-hueco-corto: .5rem;
	--gyc-hueco:       1rem;
	--gyc-hueco-largo: 2rem;
	--gyc-seccion:     clamp(2.75rem, 1.5rem + 5vw, 5.5rem);

	/* --- Detalles -------------------------------------------------------- */
	--gyc-radio:       10px;      /* lo pisa el personalizador */
	--gyc-radio-corto: calc(var(--gyc-radio) * .6);
	--gyc-sombra:      0 1px 2px rgb(20 23 31 / .05), 0 8px 24px -12px rgb(20 23 31 / .12);
	--gyc-sombra-alta: 0 2px 4px rgb(20 23 31 / .06), 0 16px 40px -16px rgb(20 23 31 / .2);
	--gyc-transicion:  .18s ease;

	/* La barra flotante del móvil, para que el pie no quede debajo. */
	--gyc-alto-flotante: 56px;
}

/*
 * Modo oscuro.
 *
 * Sólo se atiende si el proyecto lo pide: en una web de negocio local la
 * identidad suele estar hecha para fondo claro, y un modo oscuro automático
 * cambia el color de la marca sin que nadie lo haya decidido. Se activa
 * poniendo la clase `gyc-oscuro-auto` en el <html> desde un tema hijo.
 */
.gyc-oscuro-auto {
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	.gyc-oscuro-auto {
		--gyc-tinta:       #eef0f4;
		--gyc-tinta-suave: #b3b9c4;
		--gyc-apoyo:       #868d99;
		--gyc-linea:       #2a2f3a;
		--gyc-papel:       #14171f;
		--gyc-papel-hondo: #1b1f29;

		--gyc-marca-clara: color-mix(in oklab, var(--gyc-marca) 22%, #14171f);
		--gyc-marca-tenue: color-mix(in oklab, var(--gyc-marca) 12%, #14171f);
		--gyc-marca-linea: color-mix(in oklab, var(--gyc-marca) 40%, #14171f);
	}
}