@import "./shared.css";

:root {
	--theme-color-brand-50: var(--color-orange-50);
	--theme-color-brand-100: var(--color-orange-100);
	--theme-color-brand-200: var(--color-orange-200);
	--theme-color-brand-300: var(--color-orange-300);
	--theme-color-brand-400: var(--color-orange-400);
	--theme-color-brand-500: var(--color-orange-500);
	--theme-color-brand-600: var(--color-orange-600);
	--theme-color-brand-700: var(--color-orange-700);
	--theme-color-brand-800: var(--color-orange-800);
	--theme-color-brand-900: var(--color-orange-900);
	--theme-color-brand-950: var(--color-orange-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-500);
	--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-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);
}