html {
	color-scheme: light dark;
}

html {
	--font-main: 'Space Grotesk', sans-serif;
	--font-mono: 'Space Mono', monospace;
	--border-width: 2px;

	/* Title */
	--size-title: 1.6rem;
	--weight-title: 700;

	/* Field label */
	--size-field-label: 0.9rem;
	--weight-field-label: 500;

	/* Paragraph */
	--size-paragraph: 1rem;
	--weight-paragraph: 500;

	/* Details */
	--size-details: 0.85rem;
	--weight-details: 700;

	/* Big Figure */
	--size-big-figure: 2.4rem;
	--weight-big-figure: 500;

	/* Big button */
	--size-big-button: 1.2rem;
	--weight-big-button: 700;

	/* Colors */
	--diamond: #25c9ff;
	--diamond-transparent: hsla(195, 100%, 57%, 50%);
	--fg: rgba(0, 0, 0, 1);
	--bg: rgba(255, 255, 255, 1);
	--muted: rgba(0, 0, 0, 0.75);
	--bg-muted: rgba(0, 0, 0, 0.25);
	--cobalt: #006384;
	--mushroom: rgba(214, 37, 37, 1);
	--ice: rgba(194, 232, 252, 1);
	--blood: rgba(154, 12, 12, 1);
	--rose: rgba(245, 180, 180, 1);
	--acid: rgba(89, 237, 121, 1);
	--cactus: rgb(1, 100, 34);
	--gold: rgba(230, 176, 36, 1);
	--safran: rgba(179, 109, 4, 1);
	--plaster: rgba(252, 229, 169, 1);
	--moss: rgb(201, 248, 211);
	--sky: #007baf;
}

@media (prefers-color-scheme: dark) {
	html[data-dark-mode='null'] {
		--fg: rgba(255, 255, 255, 1);
		--muted: rgba(255, 255, 255, 0.75);
		--bg-muted: rgba(255, 255, 255, 0.25);
		--bg: rgb(26, 28, 30);
		--card-bg: #33373b;
		--ice: rgb(28, 60, 75);
		--blood: rgb(240, 50, 50);
		--rose: rgb(36, 4, 4);
		--cobalt: rgb(35, 173, 233);
		--cactus: rgb(95, 228, 124);
		--moss: rgb(7, 54, 22);
		--sky: #0096d6;
		--gold: rgba(230, 176, 36, 1);
		--plaster: rgb(54, 38, 14);
		--safran: rgb(235, 186, 62);
	}
}

html[data-dark-mode='true'] {
	--fg: rgba(255, 255, 255, 1);
	--muted: rgba(255, 255, 255, 0.75);
	--bg-muted: rgba(255, 255, 255, 0.25);
	--bg: rgb(26, 28, 30);
	--card-bg: #33373b;
	--ice: rgb(28, 60, 75);
	--blood: rgb(240, 50, 50);
	--rose: rgb(36, 4, 4);
	--cobalt: rgb(35, 173, 233);
	--cactus: rgb(95, 228, 124);
	--moss: rgb(7, 54, 22);
	--sky: #0096d6;
	--gold: rgba(230, 176, 36, 1);
	--plaster: rgb(54, 38, 14);
	--safran: rgb(235, 186, 62);
}

.typo-title,
h1,
h2 {
	font-size: var(--size-title);
	line-height: 0.95;
}

.typo-field-label {
	font-size: var(--size-field-label);
	font-weight: var(--weight-field-label);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	/* font-feature-settings: "ss04" 1; */
}

.typo-big-figure {
	font-size: var(--size-big-figure);
	font-weight: var(--weight-big-figure);
}

.typo-paragraph,
p {
	font-size: var(--size-paragraph);
	font-weight: var(--weight-paragraph);
	letter-spacing: normal;
	text-transform: none;
}

.typo-details {
	font-size: var(--size-details);
	font-weight: var(--weight-details);
}

.typo-big-button {
	font-size: var(--size-big-button);
	font-weight: var(--weight-big-button);
}

a {
	text-decoration: none;
	color: unset;
}

p > a:not([class^='button']),
dd > a,
a.in-body {
	color: var(--sky);
	text-decoration: underline;
	text-underline-offset: 0.5ch;
	text-decoration-thickness: 0.125em;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
body {
	margin: 0;
	padding: 0;
}

ul {
	padding-left: 1em;
}

* {
	font-family: var(--font-main);
	color: var(--fg);
}

body {
	background-color: var(--bg);
}

[data-tippy-root] .tippy-box {
	background-color: var(--ice);
}

[data-tippy-root] .tippy-box[data-placement^='top'] .tippy-arrow::before {
	border-top-color: var(--ice);
}

[data-tippy-root] .tippy-box[data-placement^='bottom'] .tippy-arrow::before {
	border-bottom-color: var(--ice);
}

[data-tippy-root] .tippy-box[data-placement^='left'] .tippy-arrow::before {
	border-left-color: var(--ice);
}

[data-tippy-root] .tippy-box[data-placement^='right'] .tippy-arrow::before {
	border-right-color: var(--ice);
}

[data-tippy-root] .tippy-content {
	color: var(--cobalt);
}

ins {
	background-color: var(--moss);
	color: var(--cactus);
	text-decoration: none;
}

del {
	background-color: var(--rose);
	color: var(--blood);
}

hr {
	width: 80%;
	max-width: 1000px;
	border: var(--border-width) solid var(--bg-muted);
	border-radius: 1000px;
}

code {
	color: currentColor;
	font-family: var(--font-mono);
	font-weight: bold;
}