@import url("layouts/grid.css");
@import url("containers/card.css");
@import url("containers/media.css");
@import url("tables.css");
@import url("syntax-highlighting.css");
@import url("components/linklist.css");
@import url("components/bluesky-post.css");

:root {
	/* #region Palette */
	--color-base: light-dark(oklch(41.91% 20% 80deg), oklch(41.91% 20% 180deg));
	--neutral-50: oklch(from var(--color-base) 96% 0.01 h);
	--neutral-100: oklch(from var(--color-base) 93% 0.01 h);
	--neutral-150: oklch(from var(--color-base) 85% 0.01 h);
	--neutral-200: oklch(from var(--color-base) 80% 0.01 h);
	--neutral-300: oklch(from var(--color-base) 70% 0.01 h);
	--neutral-400: oklch(from var(--color-base) 60% 0.01 h);
	--neutral-500: oklch(from var(--color-base) 50% 0.01 h);
	--neutral-600: oklch(from var(--color-base) 40% 0.01 h);
	--neutral-700: oklch(from var(--color-base) 30% 0.01 h);
	--neutral-750: oklch(from var(--color-base) 25% 0.01 h);
	--neutral-800: oklch(from var(--color-base) 20% 0.01 h);
	--neutral-850: oklch(from var(--color-base) 15% 0.01 h);
	--neutral-900: oklch(from var(--color-base) 10% 0.01 h);
	--neutral-950: oklch(from var(--color-base) 5% 0.01 h);
	--accent-50: oklch(from var(--color-base) 96% 0.05 h);
	--accent-100: oklch(from var(--color-base) 93% 0.06 h);
	--accent-150: oklch(from var(--color-base) 85% 0.07 h);
	--accent-200: oklch(from var(--color-base) 80% 0.08 h);
	--accent-300: oklch(from var(--color-base) 70% 0.09 h);
	--accent-400: oklch(from var(--color-base) 60% 0.1 h);
	--accent-500: oklch(from var(--color-base) 50% 0.11 h);
	--accent-600: oklch(from var(--color-base) 40% 0.12 h);
	--accent-700: oklch(from var(--color-base) 30% 0.13 h);
	--accent-750: oklch(from var(--color-base) 25% 0.14 h);
	--accent-800: oklch(from var(--color-base) 20% 0.15 h);
	--accent-850: oklch(from var(--color-base) 15% 0.16 h);
	--accent-900: oklch(from var(--color-base) 10% 0.17 h);
	--accent-950: oklch(from var(--color-base) 5% 0.18 h);

	/* #endregion */

	/* #region typography settings  */

	--headline-font-family: ui-rounded, "Hiragino Maru Gothic ProN", quicksand,
		comfortaa, manjari, "Arial Rounded MT", "Arial Rounded MT Bold", calibri,
		source-sans-pro, sans-serif;
	--base-font-family: charter, "Bitstream Charter", "Sitka Text", cambria, serif;
	--step--2: clamp(0.72rem, 0.958rem + -0.3071vw, 0.8889rem);
	--step--1: clamp(0.9rem, 1.0409rem + -0.1818vw, 1rem);
	--step-0: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
	--step-1: clamp(1.2656rem, 1.2081rem + 0.2557vw, 1.4063rem);
	--step-2: clamp(1.4238rem, 1.2872rem + 0.6072vw, 1.7578rem);
	--step-3: clamp(1.6018rem, 1.3582rem + 1.0827vw, 2.1973rem);
	--step-4: clamp(1.802rem, 1.4156rem + 1.7174vw, 2.7466rem);
	--step-5: clamp(2.0273rem, 1.4521rem + 2.5563vw, 3.4332rem);

	/* #endregion */

	/* #region foundational Colors */
	color-scheme: light dark;

	--color-background: light-dark(var(--neutral-100), var(--neutral-800));
	--color-text-normal: light-dark(var(--neutral-800), var(--neutral-100));
	--color-text-quiet: light-dark(var(--neutral-500), var(--neutral-200));
	--color-surface-raised: light-dark(var(--neutral-50), var(--neutral-750));
	--color-surface-normal: light-dark(var(--neutral-100), var(--neutral-800));
	--color-surface-lowered: light-dark(var(--neutral-150), var(--neutral-850));
	--icon-bright: light-dark(var(--neutral-50), var(--accent-10));
	--icon-dark: light-dark(var(--accent-500), var(--neutral-800));

	/* #endregion */
	--logo-path: url("/static/icons/beer-48.svg");
}

