html,
body {
	max-width: 100vw;
	overflow-x: hidden;
}

* {
	box-sizing: border-box;
}

body {
	padding: 0;
	margin: 0;
	font-family: var(--font-family-sans);
	font-size: var(--text-size-400);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-400);
	color: var(--text-minor);
	letter-spacing: var(--text-tracking-400);
	background-color: var(--surface-minor);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ===== Text styles ===== */

/* Display text styles */
.text-display-1 {
	margin-bottom: var(--space-200);
	font-family: var(--font-family-display);
	font-size: var(--text-size-1000);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-400);
	color: var(--text-major);
	letter-spacing: var(--text-tracking-600);
}

.text-display-2 {
	margin-bottom: var(--space-200);
	font-family: var(--font-family-display);
	font-size: var(--text-size-900);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-400);
	color: var(--text-major);
	letter-spacing: var(--text-tracking-600);
}

.text-display-3 {
	margin-bottom: var(--space-200);
	font-family: var(--font-family-display);
	font-size: var(--text-size-800);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-400);
	color: var(--text-major);
	letter-spacing: var(--text-tracking-600);
}

.text-display-4 {
	margin-bottom: var(--space-200);
	font-family: var(--font-family-display);
	font-size: var(--text-size-700);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-400);
	color: var(--text-major);
	letter-spacing: var(--text-tracking-600);
}

.text-display-5 {
	margin-bottom: var(--space-200);
	font-family: var(--font-family-display);
	font-size: var(--text-size-600);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-400);
	color: var(--text-major);
	letter-spacing: var(--text-tracking-600);
}

.text-display-6 {
	margin-bottom: var(--space-200);
	font-family: var(--font-family-display);
	font-size: var(--text-size-500);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-400);
	color: var(--text-major);
	letter-spacing: var(--text-tracking-600);
}

/* Heading text styles */
.text-h1 {
	margin-top: var(--space-100);
	margin-bottom: var(--space-100);
	font-family: var(--font-family-display);
	font-size: var(--text-size-1000);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-200);
	color: var(--text-major);
	text-transform: uppercase;
	letter-spacing: var(--text-tracking-800);
}

.text-h2 {
	margin-top: var(--space-100);
	margin-bottom: var(--space-100);
	font-family: var(--font-family-display);
	font-size: var(--text-size-900);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-200);
	color: var(--text-major);
	text-transform: uppercase;
	letter-spacing: var(--text-tracking-800);
}

.text-h3 {
	margin-top: var(--space-100);
	margin-bottom: var(--space-100);
	font-family: var(--font-family-display);
	font-size: var(--text-size-800);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-200);
	color: var(--text-major);
	text-transform: uppercase;
	letter-spacing: var(--text-tracking-800);
}

.text-h4 {
	margin-top: var(--space-100);
	margin-bottom: var(--space-100);
	font-family: var(--font-family-display);
	font-size: var(--text-size-700);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-200);
	color: var(--text-major);
	text-transform: uppercase;
	letter-spacing: var(--text-tracking-800);
}

.text-h5 {
	margin-top: var(--space-100);
	margin-bottom: var(--space-100);
	font-family: var(--font-family-display);
	font-size: var(--text-size-600);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-200);
	color: var(--text-major);
	text-transform: uppercase;
	letter-spacing: var(--text-tracking-800);
}

.text-h6 {
	margin-top: var(--space-100);
	margin-bottom: var(--space-100);
	font-family: var(--font-family-display);
	font-size: var(--text-size-500);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-200);
	color: var(--text-major);
	text-transform: uppercase;
	letter-spacing: var(--text-tracking-800);
}

/* Body text styles */
.text-body-major {
	margin-top: 0;
	margin-bottom: var(--space-100);
	font-size: var(--text-size-500);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-400);
	color: var(--text-major);
	letter-spacing: var(--text-tracking-400);
}

