:root {
	--primary: #FAF7F3;
	--s2: #F1ECE4;
	--s3: #E8E0D5;
	--s4: #DDD2C4;
	--s5: #D2C4B3;
	--container: #FFFFFF;
	--accent: #3A6F8A;
	--text: #1E1E1E;
	--text-muted: #6B645D;
	--h1: #1B2E3A;
	--h2: #3A4A55;
	--h3: #4F5D66;
	--tag-bg: #FFFFFF;
	--tag-text: #4F5D66;
	--tag-border: #DDD2C4;
	--imageOpacity: .3;
}

@media (prefers-color-scheme: dark) {
	:root {
		--primary: #101517;
		--s2: #151B1F;
		--s3: #1B2227;
		--s4: #21292F;
		--s5: #273139;
		--container: #12181C;
		--accent: #D89A45;
		--text: #EAEAEA;
		--text-muted: #A9A9A9;
		--h1: #E6EDF1;
		--h2: #C9D3DA;
		--h3: #AEB9C1;
		--tag-bg: #151B1F;
		--tag-text: #C9D3DA;
		--tag-border: #273139;
		--imageOpacity: .4;
	}
}

html {
	color: var(--text);
}

/** sections */
.section.home,
.section.about,
.section.about .subSection {
	background-color: var(--primary);
}

.section.work {
	background-color: var(--s2);
}

.section.skills {
	background-color: var(--s3);
}

.section.schools {
	background-color: var(--s4);
}

.section.contacts {
	background-color: var(--s5);
}

/* backgrounds */
/** primary */
body,
header,
header .headerSection,
header .navigation,
.section.home .container,
.mainSection {
	background-color: var(--primary);
}

/** container */
.container {
	background-color: var(--container);
}

/** accent */
button,
.button,
header .logoText::after {
	background-color: var(--accent);
}

/** text */
.button:hover {
	background-color: var(--text);
}


/** transparent */
header button {
	background-color: transparent;
}

/* custom */
.tag {
	background-color: var(--tag-bg);
}

/* colors */
/** primary */
.button {
	color: var(--primary);
}

/** accent */
a:not(.navigation a,
	.button,
	.section.work .project,
	.section.work .company,
	.section.schools .school,
	.section.contacts .socialSection .socialLink),
header button,
header .logoText span,
header .logoText::after,
header .navigation a:hover,
header .navigation a.active,
.section.work .project:hover,
.section.work .company:hover,
.section.schools a.school:hover,
.section.contacts .label,
.section.contacts .copy,
.highlight {
	color: var(--accent);
}

/** text */
header .logoText,
.section.home .container h1,
.section.home .container h2,
.section.schools .school {
	color: var(--text);
}

/** muted */
a:not(.navigation a,
	.button,
	.section.work .project,
	.section.work .company,
	.section.schools .school,
	.section.contacts .socialSection .socialLink):hover,
header .navigation a,
.section.work .details,
.section.schools .year,
.section.schools .description,
.section.contacts .contactSection .value,
.section.contacts .socialSection .socialLink,
.customList span {
	color: var(--text-muted);
}

/* custom */
h1 {
	color: var(--h1);
}

h2 {
	color: var(--h2);
}

h3,
h3 .project,
h4,
h4 .company,
.customList .material-symbols-rounded {
	color: var(--h3);
}

.tag {
	color: var(--tag-text);
}

/* fill */
.contacts svg {
	fill: var(--text);
}

/* borders */
.header {
	border-bottom: .1vmin solid var(--accent);
}

.section.home .container {
	border: .1vmin solid var(--accent);
}

.section.work .technologies,
.section.schools .description {
	border-top: .1vmin solid var(--accent);
}

.tag {
	border: .1vmin solid var(--tag-border);
}