:root {
	--moweb-color-brand: #ee31c5;
	--moweb-color-brand-dark: #c80b9f;
	--moweb-color-brand-deep: #6f0046;
	--moweb-color-brand-soft: #fff1fb;
	--moweb-color-accent: #7b61ff;
	--moweb-color-accent-hover: #6549f3;
	--moweb-color-accent-contrast: #ffffff;
	--moweb-color-text: #26212a;
	--moweb-color-heading: #151318;
	--moweb-color-muted: #6d6671;
	--moweb-color-border: #e2dce4;
	--moweb-color-border-strong: #c8becb;
	--moweb-color-surface: #ffffff;
	--moweb-color-surface-muted: #fbf9fc;
	--moweb-color-surface-raised: #ffffff;
	--moweb-color-error: #b42318;
	--moweb-color-success: #16794a;
	--moweb-color-focus: #ee31c5;

	--moweb-font-family: "El Messiri", Tahoma, Arial, sans-serif;
	--moweb-font-size-base: 16px;
	--moweb-line-height-base: 1.75;

	--moweb-container-width: 1200px;
	--moweb-container-padding: 20px;
	--moweb-header-service-height: 36px;
	--moweb-header-main-height: 80px;
	--moweb-header-nav-height: 48px;

	--moweb-space-1: 4px;
	--moweb-space-2: 8px;
	--moweb-space-3: 12px;
	--moweb-space-4: 16px;
	--moweb-space-5: 24px;
	--moweb-space-6: 32px;
	--moweb-space-7: 48px;
	--moweb-space-8: 64px;

	--moweb-radius-sm: 10px;
	--moweb-radius: 16px;
	--moweb-radius-lg: 26px;
	--moweb-shadow-card: 0 12px 36px rgba(75, 27, 66, 0.08);
	--moweb-shadow-hover: 0 20px 52px rgba(75, 27, 66, 0.14);

	--moweb-z-header: 100;
	--moweb-z-dropdown: 300;
	--moweb-z-drawer: 700;
	--moweb-z-modal: 900;
}

@media (max-width: 767px) {
	:root {
		--moweb-container-padding: 16px;
		--moweb-header-main-height: 66px;
		--moweb-space-8: 48px;
	}
}