/* El Laurel: la tienda del pueblo, bien puesta. Tokens del sistema (DESIGN.md). */

@font-face {
	font-family: "Crimson Text";
	src: url("../fonts/crimson-text-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Crimson Text";
	src: url("../fonts/crimson-text-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Crimson Text";
	src: url("../fonts/crimson-text-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Papel y tinta (los colores del kit de la web anterior) */
	--op-granate: #6a1f2c;
	--op-granate-oscuro: #4e1620;
	--op-granate-profundo: #3a0f17;
	--op-rosa: #c8a8a0;
	--op-salvia: #b8c5b4;
	--op-dorado: #a38753;
	--op-dorado-claro: #e8ddd5;
	--op-dorado-oscuro: #7f6638;
	--op-crema: #f7f2ee;
	--op-crema-clara: #fbf7f3;
	--op-blanco: #fff;
	--op-tinta: #1f1a1b;
	--op-tinta-suave: #5a4a4a;
	--op-apagado: #7a6a68;
	--op-error: #a83232;
	--op-error-fondo: #fbeaea;
	--op-whatsapp: #25d366;

	/* Tipos */
	--op-serifa: "Crimson Text", Georgia, "Times New Roman", serif;
	--op-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--op-firma: var(--op-serifa);
	--op-t-display: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
	--op-t-titular: clamp(1.875rem, 1.4rem + 1.8vw, 2.625rem);
	--op-t-pagina: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);
	--op-t-producto: clamp(1.875rem, 1.45rem + 1.7vw, 2.75rem);
	--op-t-subtitular: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
	--op-t-titulo: 1.4375rem;
	--op-t-tarjeta: 1.25rem;
	--op-t-subtitulo: 1.25rem;
	--op-t-entradilla: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	--op-t-cuerpo: 1.125rem;
	--op-t-pequeno: 0.9375rem;
	--op-t-etiqueta: 0.8125rem;
	--op-t-precio: 1.75rem;

	/* 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);

	/* Profundidad */
	--op-sombra-tarjeta: 0 14px 36px rgba(70, 20, 29, 0.1);
	--op-sombra-panel: -12px 0 32px rgba(70, 20, 29, 0.16);
	--op-sombra-menu: 0 18px 40px rgba(46, 12, 18, 0.14);
	--op-filete: 1px solid var(--op-dorado-claro);

	/* 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: granate sobre papel; en las bandas oscuras se cambia a crema */
	--op-foco: var(--op-granate);
}