@import "tailwindcss";

@theme {
	--font-pixel: var(--font-geist-pixel-square), ui-monospace, monospace;

	/* Cossistant brand colors */
	--color-cossistant-pink: var(--cossistant-pink);
	--color-cossistant-yellow: var(--cossistant-yellow);
	--color-cossistant-blue: var(--cossistant-blue);
	--color-cossistant-orange: var(--cossistant-orange);
	--color-cossistant-green: var(--cossistant-green);
}

:root {
	/* Using oklch for consistency with cossistant main app */
	--background: oklch(99% 0 0);
	--foreground: oklch(14.5% 0 0);
	--muted: oklch(97% 0 0);
	--muted-foreground: oklch(55.6% 0 0);
	--border: oklch(92.2% 0 0);
	--accent: hsla(314, 100%, 80%, 1);
	--accent-foreground: oklch(14.5% 0 0);

	/* Cossistant brand colors */
	--cossistant-pink: hsla(314, 100%, 80%, 1);
	--cossistant-yellow: hsla(58, 93%, 72%, 1);
	--cossistant-blue: hsla(218, 92%, 72%, 1);
	--cossistant-orange: hsla(19, 99%, 44%, 1);
	--cossistant-green: hsla(156, 86%, 40%, 1);
}

.dark {
	--background: oklch(14.5% 0 0);
	--foreground: oklch(98.5% 0 0);
	--muted: oklch(26.9% 0 0);
	--muted-foreground: oklch(70.8% 0 0);
	--border: oklch(26.9% 0 0);
	--accent: hsla(314, 100%, 85%, 1);
	--accent-foreground: oklch(14.5% 0 0);

	/* Cossistant brand colors (dark mode) */
	--cossistant-pink: hsla(314, 100%, 85%, 1);
	--cossistant-yellow: hsla(58, 92%, 79%, 1);
	--cossistant-blue: hsla(218, 91%, 78%, 1);
	--cossistant-orange: hsla(19, 99%, 50%, 1);
	--cossistant-green: hsla(156, 86%, 64%, 1);
}

* {
	font-family: var(--font-pixel);
}

html {
	font-family: var(--font-pixel);
}

select,
input,
button,
code,
pre {
	font-family: inherit;
}

body {
	background-color: var(--background);
	color: var(--foreground);
}

::selection {
	background-color: var(--accent);
	color: var(--accent-foreground);
}
