@import url("container.css");
@import url("fonts.css");
@import url("list.css");
@import url("target.css");
@import url("text.css");

@import url("components/anchor.css");
@import url("components/button.css");
@import url("components/color-theme.css");
@import url("components/footer.css");
@import url("components/header.css");
@import url("components/link.css");
@import url("components/list.css");
@import url("components/note.css");

@import url("default/blockquote.css");
@import url("default/button.css");
@import url("default/code.css");
@import url("default/hr.css");
@import url("default/svg.css");

:root {
	--header-height: 48px;
	--scroll-padding-top: 24px;
	--article-horizontal-padding: 16px;
	--selection-background-color: var(--external-link-hover-color);
	--selection-color: var(--text-color-light);
	--code-background-color: #0f0f0f;
	--code-color: #e0e0e0;

	--black: #000000;

	--log-timestamp-color: #5e787e;
	--log-trace-color: #ffffff;
	--log-debug-color: #b1bac4;
	--log-info-color: #79c0ff;
	--log-warning-color: #e3b341;
	--log-error-color: #ffa198;

	/* Light theme */
	--primary-color-light: #f0f0f0;
	--secondary-color-light: #989898;
	--tertiary-color-light: #c9c9c9;
	--text-color-light: #0a0a0a;
	--text-hover-color-light: #535353;
	--link-border-color-light: #b2b2b2;
	--link-hover-background-color-light: #d2d2d2;
	--target-background-color-light: #f7e282;
	--external-link-color-light: #4698ce;
	--external-link-hover-color-light: #69bae9;
	--note-color-light: #857b56;
	--note-error-color-light: #855651;
	--note-info-color-light: #255f85;
	--note-warning-color-light: #6f5621;
	--highlight-color-light: #0a0a0a;
	--highlight-class-color-light: #953800;
	--highlight-comment-color-light: #6a737d;
	--highlight-function-color-light: #8250df;
	--highlight-keyword-color-light: #cf222e;
	--highlight-macro-color-light: #8250df;
	--highlight-namespace-color-light: #953800;
	--highlight-number-color-light: #005cc5;
	--highlight-operator-color-light: #cf222e;
	--highlight-string-color-light: #032f62;
	--highlight-type-color-light: #cf222e;

	/* Dark theme */
	--primary-color-dark: #0a0a0a;
	--secondary-color-dark: #3a3a3a;
	--tertiary-color-dark: #535353;
	--text-color-dark: #a5a5a5;
	--text-hover-color-dark: #c2c2c2;
	--link-border-color-dark: #3a3a3a;
	--link-hover-background-color-dark: #1a1a1a;
	--target-background-color-dark: #2e2709;
	--external-link-color-dark: #5cafe7;
	--external-link-hover-color-dark: #82cef9;
	--note-color-dark: #cabc82;
	--note-error-color-dark: #ffa198;
	--note-info-color-dark: #40b4ff;
	--note-warning-color-dark: #d4a238;
	--highlight-color-dark: #d2d2d2;
	--highlight-class-color-dark: #ffa657;
	--highlight-comment-color-dark: #8b949e;
	--highlight-function-color-dark: #d2a8ff;
	--highlight-keyword-color-dark: #ff7b72;
	--highlight-macro-color-dark: #d2a8ff;
	--highlight-namespace-color-dark: #ffa657;
	--highlight-number-color-dark: #79c0ff;
	--highlight-operator-color-dark: #ff7b72;
	--highlight-string-color-dark: #a5d6ff;
	--highlight-type-color-dark: #ff7b72;

	/* Default theme */
	--primary-color: var(--primary-color-light);
	--secondary-color: var(--secondary-color-light);
	--tertiary-color: var(--tertiary-color-light);
	--text-color: var(--text-color-light);
	--text-hover-color: var(--text-hover-color-light);
	--link-border-color: var(--link-border-color-light);
	--link-hover-background-color: var(--link-hover-background-color-light);
	--target-background-color: var(--target-background-color-light);
	--external-link-color: var(--external-link-color-light);
	--external-link-hover-color: var(--external-link-hover-color-light);
	--note-color: var(--note-color-light);
	--note-error-color: var(--note-error-color-light);
	--note-info-color: var(--note-info-color-light);
	--note-warning-color: var(--note-warning-color-light);
	--highlight-color: var(--highlight-color-light);
	--highlight-class-color: var(--highlight-class-color-light);
	--highlight-comment-color: var(--highlight-comment-color-dark);
	--highlight-function-color: var(--highlight-function-color-light);
	--highlight-keyword-color: var(--highlight-keyword-color-light);
	--highlight-macro-color: var(--highlight-macro-color-light);
	--highlight-namespace-color: var(--highlight-namespace-color-light);
	--highlight-number-color: var(--highlight-number-color-light);
	--highlight-operator-color: var(--highlight-operator-color-light);
	--highlight-string-color: var(--highlight-string-color-light);
	--highlight-type-color: var(--highlight-type-color-light);
}

:focus-visible {
	outline-color: var(--external-link-hover-color);
	outline-offset: 2px;
	outline-style: dashed;
}

::selection {
	background-color: var(--selection-background-color);
	color: var(--selection-color);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + var(--scroll-padding-top));
}

body {
	margin: 0;
	background-color: var(--primary-color, var(--primary-color-light));
	color: var(--text-color);
	word-wrap: break-word;
	font-family: "PP Radio Grotesk", "Arial", sans-serif;
	font-size: 1.1rem;
}