@import "./shared.css";

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

	--theme-color-brand: var(--theme-color-brand-400);
	--theme-color-brand-border: var(--theme-color-brand-500);
	--theme-color-brand-hover: var(--theme-color-brand-300);
	--theme-color-brand-foreground: var(--theme-color-foreground);
	--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: var(--theme-color-brand-300);
	--theme-color-brand-border: var(--theme-color-brand-400);
	--theme-color-brand-hover: var(--theme-color-brand-200);
	--theme-color-brand-foreground: var(--theme-color-background);
	--theme-color-brand-link: var(--theme-color-brand-300);
	--theme-color-brand-link-hover: var(--theme-color-brand-200);
	--theme-color-brand-code-link: var(--theme-color-brand-400);
	--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}