@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
}

:root[data-mode="light"] {
	color-scheme: light;
}

:root[data-mode="dark"] {
	color-scheme: dark;
}

/* #region Page Header */

body > header,
body > footer {
	display: flex;
	flex-direction: column;
}

header ul,
footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	font-size: var(--step-0);
	list-style: none;
}

body.tutorial {
	--logo-path: url("/static/icons/beer-24.svg");
}

body.thoughts {
	--logo-path: url("/static/icons/beer-32.svg");
}

body.opinion {
	--logo-path: url("/static/icons/beer-18.svg");
}

body.about {
	--logo-path: url("/static/animations/flame.svg");
}

#home {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	align-items: center;
	padding: 0.5em;
	font-size: var(--step--1);
}

#home::before {
	display: block;
	width: 64px;
	height: 64px;
	content: "";
	background-color: #000;
	background-image: var(--logo-path);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 48px;
	border-radius: 60px;
}

/* #endregion */

* {
	box-sizing: border-box;
}

html,
body {
	font-size: var(--step-0);
}

img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

body {
	padding: 0;
	font-family: var(--base-font-family);
	font-size: var(--step-0);
	font-weight: normal;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-text-normal);
	background-color: var(--color-background);
}

p:has(> relative-time) {
	font-size: var(--step-0);
	font-weight: 100;
	color: var(--color-text-quiet);
}

hgroup > p {
	font-size: var(--step-1);
	font-style: italic;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-text-quiet);
}

p:not(:last-child) {
	margin: 0;
	margin-block-end: 0.3lh;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin-block-end: 0.3lh;
	font-family: var(--headline-font-family);
	font-weight: normal;
	line-height: 1.4;
	text-indent: -0.1ch;
	letter-spacing: -0.02ch;
}

h1 {
	font-size: var(--step-3);
	font-weight: 800;
}

h2 {
	font-size: var(--step-2);
	font-weight: 800;
}

h3 {
	font-size: var(--step-1);
	font-weight: 600;
}

h4 {
	font-size: var(--step-0);
	font-weight: 600;
}

hgroup {
	margin-bottom: 1lh;
}

hgroup > h1 {
	font-size: var(--step-4);
}

main {
	max-width: 82ch;
	padding-inline: 1em;
	margin: auto;
}

svg {
	height: 60vmin;
}

/* inline elements */
a {
	color: currentcolor;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

strong {
	font-weight: 700;
}

/* lists */

/* definition lists */

dt {
	margin: 0;
	font-family: var(--headline-font-family);
	font-weight: 800;
	color: var(--color-text-quiet);

	&::after {
		content: ":";
	}
}

dd dt {
	margin-block-start: 0.5lh;
}

dd {
	padding-inline-start: 1ch;
	margin: 0;
	margin-inline-start: 0.5ch;
	font-weight: 100;
	border-inline-start: 2px solid rgb(from var(--color-text-normal) r g b / 30%);
}

.h-card {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	vertical-align: middle;
}

.h-card img {
	width: 1lh;
	height: 1lh;
	border-radius: 1lh;
	opacity: 1;
}

.linklist {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	width: fit-content;
	font-size: var(--step--1);
}

body > header {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 82ch;
	padding-inline: 1em;
	margin: auto;
	color: var(--color-text-quiet);
}

body > footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 82ch;
	padding-block-start: 1ch;
	padding-inline: 1em;
	margin: auto;
	margin-block-start: 1ch;
	color: var(--color-text-quiet);
	border-block-start: 1px solid currentcolor;
}

code {
	tab-size: 3ch;
}

p > code {
	padding-inline: 0.25em;
	background-color: var(--color-surface-raised);
	border: 1px solid var(--color-text-quiet);
	border-radius: 0.2em;
}

.callout {
	--color-callout: white;

	padding: 0.5em 1em;
	margin-block-end: 1em;
	background-color: rgb(from var(--color-callout) r g b / 30%);
	border: 1px solid rgb(from var(--color-callout) r g b / 50%);
	border-radius: 0.5em;
	box-shadow: inset 0 0 10px rgb(from var(--color-callout) r g b / 30%);
}

.note {
	--color-callout: white;
}

.success {
	--color-callout: green;
}

.warning {
	--color-callout: darkorange;
}

.danger {
	--color-callout: red;
}