:root {
	/* ===== Colores de fondo (Background Colors) ===== */
	--iui-background: 0 0% 100%; /* Fondo principal de la aplicación (blanco). */
	--iui-background-variant: 0 0% 98%; /* Fondo principal de la aplicación variante (ligeramente más oscuro que el fondo). */
	--iui-surface: 0 0% 88%; /* Superficie de componentes (ligeramente más oscura que el fondo). */
	--iui-surface-variant: 0 0% 92%; /* Variante de superficie para diferenciar secciones. */
	--iui-surface-container: 0 0% 90%; /* Contenedores de superficie (barras de aplicaciones o headers). */

	/* ===== Colores primarios y secundarios (Primary & Secondary Colors) ===== */
	--iui-primary: 134 56% 54%; /* Color primario (azul). */
	--iui-secondary:  190 80% 50%;; /* Color secundario (verde azulado). */

	/* ===== Colores de texto (On Colors) ===== */
	--iui-on-background: 0 0% 13%; /* Texto sobre el fondo principal (casi negro). */
	--iui-on-background-variant: 0 0% 20%; /* Texto sobre el fondo principal variante (gris medio). */
	--iui-on-surface: 0 0% 13%; /* Texto sobre superficies (casi negro). */
	--iui-on-surface-variant: 0 0% 40%; /* Texto sobre superficies variantes (gris oscuro). */
	--iui-on-primary: 0 0% 100%; /* Texto sobre colores primarios (blanco). */
	--iui-on-secondary: 0 0% 100%; /* Texto sobre colores secundarios (blanco). */



	/* ===== Colores de estado (State Colors) ===== */
	--iui-danger: 0 72% 51%; /* Color para errores (rojo). */
	--iui-danger-container: 0 72% 90%; /* Contenedor de errores (rojo claro). */
	--iui-success: 142 71% 45%; /* Color para éxito (verde). */
	--iui-warning: 40 100% 50%; /* Color para advertencias (amarillo). */

	/* ===== Colores adicionales (Additional Colors) ===== */
	--iui-outline: 0 0% 80%; /* Color para bordes y contornos (gris claro). */

	/* ===== Elevación (Elevation Tokens) ===== */
	--iui-elevation-0: none; /* Sin sombra (nivel 0). */
	--iui-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1); /* Sombra ligera (nivel 1). */
	--iui-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra media (nivel 2). */
	--iui-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra fuerte (nivel 3). */

	/* ===== Border Radius (Border Radius Tokens) ===== */
	--iui-radius: 15px; /* Radio de borde para componentes pequeños (botones, chips). */

	/* ===== tamaño de fuentes (font size tokens) ===== */
	--iui-font-size-sm: 12px; /* Tamaño de fuente pequeño (12px). */
	--iui-font-size-md: 14px; /* Tamaño de fuente mediano (14px). */
	--iui-font-size-lg: 16px; /* Tamaño de fuente grande (16px). */

	/* ===== Padding (Padding tokens) ===== */
	--iui-spacing-sm: 0.25rem; /* Padding pequeño (8px). */
	--iui-spacing-md: 0.5rem; /* Padding mediano (16px). */
	--iui-spacing-lg: 1rem; /* Padding grande (24px). */
}

[data-theme="dark"] {
	/* ===== Colores de fondo (Background Colors) ===== */
	--iui-background: 0 0% 10%; /* Fondo principal en modo oscuro (gris muy oscuro). */
	--iui-surface: 0 0% 15%; /* Superficie en modo oscuro (gris oscuro). */
	--iui-surface-variant: 0 0% 20%; /* Variante de superficie en modo oscuro (gris medio). */
	--iui-surface-container: 0 0% 25%; /* Contenedor de superficie en modo oscuro (gris claro). */

	/* ===== Colores de texto (On Colors) ===== */
	--iui-on-background: 0 0% 90%; /* Texto sobre el fondo principal en modo oscuro (blanco). */
	--iui-on-surface: 0 0% 90%; /* Texto sobre superficies en modo oscuro (blanco). */
	--iui-on-surface-variant: 0 0% 60%; /* Texto sobre superficies variantes en modo oscuro (gris claro). */
	--iui-on-primary: 0 0% 100%; /* Texto sobre colores primarios en modo oscuro (blanco). */
	--iui-on-secondary: 0 0% 100%; /* Texto sobre colores secundarios en modo oscuro (blanco). */

	/* ===== Colores de estado (State Colors) ===== */
	--iui-danger: 0 72% 51%; /* Color para errores en modo oscuro (rojo). */
	--iui-danger-container: 0 72% 20%; /* Contenedor de errores en modo oscuro (rojo oscuro). */
	--iui-success: 142 71% 45%; /* Color para éxito en modo oscuro (verde). */
	--iui-warning: 40 100% 50%; /* Color para advertencias en modo oscuro (amarillo). */

	/* ===== Colores adicionales (Additional Colors) ===== */
	--iui-outline: 0 0% 40%; /* Color para bordes y contornos en modo oscuro (gris medio). */
	--iui-shadow: 0 0% 0%; /* Color para sombras en modo oscuro (negro). */
	--iui-inverse-surface: 0 0% 90%; /* Superficie inversa en modo oscuro (blanco). */
}