@import "typography.css";
@import "template.css";
@import "organism/navbar.css";
@import "organism/header.css";
@import "organism/footer.css";
@import "organism/timeline.css";
@import "molecules/cards.css";
@import "atoms/forms.css";

:root {
	/* 1. Colors
	 -----------*/
	--primary: #8a1538;
	--secondary: oklch(from #F46614 .56 c h);
	--info: #BBCCFF;
	--info: oklch(from var(--primary) l c 258.4);
	--success: #6B8E6F;
	--success: oklch(from var(--primary) l c 152);
	--error: #E63946;
	--error: oklch(from var(--primary) .5 .18 24);
	/* Basics */
	--light: #FFFCFD; /* Fallback */
	--light: oklch(from var(--primary) 1 .05 h);
	--dark: #331122; /* Fallback */
	--dark: oklch(from var(--primary) .1 .1 h);
	/* Defaults */
	--primary-accent: var(--primary);
	--background: var(--light);
	--foreground: var(--dark);
	@media (prefers-color-scheme: dark) {
		--primary: oklch(from #8A1538 calc(l*.75) c h);
		--primary-accent: var(--light);
		--background: var(--dark);
		--foreground: var(--light);
		--info: lightblue;
	}
}

dd svg, h1 svg, h2 svg, h3 svg, h4 svg, h5 svg, h6 svg, p svg, li svg, .tag svg, .btn svg {
	max-height: 1em;
	margin-inline-end: 1em;
	width: auto;
}

.keyboard-navigation {
	/* Position */
	position: fixed;
	top: calc(1em);
	left: -100%; /* Hidden by default */
	z-index: 1000;
	/* Box */
	display: block;
	border-radius: 1em;
	padding: 1em;
	/* Decoration */
	background-color: var(--light);
	color: var(--primary);
	/* Display when focused */
	&:focus-within {
		left: var(--main-padding);
	}
}

img {
	max-width: 100vw;
}

dl.count {
	counter-reset: dc 0;
	dt {
		counter-increment: dc 1;
		&:before {
			content: counter(dc, decimal);
			position: absolute;
			top: .5em;
			font-weight: normal;
			font-size: 2em;
			opacity: .5;
			break-inside: avoid;
			break-after: avoid;
		}
	}
}

dt {
	position: relative;
	margin-top: var(--small-gap);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--small-gap);
	--foreground: var(--primary-accent);
	color: var(--foreground);
	font-weight: bold;
	break-after: avoid;
	&:after {
		content: "";
		display: block;
		flex-grow: 1;
		height: 1px;
		background: var(--foreground);
		break-after: avoid;
	}
}

.example {
	--foreground: var(--info);
	color: var(--foreground);
	font-style: italic;
}

details.note {
	padding-inline-start: var(--small-gap);
	border-inline-start: 1px solid var(--primary);
	summary {
		font-weight: bold;
	}
	&:not([open]) summary:after {
		content: "\A0[...]";
		font-weight: normal;
		color: var(--info);
	}
	@media print {
		border: 0;
		padding: 0;
	}
}

code {
	border-radius: 2px;
	background: #F5F5F5;
	color: var(--secondary);
	font-style: normal;
}

dfn {
	font-weight: bold;
}

summary {
	cursor: pointer;
	margin: var(--small-gap) 0;
}

.tags {
	text-align: start;
}
.tag {
	display: inline-block;
	margin: .25em 0;
	padding: .25em .5em;
	border: 1px solid var(--foreground);
	background-color: color-mix(in oklch, var(--background), var(--foreground) 5%);
	border-radius: 1em;
	text-decoration: none;
	&:not(.large) {
		font-size: small;
	}
}