body, p,
.text-body-minor {
	margin-top: 0;
	margin-bottom: var(--space-100);
	font-size: var(--text-size-400);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-400);
	color: var(--text-minor);
	letter-spacing: var(--text-tracking-400);
}

.text-body-diminished {
	margin-top: 0;
	margin-bottom: var(--space-100);
	font-size: var(--text-size-300);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-400);
	color: var(--text-diminished);
	letter-spacing: var(--text-tracking-400);
}

.text-body-major:last-child,
.text-body-minor:last-child,
.text-body-diminished:last-child,
.text-caption:last-child,
p:last-child {
	margin-bottom: 0;
}

.text-label-augmented,
.text-label-major,
.text-label-minor,
.text-label-diminished {
	font-family: var(--font-family-display);
	font-size: var(--text-size-400);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-400);
	dominant-baseline: middle;
	text-transform: uppercase;
	letter-spacing: var(--text-tracking-1200);

	@media (prefers-color-scheme: light) {
		font-weight: var(--font-weight-medium);
	}
}

.text-label-augmented {
	color: var(--text-augmented);
}

.text-label-major {
	color: var(--text-major);
}

.text-label-minor {
	color: var(--text-diminished);
}

.text-label-diminished {
	font-size: var(--text-size-300);
	color: var(--text-diminished);
}


/* ===== Link styles ===== */
a {
	outline: var(--border-weight-100) solid transparent;
	outline-offset: var(--space-025);
	transition: all 0.1s linear;
}

a,
a.link-major {
	color: var(--interactive-major);
}

a:hover,
a.link-major:hover {
	color: var(--interactive-major-hover);
	background-color: var(--highlight-hover-major);
}

a:active,
a.link-major:active {
	color: var(--interactive-major-active);
	background-color: var(--highlight-active-major);
}

a.link-augmented {
	color: var(--interactive-augmented);
}

a.link-augmented:hover {
	color: var(--interactive-augmented-hover);
	background-color: var(--highlight-hover-augmented);
}

a.link-augmented:active {
	color: var(--interactive-augmented-active);
	background-color: var(--highlight-active-augmented);
}

a:focus,
a.link-major:focus,
a.link-augmented:focus {
	outline: var(--border-weight-100) solid var(--interactive-augmented);
	outline-offset: var(--space-025);
}

/* ===== Button styles ===== */
button {
	display: flex;
	gap: var(--space-100);
	align-items: center;
	justify-content: center;
	font-family: var(--interactive-font-family);
	font-size: var(--interactive-font-size);
	text-transform: var(--interactive-text-transform);
	letter-spacing: var(--interactive-text-tracking);
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	border: var(--border-weight-200) solid transparent;
	transition: all 0.1s linear;
}

/* Button grouping */
.btn-flex {
	display: flex;
	gap: var(--space-100);
}

.btn-group {
	display: flex;
	flex-direction: row;
}

.btn-group-vertical {
	display: flex;
	flex-direction: column;
}

button:not(.btn-group button),
.btn-group {
	min-height: var(--interactive-min-size);
}

button {
	padding-right: var(--space-300);
	padding-left: var(--space-300);
}

button.btn-icon-left,
.btn-group > button:first-of-type {
	padding-left: var(--space-150);
}

button.btn-icon-right,
.btn-group > button:last-of-type {
	padding-right: var(--space-150);
}

button.btn-icon-only {
	padding-right: var(--space-150);
	padding-left: var(--space-150);
}

/* Augmented buttons */
button.btn-augmented,
.btn-group.btn-augmented {
	color: var(--interactive-augmented-inverse);
	background-color: var(--interactive-augmented);
}

button.btn-augmented,
.btn-group.btn-augmented > button {
	font-weight: var(--interactive-font-weight-augmented);
	color: var(--interactive-augmented-inverse);
	outline: var(--border-weight-200) solid transparent;
	outline-offset: var(--space-negative-050);
}

button.btn-augmented:hover:not([disabled]),
.btn-group.btn-augmented > button:hover:not([disabled]) {
	background-color: var(--interactive-augmented-hover);
}

