@import "@automattic/typography/styles/variables";
@import "@automattic/components/src/styles/typography";

$display-type-font: $sans;
$display-type-weight: 400;
$display-type-line-height: 40px;

// Manual styling override mixin for Jetpack.
@mixin stats-section-header-for-jetpack {
	font-family: $display-type-font;
	font-size: $font-size-header;
	font-weight: $display-type-weight;
	line-height: $display-type-line-height;
}

@mixin jetpack-theme-for-odyssey-stats {
	--jetpack-white-off: #f9f9f6;

	--color-primary-dark: var(--studio-jetpack-green-70);
	--color-primary-light: var(--studio-jetpack-green-30);
	--color-primary-0: var(--studio-jetpack-green-0);
	--color-primary-5: var(--studio-jetpack-green-5);
	--color-primary-10: var(--studio-jetpack-green-10);
	--color-primary-20: var(--studio-jetpack-green-20);
	--color-primary-30: var(--studio-jetpack-green-30);
	--color-primary-40: var(--studio-jetpack-green-40);
	--color-primary-50: var(--studio-jetpack-green-50);
	--color-primary-60: var(--studio-jetpack-green-60);
	--color-primary-70: var(--studio-jetpack-green-70);
	--color-primary-80: var(--studio-jetpack-green-80);
	--color-primary-90: var(--studio-jetpack-green-90);
	--color-primary-100: var(--studio-jetpack-green-100);
	--theme-highlight-color: var(--color-primary-50);
	--color-accent: var(--theme-highlight-color);
	--color-primary: var(--theme-highlight-color);
	--color-accent-dark: var(--color-primary-70);
	--color-accent-light: var(--color-primary-30);
	--color-accent-0: var(--color-primary-0);
	--color-accent-5: var(--color-primary-5);
	--color-accent-10: var(--color-primary-10);
	--color-accent-20: var(--color-primary-20);
	--color-accent-30: var(--color-primary-30);
	--color-accent-40: var(--color-primary-40);
	--color-accent-50: var(--color-primary-50);
	--color-accent-60: var(--color-primary-60);
	--color-accent-70: var(--color-primary-70);
	--color-accent-80: var(--color-primary-80);
	--color-accent-90: var(--color-primary-90);
	--color-accent-100: var(--color-primary-100);
	--geo-chart-color-light: var(--color-accent-5);
	--geo-chart-color-dark: var(--color-accent);
	--wp-admin-theme-color: var(--theme-highlight-color);
}
