:root {
	/* Primary */
	--smx-color-primary: #8a38fe;
	--smx-color-primary-tint: #e8d7ff;
	--smx-color-primary-contrast: #5705cb;
	--smx-color-primary-contrast-tint: #c49bfe;

	--smx-color-primary-rgb: 138, 56, 254;
	--smx-color-primary-tint-rgb: 232, 215, 255;
	--smx-color-primary-contrast-rgb: 87, 5, 203;
	--smx-color-primary-contrast-tint-rgb: 196, 155, 254;

	/* Secondary */
	--smx-color-secondary: #08a0ff;
	--smx-color-secondary-tint: #e6f5ff;
	--smx-color-secondary-contrast: #006dcc;
	--smx-color-secondary-shade: #00004c;

	--smx-color-secondary-rgb: 8, 160, 255;
	--smx-color-secondary-tint-rgb: 230, 245, 255;
	--smx-color-secondary-contrast-rgb: 0, 109, 204;
	--smx-color-secondary-shade-rgb: 0, 0, 76;

	/* Tertiary */
	--smx-color-tertiary: #12da76;
	--smx-color-tertiary-tint: #ebfff5;
	--smx-color-tertiary-contrast: #009933;
	--smx-color-tertiary-shade: #004c00;

	--smx-color-tertiary-rgb: 18, 218, 118;
	--smx-color-tertiary-tint-rgb: 235, 255, 245;
	--smx-color-tertiary-contrast-rgb: 0, 153, 51;
	--smx-color-tertiary-shade-rgb: 0, 76, 0;

	/* Semantic */
	--smx-color-success: #27ae60;
	--smx-color-danger: #cc0055;
	--smx-color-alert: #f0960f;

	--smx-color-background-light: #f2f2f2;
	--smx-color-background-dark: #161616;

	--smx-color-background-light-rgb: 242, 242, 242;
	--smx-color-background-dark-rgb: 22, 22, 22;

	--smx-color-text: #7f7f7f;
	--smx-color-text-bold: #404040;

	--smx-color-text-rgb: 127, 127, 127;
	--smx-color-text-rgb: 64, 64, 64;

	--smx-color-white: #ffffff;
	--smx-color-black: #000000;

	--smx-color-white-rgb: 255, 255, 255;
	--smx-color-black-rgb: 0, 0, 0;

	/* swiper */
	--swiper-theme-color: #8a38fe !important;
	--swiper-pagination-bullet-inactive-color: #ababab !important;

	/* spacing */
	--space-xs: 0.25rem; /* 4px */
	--space-sm: 0.5rem; /* 8px */
	--space-md: 1rem; /* 16px */
	--space-lg: 1.5rem; /* 24px */
	--space-xl: 2rem; /* 32px */
	--space-xxl: 3rem; /* 48px */

	/* typography */
	--font-family-base: 'Open Sans', system-ui, -apple-system, sans-serif;
	--font-size-base: clamp(0.875rem, 0.8rem + 0.5vw, 1rem);
	--font-size-sm: clamp(0.7rem, 0.65rem + 0.5vw, 0.76rem);
	--font-size-lg: clamp(1rem, 0.95rem + 0.5vw, 1.16rem);
	--font-size-xl: clamp(1.4rem, 1.3rem + 1vw, 1.86rem);

	/* font sizes */
	--font-text: 0.875rem;

	--font-subtitle: clamp(1.16rem, 2.5vw, 1.48rem);

	--font-title-xl: clamp(2.96rem, 4.5vw, 3.72rem);
	--font-title-lg: clamp(2.8rem, 4.5vw, 3.2rem);
	--font-title-lg: clamp(2.8rem, 4.5vw, 3.2rem);
	--font-title-main: clamp(1.86rem, 4.5vw, 2.75rem);
	--font-title-md: clamp(1.625rem, 3.5vw, 2.75rem);
	--font-title-sm: clamp(1.46rem, 2.5vw, 1.875rem);

	/* layout */
	--grid-columns: 12;
	--grid-gap: 1rem;

	--container-max: 1200px;

	/* utilities */
	--backdrop-blur-sm: blur(0.32rem);
	--backdrop-blur: blur(0.68rem);
	--backdrop-blur-lg: blur(1.26rem);
	--backdrop-blur-xl: blur(2.6rem);

	--border-radius-sm: 0.24rem;
	--border-radius-md: 0.46rem;
	--border-radius-lg: 1rem;
	--border-radius-xl: 1.5rem;
	--border-radius-full: 999px;

	/* z axis */
	--z-index-max: 1000;
	--z-index-top: 100;
	--z-index-medium: 10;
	--z-index-base: 1;
}