@import '$lib/atkinson-hyperlegible.css';

:root {
	--background-color: #010502;
	/* used for gradients */
	--background-color-transparent: #01050200;

	--background-color-alt: #111;
	--background-color-alt-2: #222;
	--background-color-alt-3: #333;

	--text-color: #f7f4f4;
	--text-color-alt: #ddd;
	--text-color-alt-2: #bbb;
	--text-color-alt-3: #999;

	--accent-color: #0dc7f9;

	--warning-color: #e6b450;
	--error-color: #d95757;

	--text-font: 'Atkinson Hyperlegible', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html,
body,
#page {
	height: 100%;
	width: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: var(--text-font);
	margin: 0;
}

button,
.button {
	background-color: var(--background-color-alt);
	border: 1px solid var(--background-color-alt-3);
	color: var(--text-color);
	font-size: inherit;
	border-radius: 0.25em;
	padding: 0.2em 0.6em;
	cursor: pointer;
	font-family: inherit;
	box-shadow: 0 0.1em 0.2em #000;
	text-decoration: none;
	transition: background-color 200ms;
}
button:hover,
.button:hover {
	background-color: var(--background-color-alt-2);
}

p {
	margin-top: 0;
}

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

.center {
	width: fit-content;
	margin: 0 auto;
}

hr {
	background-color: var(--background-color-alt);
	border-color: var(--background-color-alt);
	width: 90%;
	margin: 1rem auto;
}

img {
	max-height: 100%;
}

pre {
	white-space: pre-wrap;
}
.token.keyword {
	color: #ff8f40;
}
.token.function,
.token.builtin {
	color: #ffb454;
}
.token.number {
	color: #d2a6ff;
}
.token.string {
	color: #aad94c;
}

body.light-theme,
body.extra-light-theme {
	--background-color: #fff;
	--background-color-transparent: #fff0;
	--background-color-alt: #f7f7f7;
	--background-color-alt-2: #eee;
	--background-color-alt-3: #ddd;

	--text-color: #000;
	--text-color-alt: #333;
	--text-color-alt-2: #666;
	--text-color-alt-3: #999;
}
body.extra-light-theme {
	filter: brightness(1) opacity(0.1);
}
body.extra-dark-theme {
	background-color: #000;
	filter: brightness(0.1);
}

body.sandcat-mode {
	--background-color: transparent;
	--background-color-alt: #0006;
}
