/* Las 3 Calero: el azulejo del obrador. Tokens del sistema (DESIGN.md). */

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Los colores del logo: el amarillo y el rojo de los azulejos */
	--op-amarillo: #f3c639;
	--op-amarillo-oscuro: #e0ad16;
	--op-amarillo-claro: #fdf0c8;
	--op-rojo-logo: #d6505a;
	--op-rojo: #a8343d;
	--op-rojo-oscuro: #7e232b;
	--op-fondo-oscuro: #2b1f1d;
	--op-ocre: #8a6411;
	--op-linea: #ecdcc2;
	--op-crema: #fbf4e6;
	--op-crema-clara: #fdfaf3;
	--op-blanco: #fff;
	--op-tinta: #221c1a;
	--op-tinta-suave: #5a4f4a;
	--op-apagado: #75685f;
	--op-error: #a83232;
	--op-error-fondo: #fbeaea;
	--op-estrella: #c4900f;

	/* Tipos: Montserrat en todo, como la web de siempre */
	--op-sans: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
	--op-serifa: var(--op-sans);
	--op-firma: var(--op-sans);
	--op-t-display: clamp(2rem, 1.4rem + 2.8vw, 3.375rem);
	--op-t-titular: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
	--op-t-pagina: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
	--op-t-producto: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	--op-t-subtitular: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	--op-t-titulo: 1.3125rem;
	--op-t-tarjeta: 1.0625rem;
	--op-t-subtitulo: 1.125rem;
	--op-t-entradilla: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--op-t-cuerpo: 1.0625rem;
	--op-t-pequeno: 0.9375rem;
	--op-t-etiqueta: 0.8125rem;
	--op-t-precio: 1.625rem;

	/* Espacio y medida */
	--op-ancho: 1280px;
	--op-ancho-texto: 44rem;
	--op-medianil: clamp(16px, 4vw, 48px);
	--op-seccion: clamp(56px, 8vw, 96px);
	--op-hueco: clamp(16px, 2vw, 24px);
	--op-radio: 10px;

	/* Profundidad */
	--op-sombra-tarjeta: 0 14px 36px rgba(60, 30, 20, 0.1);
	--op-sombra-panel: -12px 0 32px rgba(60, 30, 20, 0.16);
	--op-sombra-menu: 0 18px 40px rgba(40, 20, 14, 0.14);
	--op-filete: 1px solid var(--op-linea);

	/* Movimiento (salida exponencial; nada de aceleración al empezar) */
	--op-ease-salida: cubic-bezier(0.23, 1, 0.32, 1);
	--op-ease-mover: cubic-bezier(0.77, 0, 0.175, 1);
	--op-ease-cajon: cubic-bezier(0.32, 0.72, 0, 1);
	--op-d-pulsar: 140ms;
	--op-d-estado: 200ms;
	--op-d-menu: 220ms;
	--op-d-panel: 380ms;

	/* Foco: rojo sobre papel; en las bandas oscuras se cambia a amarillo */
	--op-foco: var(--op-rojo);
}