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

@layer base {
	:root {
		--flexoki-bg: 48 100% 97%;
		--flexoki-bg-2: 51 33% 92%;

		--flexoki-ui: 51 21% 88%;
		--flexoki-ui-2: 50 14% 83%;
		--flexoki-ui-3: 55 10% 79%;

		--flexoki-tx: 0 3% 6%;
		--flexoki-tx-2: 50 3% 42%;
		--flexoki-tx-3: 49 7% 70%;

		--flexoki-re: 3 62% 42%;
	}

	.dark {
		--flexoki-bg: 0 3% 6%;
		--flexoki-bg-2: 30 4% 11%;

		--flexoki-ui: 30 3% 15%;
		--flexoki-ui-2: 40 3% 20%;
		--flexoki-ui-3: 30 3% 24%;

		--flexoki-tx: 55 10% 79%;
		--flexoki-tx-2: 43 3% 52%;
		--flexoki-tx-3: 45 2% 33%;

		--flexoki-re: 5 61% 54%;
	}

	:root {
		--background: var(--flexoki-bg);
		--foreground: var(--flexoki-tx);
		--card: var(--flexoki-bg);
		--card-foreground: var(--flexoki-tx);
		--popover: var(--flexoki-bg);
		--popover-foreground: var(--flexoki-tx);
		--primary: var(--flexoki-tx);
		--primary-foreground: var(--flexoki-bg);
		--secondary: var(--flexoki-ui-2);
		--secondary-foreground: var(--flexoki-tx-2);
		--muted: var(--flexoki-bg-2);
		--muted-foreground: var(--flexoki-tx-3);
		--accent: var(--flexoki-ui);
		--accent-foreground: var(--flexoki-tx-2);
		--destructive: var(--flexoki-re);
		--destructive-foreground: var(--flexoki-bg);
		--border: var(--flexoki-ui-2);
		--input: var(--flexoki-ui-2);
		--ring: var(--flexoki-ui-3);
		--radius: 0.5rem;
	}
}

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