/*
	https://prog255.dev/css255/
	site.css
	0.0
*/

@layer css255.base, css255.site, css255.elements;

@layer css255.site {
	:root {
		color-scheme: dark;

		--bg: #10101a;
		--surface: color-mix(in oklab, var(--fg) 12%, var(--bg));
		--surface-2: color-mix(in oklab, var(--fg) 24%, var(--bg));
		--surface-3: color-mix(in oklab, var(--fg) 36%, var(--bg));

		--fg: #dddddd;
		--fg-2: color-mix(in oklab, var(--bg) 15%, var(--fg));
		--fg-3: color-mix(in oklab, var(--bg) 30%, var(--fg));

		--accent: #ffcc00;
		--accent-fg: var(--bg);

		--danger: #ff7777;
		--danger-fg: var(--bg);

		--info: #80a0f0;
		--info-fg: var(--bg);

		--link: #80c0f0;
		--link-focus: color-mix(in oklab, var(--fg) 50%, var(--link));
		--link-active: var(--fg);
		--link-visited: color-mix(in oklab, var(--bg) 35%, var(--link));

		--content-top: 3rem;
		--content-left: 0;
		--content-right: 0;
		--content-bottom: 0;

		--space-large: 3rem;
		--space-small: 1.75rem;

		--duration: 200ms;
		--measure: 100ch;

		--text: 1.125em;

		--font: "Ubuntu", sans-serif;
		--font-mono: "JetBrains Mono", monospace;

		accent-color: var(--accent);
		scrollbar-color: color-mix(in oklab, var(--fg) 35%, var(--bg)) transparent;
	}

	/* Makes scrolling smooth unless user wants less motion */
	@media (prefers-reduced-motion: no-preference) {
		:root {
			scroll-behavior: smooth;
		}
	}

	body {
		min-height: 100dvh;
		background-color: var(--bg);
		color: var(--fg);
		font-family: var(--font);
		font-size: var(--text);
	}

	:target {
		scroll-margin-top: var(--scroll-offset, var(--header-h));
	}

	:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 2px;
	}

	::selection {
		background: color-mix(in oklab, var(--accent) 40%, transparent);
	}

	main {
		padding: var(--space-small) var(--space-large);
	}
}