@layer reset, base, components;

@import url('reset.css') layer(reset);

@font-face {
	font-family: 'Source Code Pro';
	src: url('source-code-pro.woff2');
	font-display: swap;
	font-style: normal;
}

:root {
	/* Colors */
	--color-base: oklch(0.2 0 0);
	--color-border: oklch(from var(--color-base) calc(l + 0.2) c h);
	--color-content: oklch(0.95 0 0);
	--color-contentMuted: oklch(from var(--color-content) calc(l - 0.15) c h);
	--color-accent: #99c37c;

	/* Borders */
	--border: 1px solid var(--color-border);

	/* Sizing */
	--size-2xs: 0.25rem;
	--size-xs: 0.5rem;
	--size-s: 0.75rem;
	--size-m: 1rem;
	--size-l: 1.25rem;
	--size-xl: 1.5rem;
	--size-2xl: 2rem;

	/* Light theme */
	@media (prefers-color-scheme: light) {
		--color-base: oklch(1 0 0);
		--color-border: oklch(from var(--color-base) calc(l - 0.2) c h);
		--color-content: oklch(0.2 0 0);
		--color-contentMuted: oklch(from var(--color-content) calc(l + 0.3) c h);
	}
}

@layer base {
	body {
		margin: var(--size-xs);
		font-family: 'Source Code Pro', monospace;
		color: var(--color-contentMuted);
		background-color: var(--color-base);
	}

	#root {
		justify-items: center;
	}

	a {
		color: var(--color-content);
		text-decoration-thickness: 2px;
		text-decoration-color: var(--color-accent);
		text-underline-offset: 2px;
	}

	button,
	h3 {
		font-weight: 600;
	}

	button {
		display: flex;
		padding: var(--size-xs) var(--size-m);
		color: var(--color-base);
		cursor: pointer;
		background-color: var(--color-content);
		border: none;
		border-radius: var(--size-2xs);

		&:hover {
			background-color: var(--color-accent);
		}
	}

	h1,
	h2,
	h3 {
		color: var(--color-content);
	}
}

@layer components {
	@scope (.avatar) {
		:scope {
			border: var(--border);
			border-radius: 100%;
		}
	}

	@scope (.card) {
		:scope {
			padding-inline: var(--size-m);
			border: var(--border);
			border-radius: var(--size-2xs);
		}

		a:hover::before {
			padding-right: var(--size-xs);
			font-weight: 800;
			color: var(--color-accent);
			content: '>';
		}
	}

	@scope (.error) {
		:scope {
			text-align: center;
		}
	}

	@scope (.list) {
		:scope {
			display: flex;
			gap: var(--size-s);
			padding: 0;
			list-style: '';
		}

		:where(main :scope) {
			flex-direction: column;
		}
	}

	@scope (.loader) {
		@keyframes dots {
			from,
			to {
				content: '';
			}

			25% {
				content: '.';
			}

			50% {
				content: '..';
			}

			75% {
				content: '...';
			}
		}

		:scope::after {
			content: '';
			animation: dots 1500ms steps(4, jump-none) infinite;
		}
	}

	@scope (header) {
		:scope {
			justify-items: center;
		}

		p {
			max-width: 55ch;
			text-align: center;
		}

		.icon {
			transition: transform 750ms;

			&:hover {
				transform: rotate(1turn);
			}
		}
	}
}