@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: hsl(303, 73%, 81%);

	// foregrounds
	--fg: hsl(0, 0%, 0%);
	--fg-muted: hsl(0, 0%, 50%);
	--fg-on-accent: hsl(0, 0%, 0%);
	--fg-on-badge: hsl(0, 0%, 100%);

	// backgrounds
	--bg: hsl(0, 0%, 95%);
	--bg-gradient: linear-gradient(
			to bottom left,
			hsla(235, 100%, 50%, 0.3),
			hsla(235, 100%, 50%, 0) 75%
		),
		linear-gradient(
			to bottom right,
			hsla(353, 100%, 50%, 0.4),
			hsla(353, 100%, 50%, 0) 50%
		),
		linear-gradient(
			to bottom,
			hsla(287, 100%, 50%, 0.2),
			hsla(287, 100%, 50%, 0)
		);
	--bg-panel: hsl(0, 0%, 100%);
	--bg-panel-alt: hsl(0, 0%, 92%);
	--bg-panel-accented: #EBEBEB;
	--bg-separator: hsl(0, 0%, 88%);
	--bg-button: var(--bg-panel-accented);
	--bg-badge: hsl(0, 0%, 0%);

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

@mixin dark {
	// general
	--accent: hsl(303, 73%, 81%);

	// foregrounds
	--fg: hsl(0, 0%, 100%);
	--fg-muted: hsl(0, 0%, 50%);
	--fg-on-accent: hsl(0, 0%, 0%);
	--fg-on-badge: hsl(0, 0%, 0%);

	// backgrounds
	--bg: hsl(220, 5%, 12%);
	--bg-gradient: linear-gradient(
			to bottom,
			hsla(287, 100%, 50%, 0.1),
			hsla(287, 100%, 50%, 0)
		),
		linear-gradient(
			to bottom left,
			hsla(235, 100%, 50%, 0.07),
			hsla(235, 100%, 50%, 0) 50%
		),
		linear-gradient(
			to bottom right,
			hsla(353, 100%, 50%, 0.07),
			hsla(353, 100%, 50%, 0) 50%
		);
	--bg-panel: hsl(220, 4%, 18%);
	--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
	--bg-panel-alt: hsl(220, 6%, 25%);
	--bg-separator: hsl(220, 4%, 28%);
	--bg-button: #43464C;
	--bg-badge: hsl(0, 0%, 100%);

	--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;
}

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

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

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

@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;
	}
}