@tailwind base;
@tailwind components;
@tailwind utilities;

@import url(@fontsource/radio-canada-big/600.css);
@import url("$lib/assets/style/host-grotesk.css");

:root {
	--font-body:
		"Host Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
		"Helvetica Neue", sans-serif;
	--font-display: "Radio Canada Big", var(--font-body);
	--transition: linear(
		0,
		0.006,
		0.025 2.8%,
		0.101 6.1%,
		0.539 18.9%,
		0.721 25.3%,
		0.849 31.5%,
		0.937 38.1%,
		0.968 41.8%,
		0.991 45.7%,
		1.006 50.1%,
		1.015 55%,
		1.017 63.9%,
		1.001
	);
}

@mixin light {
	// general
	--accent-pink: hsl(302, 100%, 76%);
	--accent-pink-alt: hsl(302, 100%, 50%);
	--accent-pink-muted: hsl(302, 98%, 42%);
	--accent-red: hsl(348, 100%, 80%);
	--accent-red-alt: hsl(348, 100%, 50%);
	--accent-purple: hsl(264, 100%, 81%);
	--accent-purple-alt: hsl(264, 100%, 50%);
	--accent-blue: hsl(220, 100%, 78%);
	--accent-blue-alt: hsl(220, 100%, 50%);
	--accent-green: hsl(140, 70%, 74%);
	--accent-green-alt: hsl(140, 66%, 55%);
	--accent: var(--accent-pink);
	--accent-alt: var(--accent-pink-alt);
	--accent-pink-transparent: hsla(303, 100%, 50%, 0);
	--accent-red-transparent: hsla(348, 100%, 50%, 0);
	--accent-purple-transparent: hsla(264, 100%, 50%, 0);
	--accent-blue-transparent: hsla(220, 100%, 50%, 0);
	--accent-green-transparent: hsla(140, 70%, 30%, 0);

	// foregrounds
	--fg: hsl(0, 0%, 0%);
	--fg-muted: hsla(0, 0%, 0%, 0.6);
	--fg-on-accent: hsl(0, 0%, 0%);
	--fg-on-badge: hsl(0, 0%, 0%);
	// readable version of the accent color
	--fg-accent: var(--accent-pink-muted);
	--fg-failure: var(--accent-red-alt);

	// backgrounds
	--bg: hsl(0, 0%, 95%);

	--bg-gradient-from: var(--accent-pink);
	--bg-gradient-to: hsla(303, 100%, 50%, 0);
	--bg-gradient-pink-from: var(--accent-pink);
	--bg-gradient-pink-to: hsla(303, 100%, 50%, 0);
	--bg-gradient-pink-alt-from: var(--accent-pink);
	--bg-gradient-pink-alt-to: hsl(303, 100%, 91%);
	--bg-gradient-red-from: var(--accent-red);
	--bg-gradient-red-to: hsla(348, 100%, 50%, 0);
	--bg-gradient-red-alt-from: var(--accent-red);
	--bg-gradient-red-alt-to: hsl(348, 100%, 91%);
	--bg-gradient-purple-from: var(--accent-purple);
	--bg-gradient-purple-to: hsla(264, 100%, 50%, 0);
	--bg-gradient-purple-alt-from: var(--accent-purple);
	--bg-gradient-purple-alt-to: hsl(264, 100%, 91%);
	--bg-gradient-blue-from: var(--accent-blue);
	--bg-gradient-blue-to: hsla(220, 100%, 50%, 0);
	--bg-gradient-blue-alt-from: var(--accent-blue);
	--bg-gradient-blue-alt-to: hsl(220, 100%, 91%);
	--bg-gradient-green-from: var(--accent-green);
	--bg-gradient-green-to: hsla(140, 70%, 30%, 0);
	--bg-gradient-green-alt-from: var(--accent-green-alt);
	--bg-gradient-green-alt-to: hsl(140, 70%, 91%);
	--bg-gradient-image-from: hsla(0, 0%, 95%, 0.5);
	--bg-gradient-image-to: hsla(0, 0%, 95%, 1);

	--bg-gradient: linear-gradient(
		to bottom,
		var(--bg-gradient-from),
		var(--bg-gradient-to) 100%
	);
	--bg-gradient-pink: linear-gradient(
		to bottom,
		var(--bg-gradient-pink-from),
		var(--bg-gradient-pink-to) 25%
	);
	--bg-gradient-pink-alt: linear-gradient(
		to top,
		var(--bg-gradient-pink-alt-from),
		var(--bg-gradient-pink-alt-to) 100%
	);
	--bg-gradient-red: linear-gradient(
		to bottom,
		var(--bg-gradient-red-from),
		var(--bg-gradient-red-to) 25%
	);
	--bg-gradient-red-alt: linear-gradient(
		to top,
		var(--bg-gradient-red-alt-from),
		var(--bg-gradient-red-alt-to) 100%
	);
	--bg-gradient-purple: linear-gradient(
		to bottom,
		var(--bg-gradient-purple-from),
		var(--bg-gradient-purple-to) 25%
	);
	--bg-gradient-purple-alt: linear-gradient(
		to top,
		var(--bg-gradient-purple-alt-from),
		var(--bg-gradient-purple-alt-to) 100%
	);
	--bg-gradient-blue: linear-gradient(
		to bottom,
		var(--bg-gradient-blue-from),
		var(--bg-gradient-blue-to) 25%
	);
	--bg-gradient-blue-alt: linear-gradient(
		to top,
		var(--bg-gradient-blue-alt-from),
		var(--bg-gradient-blue-alt-to) 100%
	);
	--bg-gradient-green: linear-gradient(
		to bottom,
		var(--bg-gradient-green-from),
		var(--bg-gradient-green-to) 25%
	);
	--bg-gradient-green-alt: linear-gradient(
		to top,
		var(--bg-gradient-green-alt-from),
		var(--bg-gradient-green-alt-to) 100%
	);
	--bg-gradient-image: linear-gradient(
		to bottom,
		var(--bg-gradient-image-from),
		var(--bg-gradient-image-to) 100%
	);
	--bg-panel: hsl(0, 0%, 100%);
	--bg-panel-highlight: hsl(0, 0%, 92%);
	--bg-separator: hsla(0, 0%, 0%, 0.2);
	--bg-button: var(--bg-panel-highlight);
	--bg-badge: var(--accent-pink);
	--bg-input: #e0e0e0;

	--shadow-panel: 0 2px 4px 0 hsla(0, 0%, 0%, 0.15);
}

