@import "./shared.css";

:root {
	--theme-color-brand-50: var(--color-emerald-50);
	--theme-color-brand-100: var(--color-emerald-100);
	--theme-color-brand-200: var(--color-emerald-200);
	--theme-color-brand-300: var(--color-emerald-300);
	--theme-color-brand-400: var(--color-emerald-400);
	--theme-color-brand-500: var(--color-emerald-500);
	--theme-color-brand-600: var(--color-emerald-600);
	--theme-color-brand-700: var(--color-emerald-700);
	--theme-color-brand-800: var(--color-emerald-800);
	--theme-color-brand-900: var(--color-emerald-900);
	--theme-color-brand-950: var(--color-emerald-950);

	--theme-color-brand: var(--theme-color-brand-600);
	--theme-color-brand-border: var(--theme-color-brand-700);
	--theme-color-brand-hover: var(--theme-color-brand-500);
	--theme-color-brand-foreground: var(--theme-color-background);
	--theme-color-brand-link: var(--theme-color-brand-600);
	--theme-color-brand-link-hover: var(--theme-color-brand-700);
	--theme-color-brand-code-link: var(--theme-color-brand-600);
	--theme-color-brand-code-link-hover: var(--theme-color-brand-500);
}

.dark {
	--theme-color-brand: var(--theme-color-brand-600);
	--theme-color-brand-border: var(--theme-color-brand-700);
	--theme-color-brand-hover: var(--theme-color-brand-500);
	--theme-color-brand-foreground: var(--theme-color-foreground);
	--theme-color-brand-link: var(--theme-color-brand-500);
	--theme-color-brand-link-hover: var(--theme-color-brand-400);
	--theme-color-brand-code-link: var(--theme-color-brand-400);
	--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}