@import url(./fonts/loader.css);

:root {
	--text: #10110e;
	--background: #f8faf5;
	--primary: #3e5f26;
	--secondary: #538a24;
	--accent: #24e053;

	--text-50: #f3f4f1;
	--text-100: #e6e8e3;
	--text-200: #ced1c7;
	--text-300: #b5baab;
	--text-400: #9ca38f;
	--text-500: #848c73;
	--text-600: #69705c;
	--text-700: #4f5445;
	--text-800: #35382e;
	--text-900: #1a1c17;
	--text-950: #0d0e0b;

	--background-50: #f6f6f6;
	--background-100: #eeeeee;
	--background-200: #dddddd;
	--background-300: #b8cccc;
	--background-400: #bbbbbb;
	--background-500: #aaaaaa;
	--background-600: #888888;
	--background-700: #666666;
	--background-800: #444444;
	--background-900: #222222;
	--background-950: #111111;

	--primary-50: #f8f8f8;
	--primary-100: #f0f0f0;
	--primary-200: #e2e2e2;
	--primary-300: #d3d3d3;
	--primary-400: #c5c5c5;
	--primary-500: #b6b6b6;
	--primary-600: #929292;
	--primary-700: #6d6d6d;
	--primary-800: #494949;
	--primary-900: #242424;
	--primary-950: #121212;

	--secondary-50: #f2faeb;
	--secondary-100: #e4f5d6;
	--secondary-200: #caeaae;
	--secondary-300: #afe085;
	--secondary-400: #95d55d;
	--secondary-500: #7acb34;
	--secondary-600: #62a22a;
	--secondary-700: #497a1f;
	--secondary-800: #315115;
	--secondary-900: #18290a;
	--secondary-950: #0c1405;

	--accent-50: hsl(120, 76%, 95%);
	--accent-100: hsl(120, 76%, 90%);
	--accent-200: hsl(120, 75%, 80%);
	--accent-300: hsl(120, 75%, 70%);
	--accent-400: hsl(120, 75%, 60%);
	--accent-500: hsl(120, 75%, 50%);
	--accent-600: hsl(120, 75%, 40%);
	--accent-700: hsl(120, 75%, 30%);
	--accent-800: hsl(120, 75%, 20%);
	--accent-900: hsl(120, 76%, 10%);
	--accent-950: hsl(120, 76%, 5%);
}

@media (prefers-color-scheme: dark) {
	:root {
		--text: #f0f1ee;
		--background: #080a05;
		--primary: #b8d9a0;
		--secondary: #538a24;
		--accent: hsl(135, 75%, 51%);

		--text-50: #0d0e0b;
		--text-100: #1a1c17;
		--text-200: #35382e;
		--text-300: #4f5445;
		--text-400: #69705c;
		--text-500: #848c73;
		--text-600: #9ca38f;
		--text-700: #b5baab;
		--text-800: #ced1c7;
		--text-900: #e6e8e3;
		--text-950: #f3f4f1;

		--background-50: #111111;
		--background-100: #222222;
		--background-200: #444444;
		--background-300: #666666;
		--background-400: #888888;
		--background-500: #aaaaaa;
		--background-600: #bbbbbb;
		--background-700: #cccccc;
		--background-800: #dddddd;
		--background-900: #eeeeee;
		--background-950: #f6f6f6;

		--primary-50: #0c1207;
		--primary-100: #18240f;
		--primary-200: #2f491d;
		--primary-300: #476d2c;
		--primary-400: #5f923a;
		--primary-500: #76b649;
		--primary-600: #92c56d;
		--primary-700: #add392;
		--primary-800: #c8e2b6;
		--primary-900: #e4f0db;
		--primary-950: #f1f8ed;

		--secondary-50: #0c1405;
		--secondary-100: #18290a;
		--secondary-200: #315115;
		--secondary-300: #497a1f;
		--secondary-400: #62a22a;
		--secondary-500: #7acb34;
		--secondary-600: #95d55d;
		--secondary-700: #afe085;
		--secondary-800: #caeaae;
		--secondary-900: #e4f5d6;
		--secondary-950: #f2faeb;

		--accent-50: hsl(120, 76%, 95%);
		--accent-100: hsl(120, 76%, 90%);
		--accent-200: hsl(120, 75%, 80%);
		--accent-300: hsl(120, 75%, 70%);
		--accent-400: hsl(120, 75%, 60%);
		--accent-500: hsl(120, 75%, 50%);
		--accent-600: hsl(120, 75%, 40%);
		--accent-700: hsl(120, 75%, 30%);
		--accent-800: hsl(120, 75%, 20%);
		--accent-900: hsl(120, 76%, 10%);
		--accent-950: hsl(120, 76%, 5%);
	}
}

* {
	margin: 0px;
	padding: 0px;
	accent-color: var(--accent);
}

body {
	background-color: var(--background);
	color: var(--text);
	font-family: 'DM_Sans';
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Noto_Sans';
}

a {
	color: var(--accent);
	text-decoration: none;
}