/* FONT COLOR */
a, [data-font-color="inherit"] { color: inherit; }
[class*="fc0"], [data-font-color="fc0"] { color: transparent !important; }         /* fc0 - Font Color Transparent */
[class*="fc1"], [data-font-color="fc1"] { color: var(--swatch--white) }            /* fc1 - Font Color White */
[class*="fc2"], [data-font-color="fc2"] { color: var(--swatch--romantic-pink) }    /* fc2 - Font Color Romantic Pink */ 
[class*="fc3"], [data-font-color="fc3"] { color: var(--swatch--water-leaf) }       /* fc3 - Font Color Water Leaf */
[class*="fc4"], [data-font-color="fc4"] { color: var(--swatch--sunset-orange) }    /* fc4 - Font Color Sunset Orange */
/* fcv - Font Color Violet */
[class*="fcv0-5"], [data-font-color="fcv0-5"] { color: var(--swatch--violet50) }
[class*="fcv1"], [data-font-color="fcv1"] { color: var(--swatch--violet100) }
[class*="fcv2"], [data-font-color="fcv2"] { color: var(--swatch--violet200) }
[class*="fcv3"], [data-font-color="fcv3"] { color: var(--swatch--violet300) }
[class*="fcv4"], [data-font-color="fcv4"] { color: var(--swatch--violet400) }
[class*="fcv5"], [data-font-color="fcv5"] { color: var(--swatch--violet500) }
[class*="fcv6"], [data-font-color="fcv6"] { color: var(--swatch--violet600) }
[class*="fcv7"], [data-font-color="fcv7"] { color: var(--swatch--violet700) }
[class*="fcv8"], [data-font-color="fcv8"] { color: var(--swatch--violet800) }
[class*="fcv9"], [data-font-color="fcv9"] { color: var(--swatch--violet900) }
/* fcg - Font Color Grey */
[class*="fcg0-5"], [data-font-color="fcg0-5"] { color: var(--swatch--gray50) }
[class*="fcg1"], [data-font-color="fcg1"] { color: var(--swatch--gray100) }
[class*="fcg2"], [data-font-color="fcg2"] { color: var(--swatch--gray200) }
[class*="fcg3"], [data-font-color="fcg3"] { color: var(--swatch--gray300) }
[class*="fcg4"], [data-font-color="fcg4"] { color: var(--swatch--gray400) }
[class*="fcg5"], [data-font-color="fcg5"] { color: var(--swatch--gray500) }
[class*="fcg6"], [data-font-color="fcg6"] { color: var(--swatch--gray600) }
[class*="fcg7"], [data-font-color="fcg7"] { color: var(--swatch--gray700) }
[class*="fcg8"], [data-font-color="fcg8"] { color: var(--swatch--gray800) }
[class*="fcg9"], [data-font-color="fcg9"] { color: var(--swatch--gray900) }


/* BACKGROUND COLOR */
[class*="bc0"] { background-color: transparent !important; }         /* bc0 - Font Color Transparent */
[class*="bc1"] { background-color: var(--swatch--white) }            /* bc1 - Font Color White */
[class*="bc2"] { background-color: var(--swatch--romantic-pink) }    /* bc2 - Font Color Romantic Pink */ 
[class*="bc3"] { background-color: var(--swatch--water-leaf) }       /* bc3 - Font Color Water Leaf */
[class*="bc4"] { background-color: var(--swatch--sunset-orange) }    /* bc4 - Font Color Sunset Orange */
/* bcv - Background Color Violet */
[class*="bcv0-5"] { background-color: var(--swatch--violet50) }
[class*="bcv1"] { background-color: var(--swatch--violet100) }
[class*="bcv2"] { background-color: var(--swatch--violet200) }
[class*="bcv3"] { background-color: var(--swatch--violet300) }
[class*="bcv4"] { background-color: var(--swatch--violet400) }
[class*="bcv5"] { background-color: var(--swatch--violet500) }
[class*="bcv6"] { background-color: var(--swatch--violet600) }
[class*="bcv7"] { background-color: var(--swatch--violet700) }
[class*="bcv8"] { background-color: var(--swatch--violet800) }
[class*="bcv9"] { background-color: var(--swatch--violet900) }
/* bcg - Background Color Grey */
[class*="bcg0-5"] { background-color: var(--swatch--gray50) }
[class*="bcg1"] { background-color: var(--swatch--gray100) }
[class*="bcg2"] { background-color: var(--swatch--gray200) }
[class*="bcg3"] { background-color: var(--swatch--gray300) }
[class*="bcg4"] { background-color: var(--swatch--gray400) }
[class*="bcg5"] { background-color: var(--swatch--gray500) }
[class*="bcg6"] { background-color: var(--swatch--gray600) }
[class*="bcg7"] { background-color: var(--swatch--gray700) }
[class*="bcg8"] { background-color: var(--swatch--gray800) }
[class*="bcg9"] { background-color: var(--swatch--gray900) }

