/* =========== © 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: #191919;
	--footer-color-rgb: 25, 25, 25;

	--text-color: #191919;
	--text-color-rgb: 25, 25, 25;
	--text-muted-color: #191919B3;

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

	--drop-dark-color: #292929;
	--drop-dark-color-rgb: 41, 41, 41;

	--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: #292929;
	--post-bg-dark-color-rgb: 41, 41, 41;
	
	--post-story-bg-color: #2B2B2B;
	--post-story-bg-color-rgb: 43, 43, 43;

	--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: 174px;
	--logo-height: 32px;

	--primary-color: #1F9062;
	--primary-color-rgb: 31, 144, 98;
	--primary-dark-color: #35AE7C;
	--primary-dark-color-rgb: 53, 174, 124;

	--header-color: #292929;
	--header-color-rgb: 41, 41, 41;
	--header-elements-color: #ffffff;
	--header-elements-color-rgb: 255, 255, 255;

	--header-menu-color: #1F9062;
	--header-menu-color-rgb: 31, 144, 98;

	--link-color: #1F9062;
	--link-hover-color: #25A370;

	--link-color-rgb: 31, 144, 98;
	--link-hover-color-rgb: 37, 163, 112;
	
	--post-title-hover: #1F9062;

	--btn-fill-color: #1F9062;
	--btn-fill-text-color: #ffffff;
	--btn-fill-hover-color: #25A370;
	--btn-fill-active-color: #1D885C;

	--btn-tone-color: #1F9062;
	--btn-tone-color-rgb: 31, 144, 98;

	--scroll-fly-bg: #1F9062CC;
	--scroll-fly-icon-color: #FFFFFF;
}

.dark {
	color-scheme: dark;

	--body-bg-color: #101010;
	--body-bg-color-rgb: 16, 16, 16;

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

	--link-color: #35AE7C;
	--link-hover-color: #3BC48B;

	--link-color-rgb: 53, 174, 124;
	--link-hover-color-rgb: 59, 196, 139;

	--btn-tone-color: #3BC48B;
	--btn-tone-color-rgb: 53, 174, 124;

	--scroll-fly-bg: #35AE7CCC;
	--scroll-fly-icon-color: #FFFFFF;

	--post-title-hover: #35AE7C;

	--post-bg-color: #292929;
	--post-bg-color-rgb: 41, 41, 41;

	--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);
}