/**
 * VitePress variables overrides
 *
 * See https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 * for all available variables
 * -------------------------------------------------------------------------- */

/**
 * Colors Base
 * -------------------------------------------------------------------------- */

:root {
	--vp-c-black: #21262e;
	--vp-c-black-pure: #172940;
	--vp-c-black-soft: #161b22;
	--vp-c-black-mute: #1d1d21;

	--vp-c-gray: #666672;
	--vp-c-gray-light-1: #8596ab;
	--vp-c-gray-light-2: #a2b5cd;
	--vp-c-gray-light-3: #d3dae4;
	--vp-c-gray-light-4: #e4eaf1;
	--vp-c-gray-light-5: #f0f4f9;

	--vp-c-purple: #6644ff;
	--vp-c-purple-light: #a08bff;
	--vp-c-purple-lighter: #ddddff;
	--vp-c-purple-lightest: #f0ecff;
	--vp-c-purple-dark: #7359e7;
	--vp-c-purple-darker: #4422dd;
	--vp-c-purple-dimm-1: rgba(102, 68, 255, 0.5);
	--vp-c-purple-dimm-2: rgba(102, 68, 255, 0.25);
	--vp-c-purple-dimm-3: rgba(102, 68, 255, 0.09);

	--vp-c-yellow: #fbc54f;
	--vp-c-yellow-light: #fff7ed;
	--vp-c-yellow-lighter: #fbbf24;
	--vp-c-yellow-dark: #b45309;
	--vp-c-yellow-darker: #92400e;
	--vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.5);
	--vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
	--vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.05);

	--vp-c-red: #e35169;
	--vp-c-red-light: #fceef0;
	--vp-c-red-lighter: #fceef0;
	--vp-c-red-dark: #e11d48;
	--vp-c-red-darker: #be123c;
	--vp-c-red-dimm-1: rgba(244, 63, 94, 0.5);
	--vp-c-red-dimm-2: rgba(244, 63, 94, 0.2);
	--vp-c-red-dimm-3: rgba(244, 63, 94, 0.05);

	--vp-c-pink: #fe97dc;
}

/**
 * Colors Theme
 * -------------------------------------------------------------------------- */

:root {
	--vp-c-brand: var(--vp-c-purple);
	--vp-c-brand-light: var(--vp-c-purple-light);
	--vp-c-brand-lighter: var(--vp-c-purple-lighter);
	--vp-c-brand-dark: var(--vp-c-purple-dark);
	--vp-c-brand-darker: var(--vp-c-purple-darker);

	--vp-c-divider: rgba(60, 60, 67, 0.12);
}

.dark {
	--vp-c-purple: #8866ff;
	--vp-c-purple-dimm-1: rgba(136, 102, 255, 0.5);
	--vp-c-purple-dimm-2: rgba(136, 102, 255, 0.25);
	--vp-c-purple-dimm-3: rgba(159, 132, 255, 0.1);

	--vp-c-divider: rgba(82, 82, 89, 0.32);
}

/**
 * Globals
 * -------------------------------------------------------------------------- */

:root {
	--rounded-none: 0;
	--rounded-sm: 0.125rem;
	--rounded: 0.25rem;
	--rounded-md: 0.375rem;
	--rounded-lg: 0.5rem;
	--rounded-xl: 0.75rem;
	--rounded-2xl: 1rem;
	--rounded-3xl: 1.5rem;
	--rounded-full: 9999px;
}

/**
 * Component: Custom Block
 * -------------------------------------------------------------------------- */

:root {
	--vp-custom-block-tip-border: var(--vp-c-purple-dimm-1);
	--vp-custom-block-tip-text: var(--vp-c-purple-darker);
	--vp-custom-block-tip-bg: var(--vp-c-purple-dimm-3);
	--vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg);

	--vp-custom-block-warning-border: var(--vp-c-yellow-dimm-1);
	--vp-custom-block-warning-text: var(--vp-c-yellow-darker);
	--vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-3);
	--vp-custom-block-warning-code-bg: var(--vp-custom-block-tip-bg);

	--vp-custom-block-danger-border: var(--vp-c-red-dimm-1);
	--vp-custom-block-danger-text: var(--vp-c-red-darker);
	--vp-custom-block-danger-bg: var(--vp-c-red-dimm-3);
	--vp-custom-block-danger-code-bg: var(--vp-custom-block-tip-bg);
}

.dark {
	--vp-custom-block-tip-border: var(--vp-c-purple-dimm-2);
	--vp-custom-block-tip-text: var(--vp-c-purple-light);

	--vp-custom-block-warning-border: var(--vp-c-yellow-dimm-2);
	--vp-custom-block-warning-text: var(--vp-c-yellow);

	--vp-custom-block-danger-border: var(--vp-c-red-dimm-2);
	--vp-custom-block-danger-text: var(--vp-c-red);
}

/**
 * Component: Docs Landing Page
 * -------------------------------------------------------------------------- */

:root {
	--vp-docs-section-bg: #0e1c2f;
	--footer-link-color: inherit;
}

.dark {
	--vp-docs-section-bg: #000;
	--footer-link-color: white;
}
