/**
 * SemiConecta — Design tokens.
 * Todos los valores compartidos viven aquí. Cambiar la marca = cambiar este archivo.
 */

:root {
	/* --- Colores marca --- */
	--yellow: #FFD500;
	--yellow-logo: #FFD000;
	--yellow-dark: #C9A800;
	--yellow-soft: #FFF7C7;
	/* --- Azul RETIRADO de la identidad ---
	   Los tokens navy ahora apuntan a negro/grafito para que cualquier
	   uso residual quede en la paleta corporativa (negro + amarillo). */
	--navy: #0E0E11;
	--navy-2: #000000;
	--navy-3: #1B1B1E;
	--ink: #000000;
	--ink-2: #1B1B1E;
	--grafito: #0E0E11;
	/* Color oscuro estructural (texto fuerte, bordes, acentos UI). */
	--ink-strong: #0E0E11;
	--ink-soft: #333338;

	/* --- Grises --- */
	--gray-900: #252529;
	--gray-800: #333338;
	--gray-700: #4B4B52;
	--gray-600: #626268;
	--gray-500: #818188;
	--gray-400: #A4A4AC;
	--gray-300: #D1D1D5;
	--gray-200: #E5E5E8;
	--gray-100: #F1F1F3;
	--gray-50: #F8F8F9;
	--white: #FFFFFF;

	/* --- Semánticos --- */
	--danger: #A22135;
	--success: #267153;

	/* --- Tipografía (autoalojada, se define en @font-face en base.css) --- */
	--font-display: "IBM Plex Sans", "Aptos Display", "Segoe UI", Arial, sans-serif;
	--font-body: "Inter", "Aptos", "Segoe UI", Arial, sans-serif;

	/* --- Layout --- */
	--container: min(1320px, calc(100vw - 40px));
	--container-narrow: min(1060px, calc(100vw - 40px));
	--header-h: 76px;

	/* --- Radios --- */
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;

	/* --- Sombras --- */
	--shadow-soft: 0 24px 70px rgba(8,8,10, .10);
	--shadow-panel: 0 18px 50px rgba(7,7,9, .18);

	/* --- Animación --- */
	--ease: cubic-bezier(.22, 1, .36, 1);
	--focus: 3px solid var(--yellow);
}