/* Ovipor: el año del cerdo ibérico. Tokens del sistema (DESIGN.md). Los nombres de los tokens son los del
   sistema de la casa; los valores, los de la marca Ovipor (verde #102C14, dorado #907A4B, crema #F7F3EC). */

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-display-lf.woff2") format("woff2");
	font-weight: 400 700;
	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: "Playfair Display";
	src: url("../fonts/playfair-display-italic-lf.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;
}

@font-face {
	font-family: "Lato";
	src: url("../fonts/lato-400.woff2") format("woff2");
	font-weight: 400;
	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: "Lato";
	src: url("../fonts/lato-700.woff2") format("woff2");
	font-weight: 700;
	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;
}

:root {
	/* Dehesa: el verde de la marca, el dorado de la bellota y la crema del papel de etiqueta */
	--ov-verde-imagotipo: #102c14;
	--ov-verde-principal: #1f4a27;
	--ov-verde-oscuro: #102c14;
	--ov-verde-muy-oscuro: #0a1d0d;
	--ov-verde-claro: #9cbf88;
	--ov-verde-patron: #24442a;
	--ov-dorado: #b89e6e;
	--ov-dorado-claro: #e6dcc6;
	--ov-dorado-oscuro: #77653e;
	--ov-dorado-marca: #907a4b;
	--ov-crema: #f7f3ec;
	--ov-crema-clara: #fbf9f4;
	--ov-blanco: #fff;
	--ov-tinta: #18241a;
	--ov-tinta-suave: #45493f;
	--ov-apagado: #66665c;
	--ov-tierra: #8b3a2a;
	--ov-error: #a3262a;
	--ov-error-fondo: #fbeaea;
	--ov-whatsapp: #25d366;
	--ov-estrella: #b5852a;

	/* Precintos de la Norma de Calidad del ibérico */
	--ov-precinto-negro: #1b1b1b;
	--ov-precinto-rojo: #b3262b;
	--ov-precinto-verde: #2f7d3a;

	/* Tipos */
	--ov-serifa: "Playfair Display", Georgia, "Times New Roman", serif;
	--ov-sans: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ov-firma: "Playfair Display", Georgia, serif;
	--ov-t-display: clamp(2.125rem, 1.35rem + 3.3vw, 3.75rem);
	--ov-t-titular: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
	--ov-t-pagina: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
	--ov-t-producto: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	--ov-t-subtitular: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	--ov-t-titulo: 1.375rem;
	--ov-t-tarjeta: 1.25rem;
	--ov-t-subtitulo: 1.1875rem;
	--ov-t-entradilla: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--ov-t-cuerpo: 1.0625rem;
	--ov-t-pequeno: 0.9375rem;
	--ov-t-etiqueta: 0.875rem;
	--ov-t-precio: 1.75rem;

	/* Espacio y medida */
	--ov-ancho: 1280px;
	--ov-ancho-texto: 44rem;
	--ov-medianil: clamp(16px, 4vw, 48px);
	--ov-seccion: clamp(56px, 8vw, 96px);
	--ov-hueco: clamp(16px, 2vw, 24px);

	/* Profundidad */
	--ov-sombra-tarjeta: 0 12px 32px rgba(16, 44, 20, 0.12);
	--ov-sombra-panel: -12px 0 32px rgba(16, 44, 20, 0.2);
	--ov-sombra-menu: 0 18px 40px rgba(10, 29, 13, 0.18);
	--ov-filete: 1px solid var(--ov-dorado-claro);

	/* Movimiento (salida exponencial; nada de aceleración al empezar) */
	--ov-ease-salida: cubic-bezier(0.23, 1, 0.32, 1);
	--ov-ease-mover: cubic-bezier(0.77, 0, 0.175, 1);
	--ov-ease-cajon: cubic-bezier(0.32, 0.72, 0, 1);
	--ov-d-pulsar: 140ms;
	--ov-d-estado: 200ms;
	--ov-d-menu: 220ms;
	--ov-d-panel: 380ms;

	/* Foco: dorado oscuro sobre papel; en las bandas oscuras, dorado claro */
	--ov-foco: var(--ov-dorado-oscuro);
}