button.btn-augmented:active:not([disabled]),
.btn-group.btn-augmented > button:active:not([disabled]) {
	background-color: var(--interactive-augmented-active);
}

button.btn-augmented:focus,
.btn-group.btn-augmented > button:focus {
	outline: var(--border-weight-200) solid var(--interactive-augmented-inverse);
	outline-offset: var(--space-negative-050);
}

/* Major buttons */
button.btn-major,
.btn-group.btn-major {
	background-color: var(--interactive-major);
}

button.btn-major,
.btn-group.btn-major > button {
	font-weight: var(--interactive-font-weight-major);
	color: var(--interactive-major-inverse);
	outline: var(--border-weight-200) solid transparent;
	outline-offset: var(--space-negative-050);
}

button.btn-major:hover:not([disabled]),
.btn-group.btn-major > button:hover:not([disabled]) {
	background-color: var(--interactive-major-hover);
}

button.btn-major:active:not([disabled]),
.btn-group.btn-major > button:active:not([disabled]) {
	background-color: var(--interactive-major-active);
}

button.btn-major:focus,
.btn-group.btn-major > button:focus {
	outline: var(--border-weight-200) solid var(--interactive-major-inverse);
	outline-offset: var(--space-negative-050);
}


/* Minor buttons */
button.btn-minor,
.btn-group.btn-minor {
	box-sizing: border-box;
	border: var(--border-weight-200) solid var(--interactive-minor);
}

button.btn-minor,
.btn-group.btn-minor > button {
	font-weight: var(--interactive-font-weight-minor);
	color: var(--interactive-minor);
	outline: var(--border-weight-200) solid transparent;
}

button.btn-minor {
	outline-offset: var(--space-negative-075);
}

.btn-group.btn-minor > button {
	outline-offset: var(--space-negative-050);
}

button.btn-minor:hover:not([disabled]),
.btn-group.btn-minor > button:hover:not([disabled]) {
	background-color: var(--highlight-hover-minor);
}

button.btn-minor:active:not([disabled]),
.btn-group.btn-minor > button:active:not([disabled]) {
	background-color: var(--highlight-active-minor);
}

button.btn-minor:focus,
.btn-group.btn-minor > button:focus {
	outline: var(--border-weight-200) solid var(--interactive-augmented);
}


/* Diminished buttons */
button.btn-diminished,
.btn-group.btn-diminished {
	box-sizing: border-box;
	border: var(--border-weight-200) solid transparent;
}

button.btn-diminished,
.btn-group.btn-diminished > button {
	font-weight: var(--interactive-font-weight-diminished);
	color: var(--interactive-minor);
	outline: var(--border-weight-200) solid transparent;
}

button.btn-diminished {
	outline-offset: var(--space-negative-025);
}

button.btn-diminished:hover:not([disabled]),
.btn-group.btn-diminished > button:hover:not([disabled]) {
	background-color: var(--highlight-hover-minor);
}

button.btn-diminished:active:not([disabled]),
.btn-group.btn-diminished > button:active:not([disabled]) {
	background-color: var(--highlight-active-minor);
}

button.btn-diminished:focus,
.btn-group.btn-diminished > button:focus {
	outline: var(--border-weight-200) solid var(--interactive-augmented);
}

/* Disabled buttons */
button[disabled] {
	cursor: not-allowed;
	border-color: transparent;
	opacity: var(--opacity-disabled);
}

.btn-group-vertical > button.btn-icon-left {
	justify-content: start;
	padding-left: var(--space-100);
}

/* ===== UI controls ===== */

