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

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 240 10% 3.9%;
		--card: 0 0% 100%;
		--card-foreground: 240 10% 3.9%;
		--popover: 0 0% 100%;
		--popover-foreground: 240 10% 3.9%;
		--primary: 240 5.9% 10%;
		--primary-foreground: 0 0% 98%;
		--secondary: 240 4.8% 95.9%;
		--secondary-foreground: 240 5.9% 10%;
		--muted: 240 4.8% 95.9%;
		--muted-foreground: 240 3.8% 46.1%;
		--accent: 240 4.8% 95.9%;
		--accent-foreground: 240 5.9% 10%;
		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 0 0% 98%;
		--border: 240 5.9% 90%;
		--input: 240 5.9% 90%;
		--ring: 240 5.9% 10%;
		--radius: 0.5rem;

		/* slate-50 */
		/* --sidebar-background: 210, 40%, 98%; */
		/* gray-100 */
		--sidebar-background: 210, 20%, 98%;
		--sidebar-foreground: 240 5.3% 26.1%;
		--sidebar-primary: 240 5.9% 10%;
		--sidebar-primary-foreground: 0 0% 98%;
		/* slate-150ish */
		/* --sidebar-accent: 210 40% 95.1%; */
		/* slate-100 */
		/* --sidebar-accent: 210, 40%, 96%; */
		/* gray-100 */
		--sidebar-accent: 220, 14%, 96%;
		/* gray-200 */
		--sidebar-active: 220, 13%, 91%;
		--sidebar-accent-foreground: 240 5.9% 10%;
		--sidebar-border: 220 13% 91%;
		--sidebar-ring: 217.2 91.2% 59.8%;
	}

	.dark {
		--background: 240 10% 3.9%;
		--foreground: 0 0% 98%;
		--card: 240 10% 3.9%;
		--card-foreground: 0 0% 98%;
		--popover: 240 10% 3.9%;
		--popover-foreground: 0 0% 98%;
		--primary: 0 0% 98%;
		--primary-foreground: 240 5.9% 10%;
		--secondary: 240 3.7% 15.9%;
		--secondary-foreground: 0 0% 98%;
		--muted: 240 3.7% 15.9%;
		--muted-foreground: 240 5% 64.9%;
		--accent: 240 3.7% 15.9%;
		--accent-foreground: 0 0% 98%;
		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 0 0% 98%;
		--border: 240 3.7% 15.9%;
		--input: 240 3.7% 15.9%;
		--ring: 240 4.9% 83.9%;
		--radius: 0.5rem;

		--sidebar-background: 240 5.9% 10%;
		--sidebar-foreground: 240 4.8% 95.9%;
		--sidebar-primary: 224.3 76.3% 48%;
		--sidebar-primary-foreground: 0 0% 100%;
		--sidebar-accent: 240 3.7% 15.9%;
		--sidebar-accent-foreground: 240 4.8% 95.9%;
		--sidebar-border: 240 3.7% 15.9%;
		--sidebar-ring: 217.2 91.2% 59.8%;
	}
}

.editor .token {
	font-size: 0.7rem;
	color: #3b90f7;
	font-family: monospace;
	background-color: rgba(59, 144, 247, 0.2);
	padding: 2px 1px;
	box-shadow: 0px 0px 0px 1px rgba(59, 144, 247, 0.5);
	border-radius: 3px;
	margin: 0 1px;
}
.editor .jsonata-token {
	font-size: 0.7rem;
	color: #e7a316;
	font-family: monospace;
	background-color: rgba(231, 163, 22, 0.2);
	padding: 2px 1px;
	box-shadow: 0px 0px 0px 1px rgba(231, 163, 22, 0.5);
	border-radius: 3px;
	margin: 0 1px;
}

.editor.markdown {
	min-height: 200px;
}
