@import 'tailwindcss';

:root {
	/* Solarised Base Colors */
	--base03: #002b36;
	--base02: #073642;
	--base01: #586e75;
	--base00: #657b83;
	--base0: #839496;
	--base1: #93a1a1;
	--base2: #eee8d5;
	--base3: #fdf6e3;
	--yellow: #b58900;
	--orange: #cb4b16;
	--red: #dc322f;
	--magenta: #d33682;
	--violet: #6c71c4;
	--blue: #268bd2;
	--cyan: #2aa198;
	--green: #859900;

	/* Light theme defaults */
	--bg-primary: var(--base3);
	--bg-secondary: var(--base2);
	--text-primary: var(--base00);
	--text-secondary: var(--base01);
	--accent: var(--blue);
}

[data-theme='dark'] {
	--bg-primary: var(--base03);
	--bg-secondary: var(--base02);
	--text-primary: var(--base0);
	--text-secondary: var(--base1);
	--accent: var(--cyan);
}

/* Base styles */
body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

/* Utility classes */
.bg-primary {
	background-color: var(--bg-primary);
}
.bg-secondary {
	background-color: var(--bg-secondary);
}
.text-primary {
	color: var(--text-primary);
}
.text-secondary {
	color: var(--text-secondary);
}
.accent {
	color: var(--accent);
}
.border-accent {
	border-color: var(--accent);
}
