/**
 * Perform Better Pro-Ed design tokens.
 *
 * Values follow the approved prototype. Oswald and Barlow are not loaded yet.
 * Self-hosted files can be added later without changing these tokens.
 * One-off wells (#c5c6c8, #d9d9d6) are not tokens.
 */

:root {
	--pb-navy: #040b2d;
	--pb-red: #fb0b0a;
	--pb-grey: #d6d7d8;
	--pb-white: #ffffff;
	--pb-neutral: #f6f6f4;

	--pb-navy-80: color-mix(in srgb, var(--pb-navy) 80%, transparent);
	--pb-navy-70: color-mix(in srgb, var(--pb-navy) 70%, transparent);
	--pb-navy-55: color-mix(in srgb, var(--pb-navy) 55%, transparent);
	--pb-navy-45: color-mix(in srgb, var(--pb-navy) 45%, transparent);
	--pb-navy-20: color-mix(in srgb, var(--pb-navy) 20%, transparent);
	--pb-navy-15: color-mix(in srgb, var(--pb-navy) 15%, transparent);
	--pb-navy-10: color-mix(in srgb, var(--pb-navy) 10%, transparent);
	--pb-white-85: color-mix(in srgb, var(--pb-white) 85%, transparent);
	--pb-white-80: color-mix(in srgb, var(--pb-white) 80%, transparent);
	--pb-white-15: color-mix(in srgb, var(--pb-white) 15%, transparent);
	--pb-white-12: color-mix(in srgb, var(--pb-white) 12%, transparent);
	--pb-neutral-75: color-mix(in srgb, var(--pb-neutral) 75%, transparent);
	--pb-neutral-60: color-mix(in srgb, var(--pb-neutral) 60%, transparent);
	--pb-grey-80: color-mix(in srgb, var(--pb-grey) 80%, transparent);

	--font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
	--font-sans: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--pb-weight-regular: 400;
	--pb-weight-medium: 500;
	--pb-weight-semibold: 600;
	--pb-weight-bold: 700;

	--pb-text-body: 1rem;
	--pb-leading-body: 1.6;
	--pb-text-lede: 1.0625rem;
	--pb-leading-lede: 1.65;
	--pb-text-page: clamp(2.05rem, 3.4vw, 3.15rem);
	--pb-text-product-title: clamp(1.8rem, 1.98vw + 0.63rem, 2.745rem);
	--pb-text-section: clamp(1.5rem, 2vw, 2rem);
	--pb-text-card-title: 1.05rem;
	--pb-leading-display: 0.92;
	--pb-leading-display-tight: 0.88;
	--pb-leading-display-open: 1.02;
	--pb-leading-title: 1.12;
	--pb-tracking-display: 0.04em;
	--pb-tracking-display-tight: 0.02em;
	--pb-text-eyebrow: 0.75rem;
	--pb-text-eyebrow-dense: 0.6875rem;
	--pb-tracking-eyebrow: 0.28em;
	--pb-text-nav: 0.75rem;
	--pb-tracking-nav: 0.2em;
	--pb-text-control: 0.8125rem;
	--pb-tracking-control: 0.18em;
	--pb-tracking-link: 0.16em;
	--pb-text-meta: 0.6875rem;
	--pb-tracking-meta: 0.22em;
	--pb-text-price: 1.2rem;
	--pb-text-price-sm: 1.35rem;
	--pb-tracking-price: 0.03em;
	--pb-text-menu: 2rem;
	--pb-text-menu-sm: 2.35rem;
	--pb-tracking-menu: 0.08em;
	--pb-display-home: clamp(2.5rem, 7vw, 6.25rem);

	--pb-max: 1600px;
	--pb-gutter: 1.25rem;
	--pb-gutter-insights: 4rem;

	--pb-section-editorial: 5rem;
	--pb-section-editorial-mid: 6rem;
	--pb-section-editorial-large: 8rem;
	--pb-section-brands: 3.5rem;
	--pb-section-insights-band: 4rem;

	--pb-screen-sm: 640px;
	--pb-screen-md: 768px;
	--pb-screen-lg: 1024px;
	--pb-screen-xl: 1280px;

	--pb-header-offset: 7.5rem;
}

@media (min-width: 640px) {
	:root {
		--pb-text-card-title: 1.125rem;
		--pb-gutter: 2rem;
		--pb-section-brands: 4rem;
		--pb-section-insights-band: 5rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--pb-gutter: 3rem;
		--pb-section-brands: 5rem;
		--pb-section-insights-band: 6rem;
	}
}