/* ==========================================================================
   Nokaos - Design tokens (sistema "Industry")
   Fuente de verdad del aspecto visual. Editable aqui, o via
   Elementor > Ajustes del sitio > Colores/Fuentes globales (recomendado).
   Cada token global de Elementor se mapea a estas variables (ver docs/03).
   ========================================================================== */

:root {
	/* --- Base --- */
	--color-bg:        #f2f2f3;
	--color-surface:   #e9e9ea;
	--color-text:      #1d1f20;
	--color-accent:    #5980a6;
	--color-accent-2:  #728fab;
	--color-divider:   color-mix(in srgb, #1d1f20 16%, transparent);

	/* --- Escala de acento --- */
	--color-accent-100: #eef6ff;
	--color-accent-200: #d6ebff;
	--color-accent-300: #b5d9fd;
	--color-accent-400: #94bce3;
	--color-accent-500: #749dc4;
	--color-accent-600: #597ea3;
	--color-accent-700: #416180;
	--color-accent-800: #2c455d;
	--color-accent-900: #1d2d3d;

	/* --- Neutros --- */
	--color-neutral-100: #f5f5f8;
	--color-neutral-200: #e7e7ea;
	--color-neutral-300: #d4d4d7;
	--color-neutral-400: #b7b7ba;
	--color-neutral-500: #98989b;
	--color-neutral-600: #7a7a7d;
	--color-neutral-700: #5d5d60;
	--color-neutral-800: #424244;
	--color-neutral-900: #2b2b2d;

	--color-on-dark: #f2f2f3;

	/* --- Tipografia --- */
	--font-heading: "Barlow Condensed", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-heading-weight: 600;
	--font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* --- Espaciado (escala original) --- */
	--space-1: 3.4px;
	--space-2: 6.8px;
	--space-3: 10.2px;
	--space-4: 13.6px;
	--space-6: 20.4px;
	--space-8: 27.2px;

	/* --- Ritmo de seccion --- */
	--section-pad-y: clamp(48px, 6vw, 96px);
	--section-pad-x: clamp(20px, 5vw, 64px);
	--container-max: 1240px;

	/* --- Radios (marco "blueprint": esquinas rectas) --- */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 7px;
	--radius-frame: 0px;

	/* --- Sombras --- */
	--shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
	--shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
	--shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

/* Fallback para navegadores sin color-mix() (< 2023). Degrada a solido. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	:root {
		--color-divider: rgba(29, 31, 32, 0.16);
	}
}