/* =========== © 2024 Centroarts.com =========== */

:root {
	color-scheme: light;

	--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--body-font: Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
	--body-font-size: 16px;
	--body-lineheight: 1.5;
	--body-font-weight: 400;

	--body-bg-color: #F5F5F5;
	--body-bg-color-rgb: 245, 245, 245;

	--footer-color: #1A1B1D;
	--footer-color-rgb: 26, 27, 29;

	--text-color: #1A1B1D;
	--text-color-rgb: 26, 27, 29;
	--text-muted-color: #1A1B1DB3;

	--text-dark-color: #f0f0f0;
	--text-dark-color-rgb: 240, 240, 240;
	--text-dark-muted-color: #f0f0f0B3;

	--drop-dark-color: #26282C;
	--drop-dark-color-rgb: 38, 40, 44;

	--drop-light-color: #ffffff;
	--drop-light-color-rgb: 255, 255, 255;

	--post-bg-color: #FFFFFF;
	--post-bg-color-rgb: 255, 255, 255;

	--post-bg-dark-color: #26282C;
	--post-bg-dark-color-rgb: 38, 40, 44;
	
	--post-story-bg-color: #26282C;
	--post-story-bg-color-rgb: 38, 40, 44;

	--post-radius: 8px;
	--drop-radius: 20px;
	--field-radius: 12px;
	--btn-radius: 12px;

	--drop-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07), 0 12px 32px -6px rgba(0, 0, 0, 0.25);
	--drop-overlay: #000000CC;

	--header-height: 72px;
	--page-maxwidth: 1320px;
	--page-minwidth: 320px;
	--drop-maxwidth: 420px;

	--gap: 28px;
	--gap-md: 24px;
	--gap-min: 16px;

	--fs-xxl: 32px;
	--fs-xl: 24px;
	--fs-xlg: 22px;
	--fs-lg: 17px;
	--fs-md: 16px;
	--fs-sm: 14px;
	--fs-xsm: 12px;

	--green-color: #99D48F;
	--green-color-rgb: 153, 212, 143;

	--yellow-color: #F8A963;
	--yellow-color-rgb: 248, 169, 99;

	--quote-bg: #00000008;
	--alert-bg: #FFAA3C;
	--alert-bg-rgb: 255, 170, 60;

	--drop-title: 20px;
	--btn-font-size: var(--fs-md);
	--field-font-size: var(--fs-md);
	--post-title-size: var(--fs-lg);
	--post-story-title-size: var(--fs-xlg);
	--footer-font-size: var(--fs-sm);
	--hmenu-font-size: 15px;

	--title-fs: var(--fs-lg);
	--title-lh: 1.4122;

	--label-bg: #FFFFFFCC;
	--label-text: #222222;
}

:root {
	--logo-width: 147px;
	--logo-height: 20px;

	--primary-color: #5864F2;
	--primary-color-rgb: 88, 100, 242;
	--primary-dark-color: #7A84F7;
	--primary-dark-color-rgb: 122, 132, 247;

	--header-color: #313338;
	--header-color-rgb: 49, 51, 56;
	--header-elements-color: #ffffff;
	--header-elements-color-rgb: 255, 255, 255;

	--header-menu-color: #4d3da9;
	--header-menu-color-rgb: 49, 51, 56;

	--link-color: #5864F2;
	--link-hover-color: #5864F2;

	--link-color-rgb: 88, 100, 242;
	--link-hover-color-rgb: 122, 132, 247;
	
	--post-title-hover: #4d3da9;

	--btn-fill-color: #5864F2;
	--btn-fill-text-color: #ffffff;
	--btn-fill-hover-color: #7A84F7;
	--btn-fill-active-color: #515de5;

	--btn-tone-color: #5864F2;
	--btn-tone-color-rgb: 88, 100, 242;

	--scroll-fly-bg: #5864F2CC;
	--scroll-fly-icon-color: #FFFFFF;
}

.dark {
	color-scheme: dark;

	--body-bg-color: #121213;
	--body-bg-color-rgb: 18, 18, 19;

	--text-color: var(--text-dark-color);
	--text-color-rgb: var(--text-dark-color-rgb);
	--text-muted-color: var(--text-dark-muted-color);

	--link-color: #7A84F7;
	--link-hover-color: #7A84F7;

	--link-color-rgb: 122, 132, 247;
	--link-hover-color-rgb: 133, 143, 246;

	--btn-tone-color: #7A84F7;
	--btn-tone-color-rgb: 122, 132, 247;

	--scroll-fly-bg: #7A84F7CC;
	--scroll-fly-icon-color: #FFFFFF;

	--post-title-hover: #7A84F7;

	--post-bg-color: #26282C;
	--post-bg-color-rgb: 38, 40, 44;

	--quote-bg: #FFFFFF08;

	--drop-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 12px 24px -6px rgba(0, 0, 0, 0.25);
}