@import "@automattic/color-studio/dist/color-variables";

@mixin jetpack-connect-colors() {
	// Override accent variables with Jetpack colors
	--color-accent: var(--studio-jetpack-green-30);
	--color-accent-light: var(--studio-jetpack-green-20);
	--color-accent-dark: var(--studio-jetpack-green-50);
	--color-accent-60: var(--studio-jetpack-green-40);

	// Override global colors with accent variables
	--color-primary: var(--color-accent-dark);
	--color-primary-light: var(--color-accent-light);
	--color-primary-dark: var(--color-accent-dark);

	::selection {
		color: var(--color-text-inverted);
		background: var(--color-accent);
	}
}

@mixin woocommerce-colors() {
	// Override accent variables with WooCommerce colors
	--color-accent: var(--studio-woocommerce-purple);
	--color-accent-light: var(--studio-woocommerce-purple-30);
	--color-accent-dark: var(--studio-woocommerce-purple-70);

	--color-woocommerce-onboarding-background: #f6f7f7;
	--color-woocommerce-header-border: #dcdcde;

	// Override global colors with accent variables
	--color-primary: var(--color-accent-dark);
	--color-primary-10: var(--color-neutral-60);
	--color-neutral-20: var(--color-neutral-60);
	--color-primary-20: var(--color-neutral-60);
	--color-primary-light: var(--color-accent-light);
	--color-accent-60: var(--color-accent-dark);

	::selection {
		color: var(--color-text-inverted);
		background: var(--color-accent);
	}
}

@mixin automattic-for-agencies-colors() {
	// Override accent variables with Jetpack colors
	--color-accent: #{$studio-automattic-blue};
	--color-accent-light: #{$studio-automattic-blue-20};
	--color-accent-dark: #{$studio-automattic-blue-50};
	--color-accent-60: #{$studio-automattic-blue-40};

	// Override global colors with accent variables
	--color-primary: #{$studio-automattic-blue};
	--color-primary-light: #{$studio-automattic-blue-40};
	--color-primary-dark: #{$studio-automattic-blue-50};

	::selection {
		color: var(--color-text-inverted);
		background: var(--color-accent);
	}
}
