/* ==========================================================================
   PI Theme — Design tokens
   Paleta extraída por muestreo de píxeles de logo/Pi formatos-03.webp.
   Ver ANALISIS-DISENO.md § 2 para el detalle de la extracción.
   ========================================================================== */

:root {
	/* --- Marca: colores EXTRAÍDOS del logo ------------------------------- */
	--pi-primary: #33327d;        /* índigo del isotipo π y del lettering */
	--pi-secondary: #6b8290;      /* azul acero del anillo y del claim */

	/* --- Marca: colores DERIVADOS (no están en el logo) ------------------ */
	--pi-primary-900: #1e1d4d;
	--pi-primary-700: #2a2968;
	--pi-primary-500: #33327d;
	--pi-primary-300: #6462b0;
	--pi-primary-100: #e6e6f2;
	--pi-primary-050: #f4f4fa;

	--pi-secondary-700: #4d6470;
	--pi-secondary-300: #a3b4bd;
	--pi-secondary-100: #e7edf0;

	--pi-accent: #4f4dc7;         /* índigo eléctrico: hover, foco, reglas */

	/* --- Neutros --------------------------------------------------------- */
	--pi-white: #ffffff;
	--pi-ink: #0d1017;            /* títulos y fondo oscuro del footer */
	--pi-ink-2: #171b26;
	--pi-text: #4a4f5c;           /* cuerpo de texto */
	--pi-muted: #7b8290;          /* metadatos, captions */
	--pi-border: #e2e5ea;
	--pi-surface: #f5f6f9;        /* fondos de sección alternos */

	/* --- Estados de acreditación ------------------------------------------
	   Los usa el panel del plugin pi-entradas. Viven acá y no en el plugin
	   porque son colores de la marca: si PI cambia el verde, cambia en un
	   solo lugar. El plugin los consume con fallback, por si el theme no está.
	   --------------------------------------------------------------------- */
	--pi-ok: #1f7a4d;             /* ingresó */
	--pi-pendiente: #b06f0a;      /* falta ingresar */
	--pi-off: #7b8290;            /* pedido sin pagar */

	/* Texto sobre fondo oscuro */
	--pi-on-dark: #f2f4f7;
	--pi-on-dark-muted: #a9b1bd;
	--pi-on-dark-border: rgba(255, 255, 255, 0.14);

	/* --- Tipografía ------------------------------------------------------ */
	--pi-font-display: "Ofelia Text", "Segoe UI", system-ui, sans-serif;
	--pi-font-body: "Myriad Pro", "Segoe UI", system-ui, sans-serif;

	/* Escala fluida. Los extremos replican la escala del kit Clean Energy
	   (mobile 36/31/26/22/19/17/15 → desktop 57/47/35/28/23/19/16). */
	--pi-h1: clamp(2.25rem, 1.30rem + 4.10vw, 3.5625rem);
	--pi-h2: clamp(1.9375rem, 1.29rem + 2.80vw, 2.9375rem);
	--pi-h3: clamp(1.625rem, 1.34rem + 1.22vw, 2.1875rem);
	--pi-h4: clamp(1.375rem, 1.25rem + 0.53vw, 1.75rem);
	--pi-h5: clamp(1.1875rem, 1.11rem + 0.33vw, 1.4375rem);
	--pi-h6: clamp(1.0625rem, 1.04rem + 0.11vw, 1.1875rem);
	--pi-body: clamp(0.9375rem, 0.92rem + 0.07vw, 1rem);
	--pi-lead: clamp(1.0625rem, 1.00rem + 0.28vw, 1.25rem);
	--pi-small: 0.875rem;
	--pi-eyebrow: 0.8125rem;

	--pi-lh-display: 1.11;
	--pi-lh-body: 1.625;

	/* --- Layout ---------------------------------------------------------- */
	--pi-page-width: 1290px;      /* --theme-var-page_width del kit */
	--pi-narrow-width: 820px;
	--pi-gutter: 24px;            /* padding lateral en mobile */
	--pi-gutter-lg: 60px;         /* --theme-var-page_fullwide_extra del kit */
	--pi-grid-gap: 30px;          /* --theme-var-grid_gap del kit */

	/* Ritmo vertical de sección */
	--pi-section-y: clamp(64px, 4vw + 40px, 120px);
	--pi-section-y-sm: clamp(48px, 3vw + 30px, 88px);

	/* --- Formas ---------------------------------------------------------- */
	--pi-radius: 0px;             /* el kit usa esquinas rectas en cards */
	--pi-radius-pill: 999px;      /* botones y badges */
	--pi-border-w: 1px;

	/* --- Sombras y transiciones ------------------------------------------ */
	--pi-shadow-sm: 0 1px 2px rgba(13, 16, 23, 0.06);
	--pi-shadow-md: 0 8px 24px -12px rgba(13, 16, 23, 0.18);
	--pi-shadow-lg: 0 24px 60px -24px rgba(13, 16, 23, 0.28);
	--pi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--pi-dur: 0.28s;

	/* --- Z-index --------------------------------------------------------- */
	--pi-z-header: 100;
	--pi-z-float: 90;
	--pi-z-drawer: 110;
}