/* Full control area */
label:has(input[type="checkbox"]),
label:has(input[type="radio"]),
label:has(input[type="switch"]) {
	display: flex;
	gap: var(--space-100);
	align-items: center;
	min-width: var(--interactive-min-size);
	min-height: var(--interactive-min-size);
	padding: var(--space-100);
	font-family: var(--interactive-font-family);
	font-size: var(--interactive-font-size);
	font-weight: var(--interactive-font-weight-minor);
	text-transform: var(--interactive-text-transform);
	letter-spacing: var(--interactive-text-tracking);
	cursor: pointer;
	user-select: none;
	outline: var(--border-weight-200) solid transparent;
	outline-offset: var(--space-negative-025);
	transition: all 0.1s linear;
}

label:hover:not(:has([disabled])):has(input[type="checkbox"]),
label:hover:not(:has([disabled])):has(input[type="radio"]),
label:hover:not(:has([disabled])):has(input[type="switch"]) {
	background-color: var(--highlight-hover-minor);
}

label:active:not(:has([disabled])):has(input[type="checkbox"]),
label:active:not(:has([disabled])):has(input[type="radio"]),
label:active:not(:has([disabled])):has(input[type="switch"]) {
	background-color: var(--highlight-active-minor);
}

label:focus-within:has(input[type="checkbox"]),
label:focus-within:has(input[type="radio"]),
label:focus-within:has(input[type="switch"]) {
	outline-color: var(--interactive-augmented);
}

input[type="checkbox"],
input[type="radio"] {
	cursor: pointer;
}

/* General styling  */
input[type="checkbox"],
input[type="radio"] {
	display: flex;
	height: var(--space-200);
	aspect-ratio: 1 / 1;
	padding: var(--space-025);
	appearance: none;
	outline: var(--border-weight-100) solid var(--interactive-diminished);
	background-color: var(--surface-depth-minor);
	transition: all 0.1s linear;
}

input[type="checkbox"]:focus:not([disabled]),
input[type="checkbox"]:hover:not([disabled]),
input[type="radio"]:focus:not([disabled]),
input[type="radio"]:hover:not([disabled]) {
	outline: var(--border-weight-100) solid var(--interactive-augmented-hover);
	background-color: var(--highlight-hover-diminished);
}

input[type="checkbox"]:checked:not([disabled]),
input[type="radio"]:checked:not([disabled]) {
	background-color: var(--surface-depth-augmented);
}

input[type="checkbox"]::before,
input[type="radio"]::before {
	display: block;
	aspect-ratio: 1 / 1;
	content: "";
	transition: all 0.1s ease-in-out;
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
	background-color: var(--interactive-major);
}

label:has(input:disabled) {
	cursor: not-allowed;
	opacity: var(--opacity-disabled);
}

input:disabled {
	cursor: not-allowed;
}

/* Checkbox */
.input-checkbox input[type="checkbox"] {
	margin: 0;
	margin-right: var(--space-100);
	margin-left: var(--space-150);
}

.input-checkbox input[type="checkbox"]::before {
	transform: scaleY(0);
}

.input-checkbox input[type="checkbox"]:checked::before {
	transform: scaleY(1);
}

/* Radio */
input[type="radio"] {
	height: var(--space-150);
	margin: 0;
	margin-right: var(--space-150);
	margin-left: var(--space-150);
	transform: rotate(45deg);
}

input[type="radio"]::before {
	opacity: 0;
	transform: scaleY(1);
	transition: opacity 0.1s ease-in-out;
}

input[type="radio"]:checked::before {
	opacity: 1;
}

/* Switch */
.input-switch input[type="checkbox"] {
	width: var(--space-400);
	padding: var(--space-025);
	margin-right: 0;
}

.input-switch input[type="checkbox"]:checked {
	background-color: var(--highlight-active-diminished);
}

.input-switch input[type="checkbox"]::before {
	width: var(--space-100);
	background-color: transparent;
	border: var(--border-weight-100) solid var(--interactive-minor);
}

.input-switch input[type="checkbox"]:checked::before {
	width: calc(100% - var(--space-100));
	background-color: var(--interactive-major);
	border: none;
	transform: translateX(calc(100% - var(--space-150)));
}


/* ===== Frames ===== */