@mixin dark {
	// general
	--accent-pink: hsl(302, 100%, 76%);
	--accent-pink-alt: hsl(302, 100%, 50%);
	--accent-red: hsl(348, 100%, 80%);
	--accent-red-alt: hsl(348, 100%, 50%);
	--accent-purple: hsl(264, 100%, 81%);
	--accent-purple-alt: hsl(264, 100%, 50%);
	--accent-blue: hsl(220, 100%, 78%);
	--accent-blue-alt: hsl(220, 100%, 50%);
	--accent: var(--accent-pink);
	--accent-alt: var(--accent-pink-alt);
	--accent-green: hsl(140, 70%, 74%);
	--accent-green-alt: hsl(140, 64%, 42%);
	--accent-pink-transparent: hsla(303, 100%, 50%, 0);
	--accent-red-transparent: hsla(348, 100%, 50%, 0);
	--accent-purple-transparent: hsla(264, 100%, 50%, 0);
	--accent-blue-transparent: hsla(220, 100%, 50%, 0);
	--accent-green-transparent: hsla(140, 70%, 30%, 0);

	// foregrounds
	--fg: hsl(0, 0%, 100%);
	--fg-muted: hsla(0, 0%, 100%, 0.65);
	--fg-on-accent: hsl(0, 0%, 0%);
	--fg-on-badge: hsl(0, 0%, 0%);
	--fg-accent: var(--accent);
	--fg-failure: var(--accent-red);

	// backgrounds
	--bg: hsl(220, 5%, 15%);

	--bg-gradient-from: hsla(303, 100%, 50%, 0.1);
	--bg-gradient-to: hsla(303, 100%, 50%, 0);
	--bg-gradient-pink-from: hsla(303, 100%, 50%, 0.1);
	--bg-gradient-pink-to: hsla(303, 100%, 50%, 0);
	--bg-gradient-pink-alt-from: var(--accent-pink);
	--bg-gradient-pink-alt-to: hsl(303, 100%, 91%);
	--bg-gradient-red-from: hsla(348, 100%, 50%, 0.1);
	--bg-gradient-red-to: hsla(348, 100%, 50%, 0);
	--bg-gradient-red-alt-from: var(--accent-red);
	--bg-gradient-red-alt-to: hsl(348, 100%, 91%);
	--bg-gradient-purple-from: hsla(264, 100%, 50%, 0.1);
	--bg-gradient-purple-to: hsla(264, 100%, 50%, 0);
	--bg-gradient-purple-alt-from: var(--accent-purple);
	--bg-gradient-purple-alt-to: hsl(264, 100%, 91%);
	--bg-gradient-blue-from: hsla(220, 100%, 50%, 0.1);
	--bg-gradient-blue-to: hsla(220, 100%, 50%, 0);
	--bg-gradient-blue-alt-from: var(--accent-blue);
	--bg-gradient-blue-alt-to: hsl(220, 100%, 91%);
	--bg-gradient-green-from: hsla(140, 70%, 30%, 0.1);
	--bg-gradient-green-to: hsla(140, 70%, 30%, 0);
	--bg-gradient-green-alt-from: var(--accent-green-alt);
	--bg-gradient-green-alt-to: hsl(140, 70%, 91%);
	--bg-gradient-image-from: hsla(220, 5%, 12%, 0.5);
	--bg-gradient-image-to: hsla(220, 5%, 12%, 1);

	--bg-gradient: linear-gradient(
		to bottom,
		var(--bg-gradient-from),
		var(--bg-gradient-to) 100%
	);
	--bg-gradient-pink: linear-gradient(
		to bottom,
		var(--bg-gradient-pink-from),
		var(--bg-gradient-pink-to) 25%
	);
	--bg-gradient-pink-alt: linear-gradient(
		to top,
		var(--bg-gradient-pink-alt-from),
		var(--bg-gradient-pink-alt-to) 100%
	);
	--bg-gradient-red: linear-gradient(
		to bottom,
		var(--bg-gradient-red-from),
		var(--bg-gradient-red-to) 25%
	);
	--bg-gradient-red-alt: linear-gradient(
		to top,
		var(--bg-gradient-red-alt-from),
		var(--bg-gradient-red-alt-to) 100%
	);
	--bg-gradient-purple: linear-gradient(
		to bottom,
		var(--bg-gradient-purple-from),
		var(--bg-gradient-purple-to) 25%
	);
	--bg-gradient-purple-alt: linear-gradient(
		to top,
		var(--bg-gradient-purple-alt-from),
		var(--bg-gradient-purple-alt-to) 100%
	);
	--bg-gradient-blue: linear-gradient(
		to bottom,
		var(--bg-gradient-blue-from),
		var(--bg-gradient-blue-to) 25%
	);
	--bg-gradient-blue-alt: linear-gradient(
		to top,
		var(--bg-gradient-blue-alt-from),
		var(--bg-gradient-blue-alt-to) 100%
	);
	--bg-gradient-green: linear-gradient(
		to bottom,
		var(--bg-gradient-green-from),
		var(--bg-gradient-green-to) 25%
	);
	--bg-gradient-green-alt: linear-gradient(
		to top,
		var(--bg-gradient-green-alt-from),
		var(--bg-gradient-green-alt-to) 100%
	);
	--bg-gradient-image: linear-gradient(
		to bottom,
		var(--bg-gradient-image-from),
		var(--bg-gradient-image-to) 100%
	);
	--bg-panel: hsl(220, 4%, 24%);
	--bg-panel-highlight: hsl(220, 2%, 32%);
	--bg-separator: hsl(220, 4%, 28%);
	--bg-button: hsl(220, 6%, 34%);
	--bg-badge: var(--accent-pink);

	--shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		@include dark;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		@include light;
	}
}

