/* Colours */
:root {
	/* Mode 1 */
	/* color */
	--brand-pink-10: hsl(334 80% 81%);
	--brand-pink-30: hsl(335 73% 70%);
	--brand-pink-50: hsl(334 52% 52%);
	--brand-purple-10: hsl(263 63% 73%);
	--brand-purple-30: hsl(259 41% 59%);
	--brand-purple-5: hsl(259 100% 91%);
	--brand-purple-50: hsl(259 41% 40%);
	--brand-purple-70: hsl(260 32% 29%);
	--neutral-black: hsl(0 0 0%);
	--neutral-grey-10: hsl(217 23% 74%);
	--neutral-grey-30: hsl(217 11% 22%);
	--neutral-grey-5: hsl(217 66% 94%);
	--neutral-grey-50: hsl(216 9% 15%);
	--neutral-white: hsl(0 0 100%);
	--warning-yellow-10: hsl(49 100% 73%);
	--warning-yellow-30: hsl(49 76% 57%);
	--warning-yellow-50: hsl(49 88% 37%);

	/* Mobile */
	/* number */
	--button-stroke: 0.125rem;
	--button-corner-radius: 0.25rem;
	--button-padding-top-bottom: 0.75rem;
	--button-padding-left-right: 1.5rem;
	--button-share-padding-top-bottom: 0.375rem;
	--button-share-padding-left-right: 1rem;
	--button-share-corner-radius: 1.25rem;
	--cards-layout-large-card-corner-radius: 0rem;
	--cards-layout-large-card-stroke: 0.25rem;
	--cards-layout-large-card-padding: 1rem;
	--cards-layout-large-card-gap: 1.5rem;
	--cards-layout-large-card-image-min-width: 10rem;
	--cards-layout-large-card-image-max-width: 19.375rem;
	--cards-layout-large-card-text-min-width: 19.375rem;
	--cards-layout-large-card-category-tab-padding: 0.5rem;
	--cards-layout-large-card-category-tab-line-height: var(--typography-line-height-xsl);
	--cards-layout-large-card-category-tab-type-size: var(--typography-size-sm);
	--cards-layout-small-card-corner-radius: 0rem;
	--cards-layout-small-card-stroke: 0.1875rem;
	--cards-layout-small-card-gap: 1rem;
	--cards-layout-small-card-padding: 1rem;
	--cards-layout-small-card-image-min-width: 10rem;
	--cards-layout-small-card-text-min-width: 12.5rem;
	--cards-layout-small-card-image-max-width: 20rem;
	--cards-layout-small-card-category-tab-padding: 0.375rem;
	--cards-layout-small-card-category-tab-type-size: var(--typography-size-xs);
	--cards-layout-small-card-category-tab-line-height: var(--typography-line-height-xsl);
	--cards-shadow-spread: 0rem;
	--cards-shadow-x-position: 0rem;
	--cards-shadow-y-position: 0rem;
	--cards-shadow-blur: 2rem;
	--layout-columns: 0.25rem;
	--layout-gutter: 1rem;
	--layout-margin: 1rem;
	--layout-vertical-gap: 2rem;
	--layout-breakpoints: 24.375rem;
	--mega-menu-gap: 1.5rem;
	
	--search-heading: 1.125rem;
	--search-button-corner-radius-left-top-bottom: 0.25rem;
	--search-button-corner-radius-right-top-bottom: 0.25rem;
	--search-button-padding-top-bottom: 0.75rem;
	--search-button-padding-left-right: 1.5rem;
	--search-button-height: 2.25rem;
	--search-field-corner-radius: 0.25rem;
	--search-field-height: 2.25rem;
	--typography-line-height-xsl: 1rem;
	--typography-line-height-sm: 1.375rem;
	--typography-line-height-md: 1.75rem;
	--typography-line-height-lg: 2rem;
	--typography-line-height-xl: 2.25rem;
	--typography-line-height-2xl: 2.375rem;
	--typography-line-height-3xl: 2.75rem;
	--typography-size-xs: 0.875rem;
	--typography-size-sm: 1rem;
	--typography-size-md: 1.25rem;
	--typography-size-lg: 1.75rem;
	--typography-size-xl: 2rem;
	--typography-size-2xl: 2.25rem;
	--typography-size-3xl: 2.5rem;
	--typography-weight-regular: 400;
	--typography-weight-medium: 500;
	--typography-weight-semi-bold: 600;
	--typography-weight-bold: 700;
	--typography-weight-extra-bold: 800;

	/* string */
	--typography-family-body: Plus Jakarta Sans;
	--typography-family-heading: Plus Jakarta Sans;
}

/* Responsive */
@media (min-width: 768px) {
	:root {
		/* Tablet */
		/* number */
		--button-stroke: 0.125rem;
		--button-corner-radius: 0.5rem;
		--button-padding-top-bottom: 1rem;
		--button-padding-left-right: 2rem;
		--button-share-padding-top-bottom: 0.5rem;
		--button-share-padding-left-right: 1.125rem;
		--button-share-corner-radius: 1.25rem;
		--cards-shadow-spread: 0rem;
		--cards-shadow-x-position: 0rem;
		--cards-shadow-y-position: 0rem;
		--cards-shadow-blur: 2rem;
		--layout-columns: 0.5rem;
		--layout-gutter: 1.5rem;
		--layout-margin: 1.5rem;
		--layout-vertical-gap: 2.5rem;
		--layout-breakpoints: 48rem;
		--mega-menu-gap: 2rem;
		--search-heading: 1.25rem;
		--search-button-corner-radius-left-top-bottom: 0.25rem;
		--search-button-corner-radius-right-top-bottom: 0.25rem;
		--search-button-padding-top-bottom: 0.75rem;
		--search-button-padding-left-right: 1.5rem;
		--search-button-height: 2.25rem;
		--search-field-corner-radius: 0.25rem;
		--search-field-height: 2.25rem;
		--typography-line-height-xsl: 1.125rem;
		--typography-line-height-sm: 1.5rem;
		--typography-line-height-md: 2rem;
		--typography-line-height-lg: 2.25rem;
		--typography-line-height-xl: 2.5rem;
		--typography-line-height-2xl: 2.75rem;
		--typography-line-height-3xl: 4rem;
		--typography-size-xs: 0.875rem;
		--typography-size-sm: 1.125rem;
		--typography-size-md: 1.5rem;
		--typography-size-lg: 2rem;
		--typography-size-xl: 2.25rem;
		--typography-size-2xl: 2.5rem;
		--typography-size-3xl: 3.75rem;
	}
}

