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

/*
  Theme variables
*/
@layer base {
	:root {
		--logo: 210 100% 49%;
		--background: 229 57% 100%;
		--foreground: 229 63% 4%;
		--muted: 229 12% 86%;
		--muted-foreground: 229 10% 37%;
		--popover: 0 0% 99%;
		--popover-foreground: 229 63% 3%;
		--card: 0 0% 99%;
		--card-foreground: 229 63% 3%;
		--border: 220 13% 91%;
		--input: 220 13% 91%;
		--primary: 210 100% 49%;
		--primary-foreground: 0 0% 100%;
		--secondary: 229 20% 90%;
		--secondary-foreground: 229 20% 30%;
		--accent: 229 28% 85%;
		--accent-foreground: 229 28% 25%;
		--destructive: 3 100% 50%;
		--destructive-foreground: 3 0% 100%;
		--ring: 210 100% 49%;
		--radius: 0.5rem;
		--subscription-free: 220 16% 96%;
		--subscription-free-foreground: 215 19% 35%;
		--subscription-pro: 214 100% 93%;
		--subscription-pro-foreground: 221 83% 48%;
	}

	.dark {
		--logo: 210 100% 49%;
		--background: 229 41% 4%;
		--foreground: 229 23% 99%;
		--muted: 229 12% 14%;
		--muted-foreground: 229 10% 63%;
		--popover: 229 41% 5%;
		--popover-foreground: 0 0% 100%;
		--card: 229 41% 5%;
		--card-foreground: 0 0% 100%;
		--border: 215 27.9% 16.9%;
		--input: 215 27.9% 16.9%;
		--primary: 210 100% 49%;
		--primary-foreground: 0 0% 100%;
		--secondary: 229 14% 8%;
		--secondary-foreground: 229 14% 68%;
		--accent: 229 23% 17%;
		--accent-foreground: 229 23% 77%;
		--destructive: 3 89% 54%;
		--destructive-foreground: 0 0% 100%;
		--ring: 210, 100%, 49%;
		color-scheme: dark;
		--subscription-free: 222 47% 17%;
		--subscription-free-foreground: 220 9% 65%;
		--subscription-pro: 221 39% 33%;
		--subscription-pro-foreground: 217 91% 68%;
	}
}

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

html body[data-scroll-locked] {
	overflow: auto !important;
}

.font-heading {
	font-family: "Cal Sans", sans-serif;
}