:root.light {
	@include light;
}

:root.dark {
	@include dark;
}

body {
	@apply text-foreground font-body font-semibold overflow-x-hidden;
	width: 100vw;
	background-color: var(--bg);
	background-size: 100vw 100vh;
}

::selection,
::-moz-selection {
	@apply bg-accent-blue text-on-accent;
}

.hoverable {
	@apply hover:scale-105 duration-200;
	will-change: transform;
}

.hoverable-md {
	@apply hover:scale-110 duration-200;
	will-change: transform;
}

.hoverable-lg {
	@apply hover:scale-[1.15] duration-200;
	will-change: transform;
}

.selected {
	@apply bg-accent-purple !text-black;
}

@layer components {
	select {
		@apply appearance-none;
	}

	.btn {
		@apply bg-button flex items-center justify-center overflow-hidden relative cursor-pointer px-6 h-14 rounded-full font-medium focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none hoverable;
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease;
	}

	.btn.highlight {
		@apply bg-accent text-on-accent;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		@apply font-display font-semibold;
	}

	code {
		@apply font-mono bg-gray-200 rounded-md px-1 dynadark:bg-panel-alt dynadark:text-white;
	}

	p a {
		@apply text-accent underline;
	}

	input[type="text"],
	select.dropdown {
		@apply w-full p-3 rounded-lg bg-panel border-2 border-button pl-3 pr-[4rem];
	}

	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	input[type="number"] {
		-moz-appearance: textfield;
		appearance: textfield;
	}

	input[type="text"]::placeholder {
		@apply text-muted font-normal;
	}

	input[type="text"]:focus {
		@apply outline outline-accent outline-2;
	}

	input[type="range"] {
		@apply appearance-none bg-panel h-2 rounded-lg;
	}

	input[type="range"]::-webkit-slider-thumb {
		@apply appearance-none w-4 h-4 bg-accent rounded-full cursor-pointer;
	}

	input[type="range"]::-moz-range-thumb {
		@apply w-4 h-4 bg-accent rounded-full cursor-pointer;
	}

	hr {
		@apply border-separator;
	}
}