@layer fonts {
	:root {
		--font-family-head: "YoungSerif", serif;
		--font-family-base: "OfficeCodePro", sans-serif;

		--font-weight-head-medium: 400;
		--font-weight-head-bold: 600;
		--font-weight-base-medium: 400;
		--font-weight-base-bold: 500;

		--radius-m: 8px;
		--radius-l: 14px;

		--shadow-card: 0 0 1px oklch(from var(--color-background-contrast) l c h / 0.12),
	  0px 0px 5px -3px oklch(from var(--color-background-contrast) l c h / 0.4),
	  2px 2px 4px -3px oklch(from var(--color-background-contrast) l c h / 0.4)
		;

		--shadow-button: 0 0 1px var(--color-background-contrast),
	 -2px -2px 5px -3px oklch(from var(--color-background-contrast) l c h / 0.4),
	  2px 2px 4px -3px oklch(from var(--color-background-contrast) l c h / 0.4)
		;

		--color-brand: oklch(0.62 0.21 42.51);
		--color-danger: var(--color-brand);
		--color-focus: oklch(0.5 0.2 23);
		--color-link:  oklch(0.66 0.14 250);
		--color-base-normal: oklch(0.1 0 0);
		--color-background-lvl-5: oklch(0.96 0 0);
		--color-background-lvl-10: oklch(0.98 0 0);
		--color-background-lvl-15: oklch(1 0 0);
		--color-contrast: oklch(1 0 0);
		--color-background-contrast: oklch(0 0 0);
		--color-background-constrast-muted: oklch(0.8 0 0);
	}

	@media screen and (prefers-color-scheme: dark) {
		:root {
			--color-brand: oklch(0.55 0.17 43.92);
			--color-background-lvl-5: oklch(0.25 0 0);
			--color-background-lvl-10: oklch(0.2 0 0);
			--color-background-lvl-15: oklch(0.35 0 0);
			--color-contrast: oklch(0 0 0);
			--color-background-contrast: oklch(1 0 0);
			--color-base-normal: oklch(0.87 0 0);
		}
	}

	html, body {
		font-family: var(--font-family-base);
		background: var(--color-background-lvl-5);
		color: var(--color-base-normal);
		font-weight: var(--font-weight-base-medium);
		font-size: 100%;
		line-height: 1.6rem;
	}

	a {
		color: var(--color-link);

		&:visited {
			color: var(--color-link);
		}
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-family-head);
		font-weight: var(--font-weight-head-bold);
		margin: 1.6rem 0 1rem;
	}

	h1 {
		font-size: 1.8rem;
	}

	h2 {
		font-size: 1.6rem;
	}

	h3 {
		font-size: 1.4rem;
	}

	h4 {
		font-size: 1.2rem;
	}

	h5, h6 {
		font-size: 1rem;
	}

	h6 {
		font-weight: var(--font-weight-head-medium);
		font-style: italic;
	}
}


@layer {
	.logo {
		& > a,
		& > a:visited {
			color: inherit;
			text-decoration: none;
		}

		& span {
			color: var(--color-brand);
		}
	}

	.bubble {
		background: var(--color-background-lvl-15);
		padding: 0.8rem 1.25rem;
		border-radius: var(--radius-l);
		&:is(a) {
			&:hover,
			&:active,
		  &:focus {
					box-shadow:
					0 0 1px var(--color-background-contrast),
				 -2px -2px 7px -2px oklch(from var(--color-background-contrast) l c h / 0.4),
				  2px 2px 6px -2px oklch(from var(--color-background-contrast) l c h / 0.4)
					;
			}
		}

		& > h1,
		& > h2 {
			margin-top: 0;
		}
	}


	.card,
	.media-item,
	dialog {
		background: var(--color-background-lvl-15);
		padding: 1rem;
		border-radius: var(--radius-m);
		box-shadow: var(--shadow-card);
		border: none;
	}

	form {
		display: grid;
		justify-items: start;
		gap: 1rem;

		& label {
			display: grid;
			font-weight: var(--font-weight-base-bold);
			width: 100%;
			gap: 1rem;
			grid-template-columns: min-content 1fr;
			border-bottom: 1px solid var(--color-background-contrast);
			height: 1.5lh;
			align-items: center;

			&:has(textarea),
		  &:has([role="textbox"]){
				height: auto;
				grid-template-columns: 1fr;

				& textarea {
					width: 100%;
					min-height: 400px;
				}
			}

			& > span {
				white-space: nowrap;
			}

			& input {
				background: transparent;
				outline: none;
				color: var(--color-base-normal);
				font-weight: var(--font-weight-base-bold);
				--local-border: 1px solid var(--color-background-contrast);
				border: none;
		    padding: 0 0.5rem;
		    align-self: stretch;

				&:active,
				&:focus {
					border-left: var(--local-border);
					border-right: var(--local-border);
					border-top: var(--local-border);
				}
			}
		}

		& .form__actions {
			display: flex;
	    justify-content: end;
	    width: 100%;
		}
	}

	.button {
		display: inline-flex;
		align-items: center;
		width: auto;
		justify-content: center;
		background: var(--color-background-contrast);
		color: var(--color-contrast);
		border: none;
		outline: none;
		border-radius: var(--radius-m);
		font-family: var(--font-family-head);
		font-weight: var(--font-weight-head-medium);
		font-size: 1.2rem;
		line-height: 1;
		padding: 0.75rem 1.5rem;
		cursor: pointer;
		text-decoration: none;
		white-space: nowrap;


		&:hover,
		&:active,
	  &:focus {
			outline: 3px solid var(--color-link);
		}

		&.button--secondary {
			background: var(--color-background-lvl-5);
			box-shadow: 0 0 0 2px var(--color-background-contrast);
			color: var(--color-base-normal);
		}

		&.button--danger {
			background: var(--color-background-lvl-5);
			box-shadow: 0 0 0 2px var(--color-background-constrast-muted);
			color: var(--color-base-normal);
			font-size: 1rem;
			padding: 0.5rem 1rem;
			&:hover,
			&:active,
		  &:focus {
				outline: 3px solid var(--color-brand);
			}
		}
	}

	hr {
		border: none;
		outline: none;
		width: 100%;
		display: flex;
		margin: 1rem 0;
		justify-content: center;
		height: 1px;
		&:after {
			content: '';
			width: min(300px, 80%);
			height: 1px;
			background: var(--color-background-constrast-muted);
		}
	}
	hr.hr--invisible {
		&:after {
			content: none;
		}
	}

	.error {
		color: var(--color-danger);
	}

	dialog {
		padding: 1rem;
		display: grid;
		gap: 1rem;
		& p {
			margin: 0;
		}

		& li {
			display: list-item;
		}
	}
}