/*
 * Base typography and global defaults.
 * Light/Dark mode can be targeted with: .light .selector and .dark .selector
 */

html {
	font-size: 16px;
}

body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-p);
	line-height: var(--line-height-body);
	background-color: var(--color-bg);
	color: var(--color-text);
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* Mode visibility helpers */
.logo-dark,
.dark-visible {
	display: none !important;
}

.logo-light,
.ligth-visible,
.light-visible {
	display: none !important;
}

.dark .logo-dark,
:root.dark .logo-dark,
.dark .dark-visible,
:root.dark .dark-visible {
	display: initial !important;
}

.light .logo-light,
:root.light .logo-light,
.light .ligth-visible,
:root.light .ligth-visible,
.light .light-visible,
:root.light .light-visible {
	display: initial !important;
}

@media (prefers-color-scheme: dark) {
	:root:not(.light):not(.dark) .logo-dark,
	:root:not(.light):not(.dark) .dark-visible {
		display: initial !important;
	}
}

@media (prefers-color-scheme: light) {
	:root:not(.light):not(.dark) .logo-light,
	:root:not(.light):not(.dark) .ligth-visible,
	:root:not(.light):not(.dark) .light-visible {
		display: initial !important;
	}
}



h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-base);
	line-height: var(--line-height-heading);
	margin: 0 0 0.6em;
	color: var(--color-text);
}

h1 {
	font-size: var(--font-size-h1);
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

h4 {
	font-size: var(--font-size-h4);
}

h5 {
	font-size: var(--font-size-h5);
}

h6 {
	font-size: var(--font-size-h6);
}

p {
	font-size: var(--font-size-p);
	line-height: var(--line-height-body);
	margin: 0 0 1em;
	color: var(--color-text);
}

a {
	color: var(--color-accent);
}

a:hover,
a:focus {
	color: var(--color-accent-alt);
}