/* Frame borders */
.frame-augmented:not(hr) {
	border: var(--border-weight-100) solid var(--border-augmented);

	@media (prefers-color-scheme: light) {
		border-width: var(--border-weight-200);
	}
}

hr.frame-augmented {
	border-color: var(--border-augmented);
}

.frame-major:not(hr) {
	border: var(--border-weight-100) solid var(--border-major);
}

hr.frame-major {
	border-color: var(--border-major);
}

.frame-minor:not(hr) {
	border: var(--border-weight-100) solid var(--border-minor);
}

hr.frame-minor {
	border-color: var(--border-minor);
}

.frame-diminished:not(hr) {
	border: var(--border-weight-100) solid var(--border-diminished);
}

hr.frame-diminished {
	border-color: var(--border-diminished);
}

.frame-flex-horizontal {
	display: flex;
	flex-grow: 1;
	flex-direction: row;
	place-items: stretch stretch;
}

.frame-flex-vertical {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	place-items: stretch stretch;
}

/* TIL if <hr> is in a flex row container, it'll become a vertical rule */
hr {
	flex-grow: 0;
	padding: 0;
	margin: 0;
	margin-top: calc(var(--border-weight-100) * -1);
	border-style: solid;
	border-width: var(--border-weight-100) 0 0 0;
}

*[flex-direction="row"] > hr {
	margin-left: calc(var(--border-weight-100) * -1);
	border-width: 0 0 0 var(--border-weight-100);
}

.frame-flex-horizontal > hr {
	border-width: 0 0 0 var(--border-weight-100);

	.frame-augmented > &,
	&.frame-augmented {
		@media (prefers-color-scheme: light) {
			margin-left: calc(var(--border-weight-100) * -1);
			border-width: 0 0 0 var(--border-weight-200);
		}
	}
}

.frame-flex-vertical > hr {
	border-width: var(--border-weight-100) 0 0 0;

	.frame-augmented > &,
	&.frame-augmented {
		@media (prefers-color-scheme: light) {
			margin-top: calc(var(--border-weight-100) * -1);
			border-width: var(--border-weight-200) 0 0 0;
		}
	}
}

.frame-content {
	flex-grow: 1;
	padding: var(--space-150);
}

.frame-content-vertical {
	flex-grow: 0;
	text-align: center;
	writing-mode: sideways-lr;
}

/* ===== Surface depth ===== */
.surface-depth-augmented {
	background-color: var(--surface-depth-augmented);
}

.surface-depth-major {
	background-color: var(--surface-depth-major);
}

.surface-depth-minor {
	background-color: var(--surface-depth-minor);
}

.surface-depth-diminished {
	background-color: var(--surface-depth-diminished);
}


/* ===== Table styles ===== */

table {
	border-collapse: collapse;
}

thead tr th {
	padding: var(--space-150) var(--space-200);
	font-family: var(--font-family-display);
	font-size: var(--text-size-350);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-leading-200);
	color: var(--text-minor);
	text-transform: uppercase;
	letter-spacing: var(--text-tracking-800);
	background-color: var(--surface-depth-augmented);
	border-top: var(--border-weight-100) solid var(--border-minor);
	border-bottom: var(--border-weight-100) solid var(--border-minor);

	@media (prefers-color-scheme: light) {
		font-weight: var(--font-weight-medium);
	}
}

table tbody td {
	padding: var(--space-100) var(--space-200);
}

table tbody tr {
	border-top: var(--border-weight-100) solid var(--border-diminished);
	border-bottom: var(--border-weight-100) solid var(--border-diminished);
	transition: all 0.1s ease-in-out;
}

table tbody tr:hover,
table tbody tr:focus-within {
	background-color: var(--surface-depth-major);
}

/* ===== Animation styles ===== */
@keyframes flash-twice {
	0% {
		opacity: 1;
	}

	20% {
		opacity: 0.5;
	}

	30% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	60% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

.flash-twice {
	animation: flash-twice 0.7s cubic-bezier(0.4, 0, 0.2, 1) 1;
}