/*
 * ReserVan — Design Tokens
 * ---------------------------------------------------------------------------
 * Fuente autoritativa: ReserVan_Guia_Estilos_Web_v1.pdf (§3–6) +
 * Informe_Consolidado_Investigacion_ReserVan.pdf (§8).
 * Este archivo se encola ANTES de style.css (ver functions.php) para que los
 * overrides puntuales del tema hijo puedan consumir estas variables.
 *
 * Posicionamiento: premium FUNCIONAL ("lujo útil/sobrio") — espacio, calma,
 * control, discreción. NO lujo ostentoso, NO exceso de dorado, NO taxi/app.
 * El champán es ACENTO: úsese con moderación, nunca como relleno dominante.
 *
 * FUENTES (self-hosted / Google Fonts, sans-serif; SERIF PROHIBIDO):
 *   Familia: Plus Jakarta Sans (confirmada por el cliente, Plus_Jakarta_Sans.zip · OFL).
 *   Self-hosted vía @font-face (abajo). Fallback: Inter / Helvetica Neue / system.
 *   Subir los WOFF2 a bricks-child/fonts/ o registrar en Bricks > Custom Fonts.
 *
 * FOTOGRAFÍA (recordatorio, no CSS): todas las imágenes en WebP; las de
 * below-the-fold con loading="lazy" (el hero NO lleva lazy, usa
 * fetchpriority="high"). Sobre imágenes con texto blanco encima, aplicar la
 * utilidad .rv-overlay-gradient (gradiente azul de Prusia -> transparente,
 * de abajo hacia arriba) para garantizar el contraste del H1.
 * ---------------------------------------------------------------------------
 */

:root {
	/* ---- Paleta de marca (valores cliente, confirmados) ---- */
	--rv-prussian: #003153; /* Azul de Prusia — texto, headers, fondo secciones oscuras */
	--rv-champagne: #B89B72; /* Champaña Cepillado — acento, CTA primaria, iconos clave */
	--rv-ivory: #FAF8F5; /* Blanco Marfil — fondo del cuerpo (NO usar #FFF) */
	--rv-grey: #7A838A; /* Gris Neutro — texto secundario, labels, placeholders, bordes input */

	/* ---- Tokens derivados: superficies y texto ---- */
	--rv-surface: var(--rv-ivory); /* superficie clara por defecto */
	--rv-surface-dark: var(--rv-prussian); /* superficie oscura (secciones dark) */
	--rv-text-on-ivory: var(--rv-prussian); /* texto sobre fondo claro */
	--rv-text-on-dark: var(--rv-ivory); /* texto sobre fondo oscuro (marfil, no blanco puro) */
	--rv-text-muted: var(--rv-grey); /* texto secundario / apoyo */

	/* ---- Tokens derivados: bordes y foco ---- */
	--rv-border: var(--rv-grey); /* borde neutro (inputs, divisores) */
	--rv-border-subtle: rgba(122, 131, 138, 0.35); /* divisor tenue sobre marfil */
	--rv-focus: var(--rv-prussian); /* color de foco (borde), sin sombra externa dura */

	/* ---- Tokens derivados: acciones (CTA) ---- */
	--rv-cta-fill: var(--rv-champagne); /* CTA primaria: relleno champán */
	--rv-cta-hover: #A07E52; /* hover: champán más oscuro / cobrizo (NUNCA más claro) */
	--rv-cta-text: var(--rv-prussian); /* texto sobre CTA champán (buen contraste) */
	--rv-ghost-border: var(--rv-prussian); /* botón fantasma: outline azul 1px */
	--rv-ghost-text: var(--rv-prussian);
	--rv-wa: #25D366; /* verde WhatsApp — SOLO para el CTA de WhatsApp */
	--rv-wa-hover: #1EBE5A;
	--rv-wa-text: #FFFFFF;

	/* ---- Overlay de fotografía (azul de Prusia, para texto blanco encima) ---- */
	--rv-overlay-color: rgba(0, 49, 83, 0.72); /* base del gradiente inferior */
	--rv-overlay-gradient: linear-gradient(
		to top,
		rgba(0, 49, 83, 0.85) 0%,
		rgba(0, 49, 83, 0.45) 45%,
		rgba(0, 49, 83, 0) 100%
	);

	/* ---- Tipografía: familias ---- */
	--rv-font-sans: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--rv-font-base: var(--rv-font-sans);

	/* ---- Tipografía: pesos ---- */
	--rv-fw-regular: 400;
	--rv-fw-medium: 500;
	--rv-fw-semibold: 600;
	--rv-fw-bold: 700;

	/* ---- Tipografía: escala (clamp = fluido entre móvil y desktop) ----
	 * Guía: H1 40/32 (desktop/móvil), H2 32/26, H3 24/20, body 16, UI 15.
	 * clamp(mín_móvil, preferido_fluido, máx_desktop).
	 */
	--rv-fs-h1: clamp(2rem, 1.5rem + 2.2vw, 2.5rem); /* 32px -> 40px */
	--rv-fs-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2rem); /* 26px -> 32px */
	--rv-fs-h3: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem); /* 20px -> 24px */
	--rv-fs-body: 1rem; /* 16px */
	--rv-fs-ui: 0.9375rem; /* 15px — botones / UI */
	--rv-fs-small: 0.8125rem; /* 13px — legales, captions */

	/* ---- Tipografía: interlineado (line-height) ---- */
	--rv-lh-h1: 1.2;
	--rv-lh-h2: 1.3;
	--rv-lh-h3: 1.35;
	--rv-lh-body: 1.6;
	--rv-lh-ui: 1.2;

	/* ---- Tipografía: pesos por rol (mapeo directo a la guía) ---- */
	--rv-fw-h1: var(--rv-fw-bold); /* 700 (desktop); 600 en móvil, ver media query */
	--rv-fw-h2: var(--rv-fw-semibold); /* 600 */
	--rv-fw-h3: var(--rv-fw-medium); /* 500 */
	--rv-fw-body: var(--rv-fw-regular); /* 400 */
	--rv-fw-ui: var(--rv-fw-medium); /* 500 */

	/* ---- Escala de espaciado (base 4px) ---- */
	--rv-space-1: 0.25rem; /* 4px */
	--rv-space-2: 0.5rem; /* 8px */
	--rv-space-3: 0.75rem; /* 12px */
	--rv-space-4: 1rem; /* 16px */
	--rv-space-5: 1.5rem; /* 24px */
	--rv-space-6: 2rem; /* 32px */
	--rv-space-7: 3rem; /* 48px */
	--rv-space-8: 4rem; /* 64px */
	--rv-space-9: 6rem; /* 96px */

	/* ---- Radio, control mínimo, transición ---- */
	--rv-radius: 4px; /* radio de botones/inputs (guía §5) */
	--rv-radius-lg: 8px; /* radio de tarjetas/imágenes */
	--rv-control-min-h: 44px; /* altura mínima de inputs/botones táctiles (móvil) */
	--rv-transition: 160ms ease; /* transición sobria para hovers/foco */

	/* ---- Sombras (sobrias; sin sombra externa dura en inputs) ---- */
	--rv-shadow-card: 0 2px 12px rgba(0, 49, 83, 0.08);
}