/* unique elements */
/* Button Theme */
/* button primary */
[data-button-theme="default"] {
	--button--text: var(--swatch--white);
	--button--background: var(--swatch--sunset-orange);
	--button--border: var(--swatch--sunset-orange);
	--button--text-hover: var(--swatch--white);
	--button--background-hover: var(--swatch--sunset-orange-hover);
	--button--border-hover: var(--swatch--sunset-orange-hover);
	--button--text-active: var(--swatch--white);
	--button--background-active: var(--swatch--sunset-orange-active);
	--button--border-active: var(--swatch--sunset-orange-active);
}
[data-button-theme="violet"],
.nav_menu_wrap.is-sticky .g_btn_wrap,
.nav_menu_wrap.is-hover .g_btn_wrap {
	--button--text: var(--swatch--white);
	--button--background: var(--swatch--violet900);
	--button--border: var(--swatch--violet900);
	--button--text-hover: var(--swatch--white);
	--button--background-hover: var(--swatch--violet800);
	--button--border-hover: var(--swatch--violet800);
	--button--text-active: var(--swatch--white);
	--button--background-active: var(--swatch--gray900);
	--button--border-active: var(--swatch--gray900);
}
[data-button-theme="pink"],
body.is-dark .g_btn_wrap {
	--button--text: var(--swatch--violet900);
	--button--background: var(--swatch--romantic-pink);
	--button--border: var(--swatch--romantic-pink);
	--button--background-hover: var(--swatch--romantic-pink-hover);
	--button--text-hover: var(--swatch--violet900);
	--button--border-hover: var(--swatch--romantic-pink-hover);
	--button--text-active: var(--swatch--violet900);
	--button--background-active: var(--swatch--romantic-pink-active);
	--button--border-active: var(--swatch--romantic-pink-active);
}
[data-button-theme="white"] {
	--button--text: var(--swatch--gray600);
	--button--background: var(--swatch--white);
	--button--border: var(--swatch--gray300);
	--button--text-hover: var(--swatch--gray500);
	--button--background-hover: var(--swatch--gray50);
	--button--border-hover: var(--swatch--gray200);
	--button--text-active: var(--swatch--gray600);
	--button--background-active: var(--swatch--gray100);
	--button--border-active: var(--swatch--gray200);
}
[data-button-theme="violet"]:hover,
[data-button-theme="pink"]:hover,
[data-button-theme="white"]:hover {
	--button--text: var(--button--text-hover);
	--button--background: var(--button--background-hover);
	--button--border: var(--button--border-hover);
}
[data-button-theme="default"]:active,
[data-button-theme="violet"]:active,
[data-button-theme="pink"]:active,
[data-button-theme="white"]:active {	
	--button--text: var(--button--text-active);
	--button--background: var(--button--background-active);
	--button--border: var(--button--border-active);	
}
[data-button-theme="default"]:focus { box-shadow: 0 0 0 1px var(--swatch--white), 0 0 0 2px var(--swatch--sunset-orange-hover); }
[data-button-theme="violet"]:focus { box-shadow: 0 0 0 1px var(--swatch--white), 0 0 0 2px var(--swatch--violet700); }
[data-button-theme="pink"]:focus { box-shadow: 0 0 0 1px var(--swatch--white), 0 0 0 2px var(--swatch--romantic-pink-hover);	}
[data-button-theme="white"]:focus { box-shadow: 0 0 0 1px var(--swatch--white), 0 0 0 2px var(--swatch--gray100); }


/* apply colors */
:is(c, :where([data-theme]:not([data-theme="inherit"]))) {
	background-color: var(--theme--background);
	color: var(--theme--text);
}