base.pcss

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

@layer base {
	html {
		font-family: Karla, system-ui, sans-serif;
	}
	input[type='number']::-webkit-inner-spin-button,
	input[type='number']::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
		-moz-appearance: textfield !important;
		appearance: textfield !important;
	}
	input::-webkit-calendar-picker-indicator {
		display: none !important;
	}
	:root {
		--background: 240 4% 16%; /* hsl(240 4% 16%) */
		--foreground: 138 76% 97%; /* hsl(138 76% 97%) */

		--muted: 240 4.8% 95.9%; /* hsl(240, 4.8%, 95.9%) */
		--muted-foreground: 240 3.8% 46.1%; /* hsl(240, 3.8%, 46.1%) */

		--popover: 240 4% 16%; /* hsl(240 4% 16%) */
		--popover-foreground: 138 76% 97%; /* hsl(138 76% 97%) */

		--card: 0 0% 100%; /* hsl(0, 0%, 100%) */
		--card-foreground: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */

		--border: 240 4% 16%; /* hsl(240 4% 16%) */
		--input: 143 64% 24%; /* hsl(240 4% 16%) */

		--primary: 143 64% 24%; /* hsl(143 64% 24%) */
		--primary-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */

		--secondary: 240 4.8% 95.9%; /* hsl(240, 4.8%, 95.9%) */
		--secondary-foreground: 240 5.9% 10%; /* hsl(240, 5.9%, 10%) */

		--accent: 143 64% 24%; /* hsl(143 64% 24%) */
		--accent-foreground: 138 76% 97%; /* hsl(138 76% 97%) */

		--destructive: 0 72.2% 50.6%; /* hsl(0, 72.2%, 50.6%) */
		--destructive-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */

		--ring: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */

		--radius: 0.5rem;
	}

	.dark {
		--background: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */
		--foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */

		--muted: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
		--muted-foreground: 240 5% 64.9%; /* hsl(240, 5%, 64.9%) */

		--popover: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */
		--popover-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */

		--card: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */
		--card-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */

		--border: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
		--input: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */

		--primary: 0 0% 98%; /* hsl(0, 0%, 98%) */
		--primary-foreground: 240 5.9% 10%; /* hsl(240, 5.9%, 10%) */

		--secondary: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
		--secondary-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */

		--accent: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
		--accent-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */

		--destructive: 0 62.8% 30.6%; /* hsl(0, 62.8%, 30.6%) */
		--destructive-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */

		--ring: 240 4.9% 83.9%; /* hsl(240, 4.9%, 83.9%) */
	}
}

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

	@font-face {
		font-family: 'Karla';
		src: url('/fonts/karla-latin-500-normal.woff2') format('woff2');
		font-weight: 500;
		font-style: normal;
	}
}