:root {
	--co-alpha: #{$co-alpha};
	--co-alpha_d: #{actionDarken($co-alpha)};
	--co-alpha_l: #{actionLighten($co-alpha)};
	--co-success: #{$co-success};
	--co-success_d: #{actionDarken($co-success)};
	--co-success_l: #{actionLighten($co-success)};
	--co-error: #{$co-error};
	--co-error_d: #{actionDarken($co-error)};
	--co-error_l: #{actionLighten($co-error)};
	--co-info: #{$co-info};
	--co-info_d: #{actionDarken($co-info)};
	--co-info_l: #{actionLighten($co-info)};
	--co-warning: #{$co-warning};
	--co-warning_d: #{actionDarken($co-warning)};
	--co-warning_l: #{actionLighten($co-warning)};

	--co-base-0: #{$co-base-0};
	--co-base-1: #{$co-base-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};

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

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

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

body {
	min-height: 100vh;
	min-width: $content-min-width;
	font-family: $font-family-base;
	font-weight: $font-weight-base;
	font-size: $font-size-base;
	line-height: $line-height-base;
	color: $text-color;
	overflow-y: scroll;
	// scrollbar-gutter: stable;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;

	&[style*="padding-right"] {
		overflow: visible !important;
		padding-right: 0 !important;
	}
}

a, button {
	color: $co-alpha;
	text-decoration: underline;
	text-decoration-thickness: 1px;

	@include hover() {
		color: $text-color;
		text-decoration: none;
	}

	&:focus { outline: 0;}

	&:focus-visible {
		outline: 0;
		box-shadow: 0 0 0 2px rgba($co-base-0,.5);
	}
}

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;
}

address {
	font-style: normal;
}

code {
	display: inline-block;
	margin-bottom: 1px;
	padding-left: $sp-2;
	padding-right: $sp-2;
	font-family: $font-family-monospace;
	background-color: $co-gray-80;
}

details {
	summary {
		cursor: pointer;

		&:focus { outline: 0;}

		&:focus-visible {
			outline: 0;
			box-shadow: 0 0 0 2px rgba($co-base-0,.25);
		}
	}
	&[open] { margin-bottom: $sp-text;}
}

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: clampFn($font-size-h1-sm, $font-size-h1);}
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: $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: $co-base-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;
		@include scrollBar();
	}
}

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

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

summary {
	margin-bottom: $sp-text;
	&::marker { color: $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;
}