@layer reset, base;

@layer base {
	:root {
		font-family: system-ui;
	}

	body {
		background-color: oklch(27.9% 0.041 260.031);
		color: white;
		min-height: 100svh;
		display: flex;
		flex-direction: column;
	}
	
	main {
		background-color: oklch(42.4% 0.199 265.638);
		max-width: 100ch;
		width: 100%;
		padding: 4rem;
		margin-inline: auto;
		height: 100%;
		flex: 1;
	}

	.days {
		margin-block-start: 1rem;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
		list-style: none;
		gap: 1em;
		padding: 0;
	}

	.day {
		background-color: oklch(82.8% 0.189 84.429);
		text-decoration: none;
		border-radius: 1000vw;
		padding-inline: 1em;
		padding-block: 0.5em;
		display: block;
		color: oklch(27.9% 0.041 260.031);
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		text-align: center;

		&:disabled, &:has(:disabled) {
			background-color: oklch(70.5% 0.015 286.067);
		}
	}

	.upload {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-block-start: 1rem;
	}

	.uploaded {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;

		& img {
			max-width: 120px;
			aspect-ratio: 1 / 1;
			object-fit: cover;
		}
	}

	h2 {
		margin-block: 1rem;
	}

	.preview {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;

		& div {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			max-width: 120px;
		}

		& img {
			max-width: 100%;
			aspect-ratio: 1 / 1;
			object-fit: cover;
		}

		& button {
			background-color: oklch(70.4% 0.191 22.216);
			font-size: 0.7rem;
			border-radius: 1000vw;
			padding-inline: 1em;
			padding-block: 0.5em;
			display: block;
			color: oklch(27.9% 0.041 260.031);
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			text-align: center;
			&:disabled {
				background-color: oklch(70.5% 0.015 286.067);
			}
		}
	}
}







@layer reset {
	/* 1. Use a more-intuitive box-sizing model */
	*, *::before, *::after {
		box-sizing: border-box;
	}

	/* 2. Remove default margin */
	*:not(dialog) {
		margin: 0;
	}

	/* 3. Enable keyword animations */
	@media (prefers-reduced-motion: no-preference) {
		html {
			interpolate-size: allow-keywords;
		}
	}

	body {
		/* 4. Increase line-height */
		line-height: 1.5;
		/* 5. Improve text rendering */
		-webkit-font-smoothing: antialiased;
	}

	/* 6. Improve media defaults */
	img, picture, video, canvas, svg {
		display: block;
		max-width: 100%;
	}

	/* 7. Inherit fonts for form controls */
	input, button, textarea, select {
		font: inherit;
	}

	/* 8. Avoid text overflows */
	p, h1, h2, h3, h4, h5, h6 {
		overflow-wrap: break-word;
	}

	/* 9. Improve line wrapping */
	p {
		text-wrap: pretty;
	}
	h1, h2, h3, h4, h5, h6 {
		text-wrap: balance;
	}

	button {
		border: none;
	}
}