@import "_buttons.css";
@import "_forms.css";
@import "_themeswitcher.css";
@import "_carousel.css";
@import "_loading.css";
@import "_typograpy.css";
@import "_imagesandcolors.css";
@import "_navigation.css";
@import "_mediaqueries.css";
@import "_blogpostcard.css";
@import "_containersandwrappers.css";

*,
*::after,
*::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: inherit;
}
html {
	height: 100%;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
footer {
	margin-top: auto;
}

/* colors:
	-----------nav-background-colors----------------
	 --------light-green-background: #BAD6C4;
	 --------dark-green-background: #669C85;
	 -----------------------------------------------
	 --------signal-green-accent-green--------------
	 ---------pop-color-for-buttons: #7DBA7F;
	 ------------------------------------------
	 --------container-background-colors-trans------
	 --------lightest-green-container: #EEF5EE;
	 --------light-green-container: #BAD6C4;
	 --------dark-green-container: #669C85;
	 -----------------------------------------------
*/

:root[data-theme="light"] {
	--body-background: #fff;
	--image-logo: url("/images/logo-light.png");
	--header-nav-switch-background: #bad6c4;
	--nav-background-color: #bad6c4;
	--footer-background: #669c85;
	--nav-a-color: #000;
	--hover-shadow-color: 0.3px 0.3px 0.3px #3d3b3b;

	--container-background: rgba(95, 134, 99, 0.3);
	--about-newsletter-background: #669c85;

	--story-background: #eef5ee;
	--box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);

	--postcard-border: 1px solid #000;
	--border-radius: 8px;
	--border-radius-image: 10px 10px 0 0;
	--postcard-background: #fff;
	--postcard-border-color: #205c20;
	--badge-color: #205c20;
	--badge-background: #d6f8d6;

	--button-font-color: #000;
	--accent-color: #7dba7f;
	--shadow: #00000075;

	--error-color: #B00020;
	--success-color: #7dba7f;
	--disabled-color: #79797990;

	--h-color: #000;
	--copy-color: #000;
	--font-color: #000;

	--switch-bg: #f5f5f6;
	--switch-circle-bg: #ffd371;
	--switch-circle-pos: 0.4rem;
	--icon-sun: #997f44;
	--icon-moon: #b1b0b5;
}

:root[data-theme="dark"] {
	--body-background: #222;
	--image-logo: url("/images/logo-dark.png");

	--header-nav-switch-background: #669c85;
	--nav-background-color: #669c85;
	--footer-background: #669c85;
	--nav-a-color: #000;
	--hover-shadow-color: 0.5px 0.5px 0.5px #3d3b3b;

	--container-background: #669c8580;
	--about-newsletter-background: #2b4339;
	--newsletter-background: #669c8550;
	--story-background: hsla(129, 11%, 35%, 0.3);
	--story-paragraph-color: #e1e1e1;

	--postcard-border: 1px solid #000;
	--border-radius: 8px;
	--border-radius-image: 10px 10px 0 0;
	--postcard-background: hsla(0, 0%, 23%, 0.3);
	--postcard-border-color: #205c20;
	--badge-color: #205c20;
	--badge-background: #d6f8d6;
	--font-color: #fff;
	--button-font-color: #000;

	--accent-color: #669c85;
	--error-color: #CF6679;
	--success-color: #669c85;
	--disabled-color: #79797990;

	--h-color: #e1e1e1;
	--copy-color: #ffffff;
	--font-color: #e1e1e1;

	--switch-bg: #2d2c35;
	--switch-circle-bg: #7190ff;
	--switch-circle-pos: 3.2rem;
	--icon-sun: var(--muted-copy-color);
	--icon-moon: #dce3ff;
}