/* A custom function that returns one of two values depending on light or dark mode being used */
/* Note that this requires storing the color-scheme in a --scheme custom property */
@function --light-dark(--light, --dark) {
	/* Default to the --light value */
	result: var(--light);
	
	/* If the container is set to "dark", use the --dark value */
	@container style(--scheme: dark) {
		result: var(--dark);
	}
}

/* Default --scheme value to use, this is based on the system value */
:root {
	--root-scheme: light;
	--scheme: light;

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

/* Allow overriding the --scheme from the data-scheme HTML attribute */
/* Note that I am using @scope to play nice with nested light/dark contexts */
@scope ([data-scheme]) {
	:scope {
		--scheme: attr(data-scheme type(<custom-ident>));
	}
	
	/* When set to system, use the --root-scheme value (which is determined by the MQ) */
	:scope[data-scheme="system"] {
		--scheme: var(--root-scheme);
	}
	
	/* To allow the native light-dark to work */
	:scope > * {	
		color-scheme: var(--scheme);
	}
	
	/* Because I chose to use these elements as extra wrapper elements, I can just display its contents */
	display: contents;
}

/* The color-scheme dependent declarations */
[data-scheme] > * {
	color: light-dark(#333, #e4e4e4);
	background-color: light-dark(aliceblue, #333);
	
	border: 4px --light-dark(dashed, dotted) currentcolor;
	font-weight: --light-dark(500, 300);
	font-size: --light-dark(16px, 18px);
	
	transition: all 0.25s ease, border-style 0.25s allow-discrete;
}

.demo {
	width: 60ch;
	text-align: center;
	text-wrap: balance;
	padding: 1em;
	margin: 1em auto;
}

@layer layout {
	* {
		box-sizing: border-box;
	}

	:root {
		font-family: "Literata", serif;
		background: #fff;
	}

	body,
	html {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	body {
		display: grid;
		place-content: safe center;
	}
}

@layer warning {
	.warning {
		padding: 1em;
		margin: 1em 0;
		border: 1px solid #ccc;
		background: rgba(255 255 205 / 0.8);
		color: black;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 1em;
		right: 1em;
	}

	.warning > :first-child {
		margin-top: 0;
	}

	.warning > :last-child {
		margin-bottom: 0;
	}

	.warning a {
		color: blue;
	}
	.warning--info {
		border: 1px solid #123456;
		background: rgb(205 230 255 / 0.8);
	}
	.warning--alarm {
		border: 1px solid red;
		background: #ff000010;
	}
}