:root {
	/* Color — paleta oficial DI3D (marca/paleta de colores.png) */
	--color-black: #0A0A0A;
	--color-graphite: #1A1A1A;
	--color-dark-gray: #2E2E2E;
	--color-soft-white: #F5F5F5;
	--color-orange: #FF6300;
	--color-mid-gray: #707070;
	--color-light-gray: #B8B8B8;
	--color-pale-gray: #E8E8E8;
	--color-tech-blue: #2563EB;
	--color-white: #FFFFFF; /* no está en la paleta oficial, uso puntual para superficies "elevadas" (header, inputs) sobre el fondo blanco suave */

	/* Roles — sitio claro: fondo blanco suave, texto casi negro, naranja
	   como único acento de acción. El azul técnico queda reservado a
	   detalles de ingeniería (ejes, coordenadas, etiquetas), nunca decorativo.
	   El loader es la única pieza que se queda en negro a propósito (ver loader.css / sections.css). */
	--color-bg: var(--color-soft-white);
	--color-surface: var(--color-white);
	--color-border: var(--color-mid-gray);
	--color-text: var(--color-black);
	--color-text-muted: var(--color-mid-gray);
	--color-accent: var(--color-orange);
	--color-accent-technical: var(--color-tech-blue);

	/* El naranja de marca (#FF6300) no llega a 4.5:1 sobre el fondo claro en
	   ningún tamaño de texto (verificado: falla incluso en el titular
	   gigante del hero). Para TEXTO sobre fondo claro se usa esta versión
	   oscurecida (4.68:1); el naranja puro se mantiene intacto para fondos
	   de botón, íconos y rellenos, donde sí es correcto usarlo. */
	--color-accent-text: #BD4900;

	/* Fijos para las "islas oscuras" que no siguen el tema de la página
	   (loader, visor del cotizador) — a propósito NO usan --color-text /
	   --color-text-muted, para que un futuro cambio de tema de la página no
	   vuelva a dejar texto negro sobre negro ahí dentro (pasó una vez). */
	--color-on-dark: var(--color-soft-white);
	--color-on-dark-muted: var(--color-light-gray);

	/* Tipografía */
	--font-display: "Space Grotesk", "Arial Narrow", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

	--text-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--text-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
	--text-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	--text-h2: clamp(2rem, 1.6rem + 1.8vw, 3rem);
	--text-h1: clamp(2.75rem, 1.9rem + 3.8vw, 5.5rem);
	--text-display: clamp(3.5rem, 2.2rem + 5.8vw, 8rem);

	/* Espaciado — escala base 8px */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-6: 3rem;
	--space-8: 4rem;
	--space-12: 6rem;
	--space-16: 8rem;
	--space-24: 12rem;

	/* Contenedores — breakpoints de referencia: 1440/1280/1024/768/430/390/360 */
	--container-max: 1440px;
	--container-padding: clamp(1.25rem, 2vw, 3rem);

	/* Motion — tokens definidos ahora para que Fase 6 hable un solo idioma,
	   aunque todavía no se usen en Foundation. */
	--motion-fast: 180ms;
	--motion-medium: 500ms;
	--motion-slow: 1000ms;
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);

	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-pill: 999px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--motion-fast: 0ms;
		--motion-medium: 0ms;
		--motion-slow: 0ms;
	}
}