/**
 * JOVI — Design tokens
 * Única fuente de verdad del sistema visual. Nada de colores sueltos en otros archivos.
 *
 * Paleta aprobada 2026-08-11: negro/grafito, rojo #C00000, blanco y grises suaves.
 * Sin azules ni morados dominantes, sin neón, sin gradientes fuertes.
 */

:root {
	/*
	 * Valores tomados del sistema de diseño de la maqueta (src/styles.css), traducidos de
	 * oklch a hex. Se conservan los nombres `--jovi-*` propios y se mapean a los del
	 * prototipo (`--jovi`, `--graphite`, `--whats`) más abajo, para que ambos convivan.
	 */

	/* --- Marca --- */
	--jovi-red: #c00000;			/* --jovi · oklch(0.48 0.207 27.5) */
	--jovi-red-strong: #9c0000;		/* --jovi-strong · oklch(0.41 0.19 27.5) — pressed */
	--jovi-red-hover: #e01414;		/* acento luminoso aprobado en el brief */
	--jovi-red-deep: #8f0000;
	--jovi-red-tint: #fdf2f2;		/* fondo suavísimo para avisos */

	/* --- Grafito --- */
	--jovi-graphite: #111111;		/* --graphite · oklch(0.19 0 0) */
	--jovi-graphite-soft: #333333;	/* --graphite-soft · oklch(0.26 0 0) */
	--jovi-ink: #111111;			/* alias: el prototipo usa un solo negro */

	/* --- Neutros claros --- */
	--jovi-white: #ffffff;			/* --background: blanco puro, no crema */
	--jovi-paper: #ffffff;
	--jovi-surface: #f7f7f8;		/* --surface · oklch(0.975 0.002 264) */
	--jovi-border: #e6e6e9;			/* --border · oklch(0.915 0.003 264) */
	--jovi-muted: #6f6f78;			/* --muted-foreground · oklch(0.5 0.005 264) */
	--jovi-text: #303030;			/* --foreground · oklch(0.19 0 0) */

	/* --- Tipografía --- */
	--jovi-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	--jovi-font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;

	--jovi-text-xs: 0.8125rem;
	--jovi-text-sm: 0.9375rem;
	--jovi-text-base: 1rem;
	--jovi-text-lg: 1.125rem;
	--jovi-h3: clamp(1.2rem, 1rem + 1vw, 1.75rem);
	--jovi-h2: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
	--jovi-h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);

	/* --- Espaciado (escala de 4) --- */
	--jovi-space-1: 4px;
	--jovi-space-2: 8px;
	--jovi-space-3: 12px;
	--jovi-space-4: 16px;
	--jovi-space-5: 20px;
	--jovi-space-6: 24px;
	--jovi-space-8: 32px;
	--jovi-space-10: 40px;
	--jovi-space-12: 48px;
	--jovi-space-16: 64px;
	--jovi-space-24: 96px;

	/* --- Forma --- (--radius: 0.75rem en la maqueta) --- */
	--jovi-radius-sm: 8px;
	--jovi-radius: 12px;
	--jovi-radius-lg: 16px;
	--jovi-radius-xl: 20px;
	--jovi-radius-pill: 999px;

	/* --- Contenedor y ritmo vertical (container-jovi / section-pad) --- */
	--jovi-container: 80rem;		/* 1280px */
	--jovi-gutter: 1.25rem;		/* se abre a 2rem desde 768px, ver el @media de abajo */
	--jovi-section-pad: 3.5rem;

	/* --- Elevación: sutil, nunca dramática --- */
	--jovi-shadow-sm: 0 1px 2px rgba(13, 13, 13, 0.06);
	--jovi-shadow: 0 2px 4px rgba(13, 13, 13, 0.05), 0 8px 24px -12px rgba(13, 13, 13, 0.14);
	--jovi-shadow-lg: 0 4px 8px rgba(13, 13, 13, 0.06), 0 16px 40px -16px rgba(13, 13, 13, 0.2);

	/* --- Movimiento --- */
	--jovi-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--jovi-duration: 200ms;

	/* --- Canal WhatsApp ---
	   El sistema de la maqueta declara `--whats: oklch(0.63 0.16 150)` como token propio,
	   o sea que también mantiene el verde. Queda zanjado: verde, no rojo. */
	--jovi-whatsapp: #22b357;		/* --whats · oklch(0.63 0.16 150) */
	--jovi-whatsapp-hover: #1c9749;

	/* --- Sombras de la maqueta --- */
	--jovi-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
	--jovi-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.05), 0 18px 40px -18px rgba(0, 0, 0, 0.22);
	--jovi-shadow-jovi: 0 12px 32px -12px rgba(156, 0, 0, 0.45);
}

/*
 * El contenedor y el ritmo vertical se abren en escritorio, igual que `container-jovi` y
 * `section-pad` de la maqueta. Se hace sobre los tokens y no sección por sección: así una
 * sección nueva hereda el comportamiento correcto sin acordarse de nada.
 */
@media (min-width: 768px) {
	:root {
		--jovi-gutter: 2rem;
		--jovi-section-pad: 5.5rem;
	}
}

/*
 * Alias con los nombres del prototipo.
 * Permite trasladar CSS de la maqueta sin reescribir cada variable, y que ambos
 * vocabularios convivan mientras dure la traducción.
 */
:root {
	--jovi: var(--jovi-red);
	--jovi-strong: var(--jovi-red-strong);
	--graphite: var(--jovi-graphite);
	--graphite-soft: var(--jovi-graphite-soft);
	--graphite-foreground: #fbfbfb;
	--surface: var(--jovi-surface);
	--whats: var(--jovi-whatsapp);
}

/*
 * `jovi-rule`: el hilo rojo que corona los paneles.
 * En la maqueta se desvanece por AMBOS extremos, no por uno solo. Se corrige.
 */
.jovi-rule {
	background: linear-gradient(
		90deg,
		transparent,
		var(--jovi-red) 30%,
		var(--jovi-red) 70%,
		transparent
	);
}

/* Puente con la paleta del Customizer de Blocksy.
   Blocksy expone --theme-palette-color-1..8; las páginas ya construidas las usan.
   Al mapearlas aquí, el contenido viejo adopta la paleta nueva sin reeditar cada bloque. */
:root {
	--theme-palette-color-1: var(--jovi-red);
	--theme-palette-color-2: var(--jovi-red-hover);
	--theme-palette-color-3: var(--jovi-text);
	--theme-palette-color-4: var(--jovi-ink);
	--theme-palette-color-5: var(--jovi-border);
	--theme-palette-color-6: var(--jovi-paper);
	--theme-palette-color-7: var(--jovi-surface);
	--theme-palette-color-8: var(--jovi-white);
}