@charset "UTF-8";

:root {
	color-scheme: dark;

	--cosmic-purple: #6a0dad;
	--cosmic-blue: #233dff;
	--cosmic-neon: #ff00cc;
	--cosmic-dark: #0a0f2d;
	--cosmic-light: #e6e6ff;

	--cosmic-adaptive-purple: hsl(from var(--cosmic-purple) h s calc(l + 28));
	--cosmic-adaptive-blue: hsl(from var(--cosmic-blue) h s calc(l + 20));

	--body-bg: linear-gradient(
		to bottom,
		hsl(from var(--bg) h s calc(l - 4)),
		hsl(from var(--cosmic-purple) h s calc(l - 16))
	);

	--bg: var(--cosmic-dark);
	--fg: var(--cosmic-light);
	--muted-fg: color-mix(in srgb, var(--fg) 60%, var(--bg));

	--link-fg: var(--cosmic-adaptive-blue);

	--button-bg: hsl(from var(--cosmic-light) h s calc(l - 4));
	--button-bg-hover: hsl(from var(--cosmic-light) h 50 calc(l - 12));
	--button-fg: var(--cosmic-purple);

	--border-color: #555;
	--border: 1px solid var(--border-color);
	--outline: 2px var(--cosmic-light) solid;

	--default-font: "Space Grotesk", sans-serif;
}