/**
 * VisionaryCue Commerce Pro - design tokens.
 *
 * Every value here is a fallback. The admin settings emit a <style id="vc-ccp-vars">
 * block in the document head that overrides these on :root, so nothing in the
 * plugin should ever hardcode a colour, radius or spacing value.
 */

:root {
	/* Brand */
	--vc-primary: #1f7a4d;
	--vc-primary-dark: #17603c;
	--vc-primary-soft: color-mix(in srgb, var(--vc-primary) 10%, transparent);
	--vc-secondary: #0f172a;
	--vc-accent: #f59e0b;

	/* Surfaces */
	--vc-background: #f7f8fa;
	--vc-surface: #ffffff;
	--vc-card: #ffffff;
	--vc-overlay: rgba(15, 23, 42, 0.45);

	/* Text */
	--vc-text: #111827;
	--vc-muted: #6b7280;
	--vc-on-primary: #ffffff;

	/* Lines */
	--vc-border: #e5e7eb;
	--vc-border-strong: #d1d5db;

	/* Status */
	--vc-success: #16a34a;
	--vc-error: #dc2626;
	--vc-warning: #d97706;
	--vc-sale: #e11d48;
	--vc-info: #2563eb;

	/* Shape */
	--vc-radius: 12px;
	--vc-radius-sm: 8px;
	--vc-radius-lg: 18px;
	--vc-radius-pill: 999px;
	--vc-card-radius: 16px;
	--vc-button-radius: 10px;

	/* Elevation */
	--vc-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
	--vc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--vc-shadow-lg: 0 8px 16px rgba(16, 24, 40, 0.08), 0 24px 48px rgba(16, 24, 40, 0.12);
	/* Flat offset shadow used by the cart and checkout panels. Draws in the
	   border colour, so it follows the palette rather than adding a grey. */
	--vc-shadow-offset: 5px 5px 0 var(--vc-border);

	/* Spacing scale, derived from the base unit */
	--vc-spacing: 8px;
	--vc-space-1: calc(var(--vc-spacing) * 0.5);
	--vc-space-2: var(--vc-spacing);
	--vc-space-3: calc(var(--vc-spacing) * 1.5);
	--vc-space-4: calc(var(--vc-spacing) * 2);
	--vc-space-5: calc(var(--vc-spacing) * 3);
	--vc-space-6: calc(var(--vc-spacing) * 4);
	--vc-space-7: calc(var(--vc-spacing) * 6);
	--vc-space-8: calc(var(--vc-spacing) * 8);

	/* Layout */
	--vc-container: 1320px;
	--vc-header-height: 72px;
	/* How far sticky elements stop below the top of the viewport. Set from
	   the admin as your theme's fixed-header height, plus the plugin header
	   when that is enabled and sticky. */
	--vc-sticky-offset: 0px;
	--vc-header-bg: #ffffff;
	--vc-drawer-width: 420px;
	/* Space the page reserves at its foot while the floating cart is shown:
	   the button's min-height plus its offset above and below. */
	--vc-floating-cart-space: calc(56px + var(--vc-space-4) * 2);
	--vc-mobilenav-height: 62px;
	--vc-mobilenav-bg: #ffffff;
	--vc-mobilenav-active: var(--vc-primary);

	/* Typography */
	--vc-font: inherit;
	--vc-font-size: 15px;
	--vc-font-weight: 400;
	--vc-heading-weight: 700;
	--vc-line-height: 1.55;
	--vc-letter-spacing: 0px;

	/* Grid */
	--vc-cols-desktop: 4;
	--vc-cols-tablet: 3;
	--vc-cols-mobile: 2;
	--vc-card-ratio: 1 / 1;
	--vc-gallery-ratio: 1 / 1;

	/* Motion */
	--vc-transition: 0.18s;
	--vc-ease: cubic-bezier(0.32, 0.72, 0.28, 1);

	/* Stacking */
	--vc-z-sticky: 40;
	--vc-z-header: 60;
	--vc-z-floating: 70;
	--vc-z-mobilenav: 80;
	--vc-z-drawer: 90;
	--vc-z-modal: 100;
	--vc-z-toast: 110;
}

/* Fallback for browsers without color-mix(). */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
	:root {
		--vc-primary-soft: rgba(31, 122, 77, 0.1);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--vc-transition: 0.001s;
	}
}