/*
 * Tokens del sistema de diseño (Figma HdSxYuQt5FT4Fd1d3AcyZv).
 *
 * Fuente única: `wp syncrasy kit apply` lee los colores del primer bloque
 * :root y los copia a los globales del Kit de Elementor. Un color nuevo que
 * deba aparecer en el selector del panel se agrega también al mapa de
 * inc/cli/class-kit-command.php.
 *
 * Medidas: plan §Sistema de diseño (tipografía y espaciado a 1440 y 390) y
 * design/components.md (componentes).
 */

:root {
	/* Superficies oscuras */
	--sy-night: #030628;          /* fondo más profundo: footer y base de los degradés */
	--sy-deep: #060B45;           /* superficie oscura de sección */
	--sy-ink: #0B1033;            /* títulos de tarjeta y texto fuerte sobre claro */
	--sy-ultramarine: #0A1791;    /* H2 sobre claro, botón navy, tile de icono */

	/* Acento */
	--sy-lime: #92EF2C;           /* acción primaria y acentos sobre oscuro. Nunca texto sobre blanco */
	--sy-lime-deep: #3ED16B;      /* segundo stop del acento del H1 */
	--sy-lime-soft: #D7F9B3;      /* texto de chip sobre oscuro, fondo de chip sobre claro */
	--sy-lime-tint: #EEFBE0;      /* fondo de tag sobre claro */
	--sy-lime-pale: #C7F79A;      /* texto del badge del hero */
	--sy-green-ink: #0A7A1C;      /* eyebrows sobre claro */
	--sy-green: #0D9F23;          /* subtítulos de las tarjetas de Outcomes */

	/* Texto */
	--sy-text: #4A5270;           /* cuerpo sobre claro */
	--sy-muted: #6A7290;          /* secundario sobre claro */
	--sy-muted-light: #9AA3BF;    /* terciario: se mide contraste en F11.3 */
	--sy-periwinkle: #9AA3D6;     /* nota bajo la video card */
	--sy-on-dark: #C9D0F0;        /* cuerpo sobre oscuro */
	--sy-on-dark-strong: #DDE3FF; /* secundario destacado sobre oscuro */
	--sy-num-stroke: #141B5C;     /* trazo de los números outline sobre claro */

	/* Líneas y fondos claros */
	--sy-line: #E3E7F2;
	--sy-line-strong: #C9D0E3;    /* borde del botón outline */
	--sy-mist: #F4F6FB;           /* fondo de sección alterno */
	--sy-white: #FFFFFF;

	/* Estados (no están en el Figma) */
	--sy-danger: #C62828;         /* error sobre claro */
	--sy-danger-on-dark: #FF8A80; /* error sobre oscuro */
}

:root {
	/* --- Tipografía ---------------------------------------------------------- */

	--sy-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

	/*
	 * Escala fluida: --sy-t vale 0 a 390px de ancho y 1px a 1440. Un valor
	 * "m → d" se escribe calc(m * 1px + (d - m) * var(--sy-t)) dentro de un
	 * clamp(m, …, d): coincide exacto con el Figma en los dos frames, así los
	 * títulos parten donde el diseño, e interpola en tablet.
	 */
	--sy-t: calc((100vw - 390px) / 1050);

	/* --- Espaciado ----------------------------------------------------------- */

	--sy-wrap: 1200px;
	--sy-gutter: 20px;

	/* Padding vertical de sección: 1440 → 390 */
	--sy-section-y: clamp(72px, calc(72px + 48 * var(--sy-t)), 120px);
	--sy-section-y-lg: clamp(80px, calc(80px + 48 * var(--sy-t)), 128px);
	--sy-section-y-sm: clamp(60px, calc(60px + 52 * var(--sy-t)), 112px);
	--sy-section-y-xs: 60px;

	/* --- Radios -------------------------------------------------------------- */

	--sy-r-pill: 999px;
	--sy-r-band: 36px;
	--sy-r-quote: 32px;
	--sy-r-video: 28px;
	--sy-r-card-lg: 26px;
	--sy-r-card: 24px;
	--sy-r-card-sm: 22px;   /* tarjetas en mobile */
	--sy-r-media: 18px;
	--sy-r-tile: 16px;
	--sy-r-image: 15px;

	/* --- Degradés y fondos --------------------------------------------------- */

	--sy-gradient-tile: linear-gradient(145deg, #1626B8 0%, var(--sy-ultramarine) 55%, var(--sy-deep) 100%);
	--sy-gradient-tile-lime: linear-gradient(145deg, #B5F76A 0%, var(--sy-lime) 50%, #4CC82A 100%);
	--sy-gradient-accent: linear-gradient(90deg, var(--sy-lime), var(--sy-lime-deep));
	--sy-gradient-card-border: linear-gradient(145deg, rgba(146, 239, 44, 0.95) 0%, rgba(13, 159, 35, 0.25) 30%, var(--sy-line) 55%, var(--sy-line) 100%);
	--sy-gradient-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
	--sy-overlay-media: linear-gradient(140deg, rgba(10, 23, 145, 0.55) 0%, rgba(4, 8, 51, 0.9) 100%);
	--sy-dots: radial-gradient(rgba(10, 23, 145, 0.09) 1px, transparent 1px) 0 0 / 24px 24px;

	/* --- Sombras ------------------------------------------------------------- */

	--sy-shadow-lime: 0 10px 30px -10px rgba(146, 239, 44, 0.7);
	--sy-shadow-lime-hover: 0 14px 38px -10px rgba(146, 239, 44, 0.95);
	--sy-shadow-navy: 0 10px 26px -12px rgba(10, 23, 145, 0.8);
	--sy-shadow-tile: 0 12px 24px -12px rgba(10, 23, 145, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	--sy-shadow-tile-lime: 0 12px 24px -12px rgba(146, 239, 44, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	--sy-shadow-tile-glass: 0 0 24px -6px rgba(146, 239, 44, 0.5);
	--sy-shadow-glass: 0 30px 60px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	--sy-shadow-featured: 0 40px 80px -40px rgba(10, 23, 145, 0.9);
	--sy-shadow-band: 0 50px 100px -50px rgba(10, 23, 145, 0.9);

	/* --- Foco y movimiento --------------------------------------------------- */

	--sy-focus: var(--sy-ultramarine);   /* sobre claro; las superficies oscuras lo cambian a lima */
	--sy-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--sy-fast: 160ms;
}

@media (min-width: 768px) {
	:root {
		--sy-gutter: 32px;
	}
}