:root {
	--co-alpha: #{$co-alpha};
	--co-alpha-90: #{$co-alpha-90};
	--co-info: #{$co-info};
	--co-info-90: #{$co-info-90};
	--co-success: #{$co-success};
	--co-success-90: #{$co-success-90};
	--co-warning: #{$co-warning};
	--co-warning-90: #{$co-warning-90};
	--co-error: #{$co-error};
	--co-error-90: #{$co-error-90};

	--co-base-0: #{$co-base-0};
	--co-base-1: #{$co-base-1};
	--co-theme-0: #{$co-theme-0};
	--co-theme-1: #{$co-theme-1};
	--co-gray-10: #{$co-gray-10};
	--co-gray-20: #{$co-gray-20};
	--co-gray-30: #{$co-gray-30};
	--co-gray-40: #{$co-gray-40};
	--co-gray-50: #{$co-gray-50};
	--co-gray-60: #{$co-gray-60};
	--co-gray-70: #{$co-gray-70};
	--co-gray-80: #{$co-gray-80};
	--co-gray-90: #{$co-gray-90};

	--co-muted:   #{$co-muted};
	--text-color: #{$text-color};
	--body-bg:    #{$body-bg};
	--main-bg:    #{$main-bg};
	--link-color: #{$link-color};

	@each $i, $dist in $sp-map {
		--sp-#{$i}: #{$dist};
	}
	@each $i, $dist in $sp-lg-map {
		--sp-lg-#{$i}: #{$dist};
	}
}

@mixin dark-theme-vars {
	--co-alpha: #{$co-dark-alpha};
	--co-alpha-90: #{$co-dark-alpha-90};
	--co-info: #{$co-dark-info};
	--co-info-90: #{$co-dark-info-90};
	--co-success: #{$co-dark-success};
	--co-success-90: #{$co-dark-success-90};
	--co-warning: #{$co-dark-warning};
	--co-warning-90: #{$co-dark-warning-90};
	--co-error: #{$co-dark-error};
	--co-error-90: #{$co-dark-error-90};

	/* grays + base */
	--co-theme-0: #{$co-dark-theme-0};
	--co-theme-1: #{$co-dark-theme-1};

	--co-gray-10: #{$co-dark-gray-10};
	--co-gray-20: #{$co-dark-gray-20};
	--co-gray-30: #{$co-dark-gray-30};
	--co-gray-40: #{$co-dark-gray-40};
	--co-gray-50: #{$co-dark-gray-50};
	--co-gray-60: #{$co-dark-gray-60};
	--co-gray-70: #{$co-dark-gray-70};
	--co-gray-80: #{$co-dark-gray-80};
	--co-gray-90: #{$co-dark-gray-90};

	/* alias tokens */
	--co-muted:   #{$co-dark-muted};
	--text-color: #{$text-dark-color};
	--body-bg: #{$body-dark-bg};
	--main-bg: #{$main-dark-bg};
	--link-color: #{$link-dark-color};
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		@include dark-theme-vars;
	}
}

html[data-theme="light"] {
	[data-se="btnThemeToggle"] .ico:last-child { display: none; }
}

html[data-theme="dark"] {
	@include dark-theme-vars;
	[data-se="btnThemeToggle"] .ico:first-child { display: none; }
}

*, *::before, *::after {
	box-sizing: border-box;
	font-weight: inherit;
}

html {
	min-height: 100vh;
	font-size: 62.5%;
	scroll-padding-top: headerVisibleHeight();

	&.fake-dark-mode {
		filter: invert(1) hue-rotate(180deg);
		img,
		video { filter: invert(1) hue-rotate(180deg); }
	}
}


body {
	min-height: 100vh;
	min-width: $content-min-width;
	max-width: 1920px;
	font-family: $font-family-base;
	font-weight: $font-weight-base;
	font-size: $font-size-base;
	line-height: $line-height-base;
	color: var(--text-color);
	overflow-y: scroll;
	background-color: var(--body-bg);
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

a, button {
	color: var(--co-alpha);
	text-decoration: none;

	@include hover() {
		color: var(--text-color);
	}

	&:focus { outline: 0;}

	&:focus-visible {
		outline: 0;
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-theme-0) 50%, transparent);
	}
}

button {
	display: inline-block;
	vertical-align: baseline;
	padding: 0;
	margin-bottom: 0;
	border: 0;
	background-image: none;
	background-color: transparent;
	text-align: left;
	cursor: pointer;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

code {
	display: inline-block;
	margin-bottom: 1px;
	padding-left: .3em;
	padding-right: .3em;
	font-family: $font-family-monospace;
	background-color: var(--co-muted);
	border-radius: $sp-1;
}

details {
	summary {
		cursor: pointer;

		&:focus { outline: 0;}

		&:focus-visible {
			outline: 0;
			box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-theme-0) 25%, transparent);
		}
	}
	&[open] { margin-bottom: $sp-text;}
}

fieldset {
	padding: 0;
	margin: 0;
	border: 0;
}

figure {
	margin: 0;
}

figcaption {
	text-align: center;
	font-size: $font-size-small;
}

h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5 {
	margin-top: 0;
	margin-bottom: $sp-text;
	line-height: $line-height-title;
}

h1,.h1 { font-size: $font-size-h1; font-weight: $font-bold;}
h2,.h2 { font-size: $font-size-h2;}
h3,.h3 { font-size: $font-size-h3;}
h4,.h4 { font-size: $font-size-h4;}
h5,.h5 { font-size: $font-size-h5;}

hr, .hr {
	display: block;
	margin-top: 0;
	margin-bottom: $sp-5;
	border: 0;
	border-top: 1px solid;

	body & { color: var(--co-gray-80);}
}

iframe {
	border: 0;

	&[src*="youtube.com"],
	&[src*="player.vimeo.com"] {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		background-color: var(--co-theme-0);
	}
}


img {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

label {
	display: block;
}

p {
	margin-top: 0;
	margin-bottom: $sp-text;
}

pre {
	display: block;
	margin-top: 0;
	margin-bottom: $sp-6;
	padding: 0;
	tab-size: 2;

	code {
		display: block;
		padding: $sp-5;
		overflow-x: auto;
		border-radius: $sp-3;
		@include scrollBar();
	}
}

small {
	font-size: $font-size-small;
}

strong {
	font-weight: $font-bold;
}

summary {
	margin-bottom: $sp-text;
	&::marker { color: var(--co-gray-50);}
}

table {
	background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
	padding: 0;
}

ul, ol {
	margin-top: 0;
	margin-bottom: $sp-text;
}

ul {
	list-style: disc;
}

video {
	display: block;
	max-width: 100%;
	height: auto;
}