website/_src/assets/css/theme-light.css

@media (prefers-color-scheme: light) {
	article {
		border-color: var(--primary-300);
		background-color: var(--primary-200);
		color: var(--primary-dark-300);

		& aside {
			box-shadow: inset 0 0 0 2px var(--primary-500);
			background-color: var(--primary-300);
		}
		& figure {
			color: var(--primary-dark-400);
			border-color: var(--primary-600);
			background-color: var(--primary-300);
		}

		& s,
		u {
			text-decoration-color: color-mix(in lch, red, var(--primary-500) 20%);
		}

		& code:not(pre *) {
			background-color: var(--primary-400);
		}

		& pre {
			transition: background-color var(--trans), border-color var(--trans);
			background-color: var(--primary-100);

			&:hover {
				border-color: var(--primary);
				background-color: var(--primary-400);
			}
		}

		& pre,
		code {
			border-color: var(--primary-400);
		}
	}

	body {
		background-color: var(--primary-100);
		color: var(--primary-dark-300);
		& a:not(article *) {
			color: var(--primary);
			border-color: var(--primary-600);
			background-color: var(--primary-400);
			&:is(:hover, :focus) {
				color: var(--primary-dark-500);
				border-color: currentColor;
				background-color: var(--primary-500);
			}
		}
		& > nav {
			border-right: 1px solid var(--primary);
			&::before,
			::after {
				background-color: var(--primary);
			}
		}

		&::after {
			background-color: var(--primary);
		}

		& details {
			background-color: var(--primary-100);
			&:not([open]) summary {
				color: var(--primary);
			}
		}

		& details[open] {
			border-color: var(--primary);
			background-color: var(--primary-300);
			color: var(--primary-dark-300);

			& summary {
				background-color: inherit;
			}

			& a[aria-current] {
				color: var(--primary-500);
				border-color: var(--primary-dark-500);
				background-color: var(--primary-dark-500);
			}
		}
	}
	/* blog.css */
	article {
		& [aria-label="Postscript"]::after {
			background-color: var(--primary);
		}
		& p[aria-label="Post warning"] {
			border-color: currentColor;
			background-color: var(--primary-dark-200);
			color: var(--primary);
		}

		& [aria-label="Addendum"] {
			box-shadow: inset 0 0 0 2px var(--primary);
			border-image-source: linear-gradient(
				45deg,
				var(--primary),
				var(--primary-600),
				var(--primary)
			);
			background-color: var(--primary-400);
		}
	}

	#posts {
		& p:not(:last-child) {
			color: var(--primary-dark-700);
		}
	}
	/* gallery.css */
	#artworks {
		& a {
			transition: color var(--trans), background-color var(--trans),
				border-color var(--trans);

			& figure {
				color: var(--primary-dark-400);
				border-color: var(--primary-600);
				background-color: var(--primary-300);

				& time {
					color: var(--primary-dark-500);
				}

				& figcaption {
					color: var(--primary-dark-500);
				}

				&:is(:hover, :focus) {
					border-color: currentColor;
					background-color: var(--primary-500);
				}
			}
		}
	}
	/* home.css */
	#badges a:is(:hover, :focus) img {
		filter: drop-shadow(4px 6px 0 var(--primary-500));
	}
	#collection {
		& a:is(:hover, :focus) {
			box-shadow: 0 0 0 1px currentColor;
			background-color: var(--primary-500);
		}
		& img {
			box-shadow: 0 0 0 1px
				color-mix(in lch, transparent, var(--primary-dark-500) 30%);
		}
	}
}