src/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 222.2 84% 4.9%;
		--muted: 210 40% 96.1%;
		--muted-foreground: 215.4 16.3% 46.9%;
		--popover: 0 0% 100%;
		--popover-foreground: 222.2 84% 4.9%;
		--card: 0 0% 100%;
		--card-foreground: 222.2 84% 4.9%;
		--border: 214.3 31.8% 91.4%;
		--input: 214.3 31.8% 91.4%;
		--primary: 220.47 98.26% 36.08%;
		--primary-foreground: 210 40% 98%;
		--secondary: 210 40% 96.1%;
		--secondary-foreground: 222.2 47.4% 11.2%;
		--accent: 210 40% 96.1%;
		--accent-foreground: 222.2 47.4% 11.2%;
		--destructive: 0 92.99% 56.11%;
		--destructive-foreground: 210 40% 98%;
		--ring: 220.67 97.83% 36.08%;
		--radius: 0.5rem;
	}

	.dark {
		--background: 240 13.73% 10%;
		--foreground: 229.76 31.78% 74.71%;
		--muted: 232.5 15.44% 18.32%;
		--muted-foreground: 233.79 11.37% 50%;
		--popover: 234.55 17.46% 12.35%;
		--popover-foreground: 234 12.4% 52.55%;
		--card: 234.55 17.46% 12.35%;
		--card-foreground: 229.76 31.78% 74.71%;
		--border: 232.5 15.38% 30.59%;
		--input: 232 20% 14.71%;
		--primary: 0 0% 82.75%;
		--primary-foreground: 0 0% 20%;
		--secondary: 225.45 71.22% 72.75%;
		--secondary-foreground: 234.55 17.46% 12.35%;
		--accent: 234.55 17.83% 9.47%;
		--accent-foreground: 0 0% 82.75%;
		--destructive: 1.58 47.5% 52.94%;
		--destructive-foreground: 210 40% 98.04%;
		--ring: 225.45 71.22% 72.75%;
	}

	/* Default - Slate - 0.75 */
	/* :root {
		--background: 0 0% 100%;
		--foreground: 222.2 84% 4.9%;

		--card: 0 0% 100%;
		--card-foreground: 222.2 84% 4.9%;

		--popover: 0 0% 100%;
		--popover-foreground: 222.2 84% 4.9%;

		--primary: 222.2 47.4% 11.2%;
		--primary-foreground: 210 40% 98%;

		--secondary: 210 40% 96.1%;
		--secondary-foreground: 222.2 47.4% 11.2%;

		--muted: 210 40% 96.1%;
		--muted-foreground: 215.4 16.3% 46.9%;

		--accent: 210 40% 96.1%;
		--accent-foreground: 222.2 47.4% 11.2%;

		--destructive: 0 72.22% 50.59%;
		--destructive-foreground: 210 40% 98%;

		--border: 214.3 31.8% 91.4%;
		--input: 214.3 31.8% 91.4%;
		--ring: 222.2 84% 4.9%;
		--radius: 0.75rem;
	}

	.dark {
		--background: 222.2 84% 4.9%;
		--foreground: 210 40% 98%;

		--card: 222.2 84% 4.9%;
		--card-foreground: 210 40% 98%;

		--popover: 222.2 84% 4.9%;
		--popover-foreground: 210 40% 98%;

		--primary: 210 40% 98%;
		--primary-foreground: 222.2 47.4% 11.2%;

		--secondary: 217.2 32.6% 17.5%;
		--secondary-foreground: 210 40% 98%;

		--muted: 217.2 32.6% 17.5%;
		--muted-foreground: 215 20.2% 65.1%;

		--accent: 217.2 32.6% 17.5%;
		--accent-foreground: 210 40% 98%;

		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 210 40% 98%;

		--border: 217.2 32.6% 17.5%;
		--input: 217.2 32.6% 17.5%;
		--ring: 212.7 26.8% 83.9%;
	} */

	/* Custom Jellyfin-purple theme */
	/* :root {
		--background: 285 100% 95%;
		--foreground: 285 5% 0%;
		--card: 285 50% 90%;
		--card-foreground: 285 5% 10%;
		--popover: 285 100% 95%;
		--popover-foreground: 285 100% 0%;
		--primary: 285 46.2% 56.3%;
		--primary-foreground: 0 0% 100%;
		--secondary: 285 30% 70%;
		--secondary-foreground: 0 0% 0%;
		--muted: 247 30% 85%;
		--muted-foreground: 285 5% 35%;
		--accent: 247 30% 80%;
		--accent-foreground: 285 5% 10%;
		--destructive: 0 100% 30%;
		--destructive-foreground: 285 5% 90%;
		--border: 285 30% 50%;
		--input: 285 30% 18%;
		--ring: 285 46.2% 56.3%;
		--radius: 0.5rem;
	}
	.dark {
		--background: 285 50% 5%;
		--foreground: 285 5% 90%;
		--card: 285 50% 0%;
		--card-foreground: 285 5% 90%;
		--popover: 285 50% 5%;
		--popover-foreground: 285 5% 90%;
		--primary: 285 46.2% 56.3%;
		--primary-foreground: 0 0% 100%;
		--secondary: 285 30% 10%;
		--secondary-foreground: 0 0% 100%;
		--muted: 247 30% 15%;
		--muted-foreground: 285 5% 60%;
		--accent: 247 30% 15%;
		--accent-foreground: 285 5% 90%;
		--destructive: 0 100% 30%;
		--destructive-foreground: 285 5% 90%;
		--border: 285 30% 18%;
		--input: 285 30% 18%;
		--ring: 285 46.2% 56.3%;
		--radius: 0.5rem;
	} */
}

@layer base {
	* {
		@apply border-border;
	}
	body {
		@apply bg-background text-foreground;
	}
}