/*
 * Peso del H1 en móvil: la guía pide 600 en móvil y 700 en desktop.
 * Se ajusta el token de rol para que las utilidades/clases globales que lo
 * consuman hereden el peso correcto según viewport.
 */
@media (max-width: 767px) {
	:root {
		--rv-fw-h1: var(--rv-fw-semibold); /* 600 en móvil */
	}
}

/*
 * Utilidad: gradiente de overlay para fotografía con texto blanco encima.
 * Uso: contenedor con la imagen de fondo -> hijo/pseudo con .rv-overlay-gradient
 * en position:absolute cubriendo el área. En Bricks: aplicar como clase global
 * a un "div overlay" sobre la imagen del hero.
 */
.rv-overlay-gradient {
	position: absolute;
	inset: 0;
	background: var(--rv-overlay-gradient);
	pointer-events: none;
}

/*
 * Utilidades tipográficas de referencia (opcional; en Bricks se replican como
 * clases globales del Style Manager — ver 17_design_system.md).
 */
.rv-h1 {
	font-family: var(--rv-font-base);
	font-size: var(--rv-fs-h1);
	font-weight: var(--rv-fw-h1);
	line-height: var(--rv-lh-h1);
	color: var(--rv-text-on-ivory);
}

.rv-h2 {
	font-family: var(--rv-font-base);
	font-size: var(--rv-fs-h2);
	font-weight: var(--rv-fw-h2);
	line-height: var(--rv-lh-h2);
	color: var(--rv-text-on-ivory);
}

.rv-h3 {
	font-family: var(--rv-font-base);
	font-size: var(--rv-fs-h3);
	font-weight: var(--rv-fw-h3);
	line-height: var(--rv-lh-h3);
	color: var(--rv-text-on-ivory);
}

.rv-body {
	font-family: var(--rv-font-base);
	font-size: var(--rv-fs-body);
	font-weight: var(--rv-fw-body);
	line-height: var(--rv-lh-body);
	color: var(--rv-text-on-ivory);
}