/**
 * Customize default theme styling by overriding CSS variables:
 * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 */

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

:root {
	/* Default colors */
	--vp-c-default-1: var(--vp-c-gray-1);
	--vp-c-default-2: var(--vp-c-gray-2);
	--vp-c-default-3: var(--vp-c-gray-3);
	--vp-c-default-soft: var(--vp-c-gray-soft);

	/* Brand colors (Svelte orange) */
	--vp-c-brand-1: #ff3e00; /* Svelte orange for text and accents */
	--vp-c-brand-2: #e63800; /* Darker orange for hover states */
	--vp-c-brand-3: #cc3200; /* Darkest orange for solid backgrounds */
	--vp-c-brand-soft: rgba(255, 62, 0, 0.14); /* Soft orange for subtle backgrounds */

	/* Tip colors (use brand colors) */
	--vp-c-tip-1: var(--vp-c-brand-1);
	--vp-c-tip-2: var(--vp-c-brand-2);
	--vp-c-tip-3: var(--vp-c-brand-3);
	--vp-c-tip-soft: var(--vp-c-brand-soft);

	/* Warning colors (yellow) */
	--vp-c-warning-1: var(--vp-c-yellow-1);
	--vp-c-warning-2: var(--vp-c-yellow-2);
	--vp-c-warning-3: var(--vp-c-yellow-3);
	--vp-c-warning-soft: var(--vp-c-yellow-soft);

	/* Danger colors (red) */
	--vp-c-danger-1: var(--vp-c-red-1);
	--vp-c-danger-2: var(--vp-c-red-2);
	--vp-c-danger-3: var(--vp-c-red-3);
	--vp-c-danger-soft: var(--vp-c-red-soft);
}

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
	--vp-button-brand-border: transparent;
	--vp-button-brand-text: var(--vp-c-white);
	--vp-button-brand-bg: var(--vp-c-brand-3); /* Svelte orange background */
	--vp-button-brand-hover-border: transparent;
	--vp-button-brand-hover-text: var(--vp-c-white);
	--vp-button-brand-hover-bg: var(--vp-c-brand-2); /* Darker orange on hover */
	--vp-button-brand-active-border: transparent;
	--vp-button-brand-active-text: var(--vp-c-white);
	--vp-button-brand-active-bg: var(--vp-c-brand-1); /* Lightest orange on active */
}

/**
 * Component: Home
 * -------------------------------------------------------------------------- */

:root {
	--vp-home-hero-name-color: transparent;
	--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #ff3e00 30%, #f0055f 70%);

	--vp-home-hero-image-background-image: linear-gradient(-45deg, #ff3e00 50%, #f0055f 50%);
	--vp-home-hero-image-filter: blur(44px);
}

@media (min-width: 640px) {
	:root {
		--vp-home-hero-image-filter: blur(56px);
	}
}

@media (min-width: 960px) {
	:root {
		--vp-home-hero-image-filter: blur(68px);
	}
}

.main .name {
	max-width: 70%;
	text-align: center;
	margin: 0 auto;
}

.main .tagline {
	max-width: 90%;
	text-align: center;
	margin: 0 auto;
}

.main .actions {
	justify-content: center;
}

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

:root {
	--vp-custom-block-tip-border: transparent;
	--vp-custom-block-tip-text: var(--vp-c-text-1);
	--vp-custom-block-tip-bg: var(--vp-c-brand-soft); /* Soft Svelte orange */
	--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); /* Soft Svelte orange */
}

/**
 * Component: Algolia
 * -------------------------------------------------------------------------- */

.DocSearch {
	--docsearch-primary-color: var(--vp-c-brand-1) !important; /* Svelte orange */
}