@media (min-width: 992px) {
	:root {
		/* Desktop */
		/* number */
		--button-stroke: 0.125rem;
		--button-corner-radius: 0.5rem;
		--button-padding-top-bottom: 1rem;
		--button-padding-left-right: 2rem;
		--button-share-padding-top-bottom: 0.5rem;
		--button-share-padding-left-right: 1.125rem;
		--button-share-corner-radius: 1.25rem;
		
		--cards-shadow-spread: 0rem;
		--cards-shadow-x-position: 0rem;
		--cards-shadow-y-position: 0rem;
		--cards-shadow-blur: 2rem;
		--layout-columns: 0.75rem;
		--layout-margin: 1.5rem;
		--layout-gutter: 2rem;
		--layout-vertical-gap: 3.5rem;
		--layout-breakpoints: 90rem;
		--mega-menu-gap: 2rem;
		--search-heading: 1.75rem;
		--search-button-corner-radius-left-top-bottom: 0.25rem;
		--search-button-corner-radius-right-top-bottom: 0.25rem;
		--search-button-padding-top-bottom: 0.75rem;
		--search-button-padding-left-right: 1.5rem;
		--search-button-height: 2.25rem;
		--search-field-corner-radius: 0.25rem;
		--search-field-height: 2.25rem;
		--typography-line-height-xsl: 1.125rem;
		--typography-line-height-sm: 1.5rem;
		--typography-line-height-md: 2rem;
		--typography-line-height-lg: 2.25rem;
		--typography-line-height-xl: 2.5rem;
		--typography-line-height-2xl: 2.75rem;
		--typography-line-height-3xl: 4rem;
		--typography-size-xs: 0.875rem;
		--typography-size-sm: 1.125rem;
		--typography-size-md: 1.5rem;
		--typography-size-lg: 2rem;
		--typography-size-xl: 2.25rem;
		--typography-size-2xl: 2.5rem;
		--typography-size-3xl: 3.75rem;


	}
}

/** Cards */
/** these need to change for container width */

@container (min-width: 420px) {
	:root {
		--cards-layout-large-card-corner-radius: 0rem;
		--cards-layout-large-card-stroke: 0.375rem;
		--cards-layout-large-card-padding: 1.5rem;
		--cards-layout-large-card-gap: 2rem;
		--cards-layout-large-card-image-min-width: 10rem;
		--cards-layout-large-card-image-max-width: 19.375rem;
		--cards-layout-large-card-text-min-width: 19.375rem;
		--cards-layout-large-card-category-tab-padding: 0.625rem;
		--cards-layout-large-card-category-tab-line-height: var(--typography-line-height-xsl);
		--cards-layout-large-card-category-tab-type-size: var(--typography-size-sm);
		--cards-layout-small-card-corner-radius: 0rem;
		--cards-layout-small-card-stroke: 0.25rem;
		--cards-layout-small-card-padding: 1rem;
		--cards-layout-small-card-gap: 1.5rem;
		--cards-layout-small-card-image-min-width: 10rem;
		--cards-layout-small-card-image-max-width: 19.375rem;
		--cards-layout-small-card-text-min-width: 19.375rem;
		--cards-layout-small-card-category-tab-padding: 0.5rem;
		--cards-layout-small-card-category-tab-type-size: var(--typography-size-xs);
		--cards-layout-small-card-category-tab-line-height: var(--typography-line-height-xsl);
	}
}

@container (min-width: 943px) {
	:root {
	--cards-layout-large-card-corner-radius: 0rem;
		--cards-layout-large-card-stroke: 0.375rem;
		--cards-layout-large-card-padding: 2rem;
		--cards-layout-large-card-gap: 2.5rem;
		--cards-layout-large-card-image-min-width: 3.75rem;
		--cards-layout-large-card-image-max-width: 19.375rem;
		--cards-layout-large-card-text-min-width: 19.375rem;
		--cards-layout-large-card-category-tab-padding: 0.625rem;
		--cards-layout-large-card-category-tab-line-height: var(--typography-line-height-xsl);
		--cards-layout-large-card-category-tab-type-size: var(--typography-size-sm);
		--cards-layout-small-card-corner-radius: 0rem;
		--cards-layout-small-card-stroke: 0.25rem;
		--cards-layout-small-card-gap: 0.5rem;
		--cards-layout-small-card-padding: 1.5rem;
		--cards-layout-small-card-image-max-width: 8.75rem;
		--cards-layout-small-card-image-min-width: 8.75rem;
		--cards-layout-small-card-text-min-width: 16.25rem;
		--cards-layout-small-card-category-tab-padding: 0.5rem;
		--cards-layout-small-card-category-tab-type-size: var(--typography-size-xs);
		--cards-layout-small-card-category-tab-line-height: var(--typography-line-height-xsl);
	}
}