/* ==========================================================================
   VARIABLES-GLOBAL.CSS
========================================================================== */

/*
*  This CSS file defines all variables for color, typography,
*  layout, framework, etc., shared by all companies (sites). For variables
*  specific to a company, please refer to "variables-company.css".
*
*  NOTE: The variables in this file should NOT be changed unless it a change
*  that is meant to affect all companies.
*/

:root {

	/* ======================================================================
	GRID LAYOUT

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=0%3A1&mode=dev

	These are essentially Bootstrap overrides, plus the addition of the
	480px and 1448px breakpoints.
	====================================================================== */

	--breakpoint-xxs:		0;
	--breakpoint-xs:		480px;
	--breakpoint-sm:		576px;
	--breakpoint-md:		768px;
	--breakpoint-lg:		992px;
	--breakpoint-xl:		1200px;
	--breakpoint-xxl:		1448px;


	/* ======================================================================
	PRIMITIVE COLOR VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=6134%3A24555&mode=dev
	====================================================================== */

	--white:				#ffffff;
	--black:				#000000;
	--black-transparent:	rgba(0,0,0,0.5);

	--gray-50:				#f4f4f4;
	--gray-100:				#e6e6e6;
	--gray-200:				#cccccc;
	--gray-300:				#b3b3b3;
	--gray-400:				#999999;
	--gray-500:				#757575;
	--gray-600:				#666666;
	--gray-700:				#4d4d4d;
	--gray-800:				#333333;
	--gray-900:				#1a1a1a;

	--red-100:				#fff5f6;
	--red-200:				#ffbdc2;
	--red-300:				#f57f87;
	--red-400:				#eb4650;
	--red-500:				#e0121f;
	--red-600:				#b21d26;
	--red-700:				#852026;
	--red-800:				#571c1f;
	--red-900:				#42171a;

	--green-100:			#f5fffd;
	--green-200:			#9ad6ca;
	--green-300:			#58b8a5;
	--green-400:			#2b9983;
	--green-500:			#007a62;
	--green-600:			#0a6150;
	--green-700:			#0e473c;
	--green-800:			#0e2e28;
	--green-900:			#081916;

	--blue-100:				#f5f8ff;
	--blue-200:				#bdd3ff;
	--blue-300:				#7fa6f5;
	--blue-400:				#467deb;
	--blue-500:				#215ad0;
	--blue-500-transparent:	rgba(33,90,208,0.05);
	--blue-600:				#1d4fb2;
	--blue-700:				#204185;
	--blue-800:				#1c2f57;
	--blue-900:				#172542;

	--yellow-100:			#fffdf5;
	--yellow-200:			#fff4bd;
	--yellow-300:			#f5e17f;
	--yellow-400:			#ebcf46;
	--yellow-500:			#e0bc00;
	--yellow-600:			#b29a1d;
	--yellow-700:			#857420;
	--yellow-800:			#574d1c;
	--yellow-900:			#423b17;

	--orange-100:			#fff9f5;
	--orange-200:			#ffd8bd;
	--orange-300:			#f5b07f;
	--orange-400:			#eb8b46;
	--orange-500:			#e06912;
	--orange-600:			#b25b1d;
	--orange-700:			#854a20;
	--orange-800:			#57341c;
	--orange-900:			#422917;

	--purple-100:			#f6f5ff;
	--purple-200:			#c4bdff;
	--purple-300:			#a780e5;
	--purple-400:			#844fdb;
	--purple-500:			#6421d1;
	--purple-600:			#5624a6;
	--purple-700:			#44227a;
	--purple-800:			#2f1b4f;
	--purple-900:			#24163b;


	/* ======================================================================
	UTILITY PRIMITIVE COLOR VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=6134%3A24555&mode=dev
	====================================================================== */

	/* Red
	====================================================================== */
	--color-critical:							#e0121f;
	--color-promo:								#b21d26;

	/* Orange
	====================================================================== */
	--color-backorder:							#c3541b;

	/* Green
	====================================================================== */
	--color-success:							var(--green-600);


	/* ======================================================================
	COLOR VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=6134%3A24555&mode=dev
	====================================================================== */

	/* Text
	====================================================================== */
	--color-text-primary-dark:					var(--black);				/* Primary text color on light background */
	--color-text-primary-light:					var(--white);				/* Primary text color on dark backgrounds */
	--color-text-secondary:						var(--gray-500);			/* Secondary text */
	--color-text-critical:						var(--critical);			/* Critical error text outside of a notification */
	--color-text-promo:							var(--color-promo);			/* Promotional text */

	/* Buttons */
	--color-text-button-on-critical:			var(--white);				/* Text on critical surface */
	--color-text-button-on-critical-hover:		var(--white);				/* Text on critical surface (hover) */
	--color-text-button-on-cart:				var(--white);				/* Text on cart surface */
	--color-text-button-on-cart-hover:			var(--white);				/* Text on cart surface (hover) */
	--color-text-button-on-ghost:				var(--black);				/* Text on ghost surface */
	--color-text-button-on-ghost-hover:			var(--white);				/* Text on ghost surface (hover) */

	/* Form Elements */
	--color-text-form-helper:					var(--gray-500);			/* Helper text color for inputs, selects and fields */
	--color-text-form-placeholder:				var(--gray-500);			/* Placeholder text color for inactive forms or lifted labels */
	--color-text-form-active:					var(--black);				/* Text color for text that has been input by a user */

	/* Links */
	--color-text-link-default:					var(--black);				/* Default link color */
	--color-text-link-hover:					var(--gray-700);			/* Link text color on hover */
	--color-text-link-visited:					var(--purple-500);			/* Visited link text color */

	/* Price */
	--color-text-price-primary:					var(--black);				/* Standard price text color */
	--color-text-price-msrp:					var(--gray-500);			/* MSRP price */
	--color-text-price-promo:					var(--color-promo);			/* Sale or promotional price display */

	/* Flags */
	--color-text-flag-promo:					var(--color-promo);			/* Clearance flag */
	--color-text-flag-new:						var(--green-600);			/* New flag */
	--color-text-flag-bestseller:				var(--blue-600);			/* Best Seller flag */
	--color-text-flag-preorder:					var(--purple-400);			/* Pre-Order / Coming Soon flag */

	/* Surface
	====================================================================== */
	--color-surface-primary:					var(--white);				/* The main surface color for most elements */
	--color-surface-primary-hover:				var(--gray-50);				/* Hover surface color for primary surfaces */
	--color-surface-primary-active:				var(--gray-50);				/* Active surface color for primary surfaces */
	--color-surface-primary-inverse:			var(--black);				/* Darker surface color */
	--color-surface-secondary:					var(--gray-50);				/* Lighter surface color */
	--color-surface-promo:						var(--color-promo);				/* Surface color for promotional materials */

	/* Buttons */
	--color-surface-button-critical:			var(--critical);			/* Critical button background */
	--color-surface-button-critical-hover:		var(--red-600);				/* Critical button background hover */
	--color-surface-button-cart:				var(--green-500);			/* Cart button background */
	--color-surface-button-cart-hover:			var(--green-600);			/* Cart button background hover */
	--color-surface-button-ghost:				var(--white);				/* Ghost buttonbackground color */
	--color-surface-button-ghost-hover:			var(--black);				/* Ghost button hover color */

	/* Form Elements */
	--color-surface-form-default:				var(--white);				/* Default surface for all form elements */
	--color-surface-form-selected:				var(--blue-500);			/* Surface color for selected elements such as checkboxes and radios */
	--color-surface-form-selected-secondary:	var(--blue-500-transparent);/* Surface color for selected radio containers */
	--color-surface-form-critical:				var(--critical);			/* Surface color for critical errors within checkboxes and radios */

	/* Border
	====================================================================== */
	--color-border-primary:						var(--gray-200);			/* Standard border for non card elements */
	--color-border-primary-hover:				var(--black);				/* Hover border for non card elements */
	--color-border-primary-active:				var(--black);				/* Active border for non card elements */
	--color-border-secondary:					var(--gray-100);			/* Lighter border for more subtle separations */
	--color-border-light:						var(--white);				/* Border for use on darker backgrounds and surfaces */
	--color-border-dark:						var(--black);				/* Border for use on lighter backgrounds and surfaces */

	/* Buttons */
	--color-border-button-ghost:				var(--gray-500);			/* Border for ghost buttons */
	--color-border-button-ghost-hover:			var(--black);				/* Hover border for ghost buttons */

	/* Form Elements */
	--color-border-form-default:				var(--gray-500);			/* Standard border for form elements */
	--color-border-form-hover:					var(--black);				/* Hover border for radio container */
	--color-border-form-active:					var(--black);				/* Border color for active form elements */
	--color-border-form-selected:				var(--blue-500);			/* Border color for selected elements such as checkboxes and radios */
	--color-border-form-critical:				var(--critical);			/* Border color for critical errors within checkboxes and radios */

	/* Cards */
	--color-border-card-default:				var(--gray-200);			/* Standard border for card elements */
	--color-border-card-hover:					var(--black);				/* Hover border for card elements */

	/* Notifications
	====================================================================== */
	/* Info */
	--color-text-support-info:					var(--blue-500);			/* Info text & border */
	--color-border-support-info:				var(--blue-500);			/* Info text & border */
	--color-surface-support-info:				var(--blue-100);			/* Info notification background */

	/* Warnings */
	--color-text-support-warning:				var(--yellow-700);			/* Warning text & border */
	--color-border-support-warning:				var(--yellow-700);			/* Warning text & border */
	--color-surface-support-warning:			var(--yellow-100);			/* Warning notification background */

	/* Critical */
	--color-text-support-critical:				var(--critical);			/* Critical text & border */
	--color-border-support-critical:			var(--critical);			/* Critical text & border */
	--color-surface-support-critical:			var(--red-100);				/* Critical notification background */

	/* Success */
	--color-text-support-success:				var(--green-500);			/* Success text & border */
	--color-border-support-success:				var(--green-500);			/* Success text & border */
	--color-surface-support-success:			var(--green-100);			/* Success notification background */

	/* Backorder */
	--color-text-support-backorder:				var(--color-backorder);			/* Backorder text & border */
	--color-border-support-backorder:			var(--color-backorder);			/* Backorder text & border */
	--color-surface-support-backorder:			var(--orange-100);			/* Backorder notification background */

	/* Ordering
	====================================================================== */
	/* Available (When a product is available) */
	--color-surface-order-available:			var(--white);				/* Available surface */
	--color-surface-order-available-hover:		var(--white);				/* Available surface (hover) */
	--color-surface-order-available-active:		var(--black);				/* Available surface (active) */
	--color-border-order-available:				var(--white);				/* Available border (style images) */
	--color-border-order-box-available:			var(--gray-500);			/* Available border (box style & style dropdown) */
	--color-border-order-available-hover:		var(--black);				/* Available border (hover) */
	--color-border-order-available-active:		var(--black);				/* Available border (active) */
	--color-text-order-available:				var(--black);				/* Available text */
	--color-text-order-available-hover:			var(--black);				/* Available text (hover) */
	--color-text-order-available-active:		var(--white);				/* Available text (active) */

	/* Unavailable (When a product is unavailable) */
	--color-surface-order-unavailable:			var(--gray-50);				/* Unavailable surface */
	--color-surface-order-unavailable-hover:	var(--gray-50);				/* Unavailable surface (hover) */
	--color-surface-order-unavailable-active:	var(--gray-500);			/* Unavailable surface (active) */
	--color-border-order-unavailable:			var(--white);				/* Unavailable border (style images) */
	--color-border-order-unavailable-hover:		var(--gray-500);			/* Unavailable border (hover) */
	--color-border-order-unavailable-active:	var(--gray-500);			/* Unavailable border (active) */
	--color-text-order-unavailable:				var(--gray-500);			/* Unavailable text */
	--color-text-order-unavailable-hover:		var(--gray-500);			/* Unavailable text (hover) */
	--color-text-order-unavailable-active:		var(--white);				/* Unavailable text (active) */

	/* Backorder (When a product is backordered) */
	--color-surface-order-backorder:			var(--white);				/* Backorder surface */
	--color-surface-order-backorder-hover:		var(--white);				/* Backorder surface (hover) */
	--color-surface-order-backorder-active:		var(--color-backorder);			/* Backorder surface (active) */
	--color-border-order-backorder:				var(--color-backorder);			/* Backorder border (style images) */
	--color-border-order-backorder-hover:		var(--color-backorder);			/* Backorder border (hover) */
	--color-border-order-backorder-active:		var(--color-backorder);			/* Backorder border (active) */
	--color-text-order-backorder:				var(--color-backorder);			/* Backorder text */
	--color-text-order-backorder-hover:			var(--color-backorder);			/* Backorder text (hover) */
	--color-text-order-backorder-active:		var(--white);				/* Backorder text (active) */

	/* Background
	====================================================================== */
	--color-bg-primary:							var(--white);				/* Main color for page backgrounds */
	--color-bg-inverse:							var(--black);				/* Darker background color option */
	--color-bg-secondary:						var(--gray-50);				/* Lighter background color option */
	--color-bg-overlay:							var(--black-transparent);	/* Modal background */


	/* ======================================================================
	PRIMITIVE FONT VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=5321%3A3359&mode=dev

	All @font-face calls and font family variables can be found in
	"variables-company.css".
	====================================================================== */

	/* Style
	====================================================================== */
	--font-style-normal:						normal;
	--font-style-italic:						italic;

	/* Weight
	====================================================================== */
	--font-weight-reg:							400;
	--font-weight-med:							500;
	--font-weight-semi:							600;
	--font-weight-bold:							700;
	--font-weight-extra:						800;

	/* Size
	====================================================================== */
	--font-size-25:								0.75rem;					/* 12px */
	--font-size-50:								0.875rem;					/* 14px */
	--font-size-100:							1rem;						/* 16px */
	--font-size-200:							1.125rem;					/* 18px */
	--font-size-300:							1.25rem;					/* 20px */
	--font-size-400:							1.5rem;						/* 24px */
	--font-size-500:							2rem;						/* 32px */
	--font-size-600:							2.5rem;						/* 40px */
	--font-size-700:							3rem;						/* 48px */
	--font-size-800:							3.5rem;						/* 56px */
	--font-size-900:							4rem;						/* 64px */

	/* Line Height
	====================================================================== */
	--font-line-height-01:						0.875;
	--font-line-height-02:						1;
	--font-line-height-03:						1.125;
	--font-line-height-04:						1.25;
	--font-line-height-05:						1.5;
	--font-line-height-06:						1.75;

	/* Letter Spacing
	====================================================================== */
	--font-letter-spacing-sm:					0.03125rem;					/* .5px */


	/* ======================================================================
	TYPOGRAPHY VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=2623%3A2795&mode=dev

	These variables are to be used like this:
	"font: var(--text-heading-01);"
	====================================================================== */

	/* Headings
	====================================================================== */
	--text-heading-01:							var(--font-style-normal) var(--font-weight-bold) var(--font-size-600)/var(--font-line-height-04) var(--font-family-01);		/* Page headings */
	--text-heading-02:							var(--font-style-normal) var(--font-weight-bold) var(--font-size-500)/var(--font-line-height-04) var(--font-family-01);		/* Section headings */
	--text-heading-03:							var(--font-style-normal) var(--font-weight-med) var(--font-size-400)/var(--font-line-height-04) var(--font-family-01);		/* Sub section headings/Modal titles */
	--text-heading-04:							var(--font-style-normal) var(--font-weight-med) var(--font-size-300)/var(--font-line-height-04) var(--font-family-01);		/* Sub sub section headings */

	/* Titles
	====================================================================== */
	--text-title-sm:							var(--font-style-normal) var(--font-weight-med) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);
	--text-title-md:							var(--font-style-normal) var(--font-weight-med) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);
	--text-title-lg:							var(--font-style-normal) var(--font-weight-med) var(--font-size-200)/var(--font-line-height-05) var(--font-family-02);
	--text-title-xl:							var(--font-style-normal) var(--font-weight-med) var(--font-size-400)/var(--font-line-height-05) var(--font-family-02);

	/* Forms
	====================================================================== */
	--text-form-label:							var(--font-style-normal) var(--font-weight-bold) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Form UI labels */
	--text-form-field-label-raised:				var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Raised label for active form inputs and text areas */
	--text-form-field-label:					var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Form field placeholder and user input text */
	--text-form-helper:							var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Form helper text located below inputs, selects, etc. */
	--text-form-option:							var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Select menu values */

	/* Body
	====================================================================== */
	--text-body-xs:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-06) var(--font-family-02);		/* Extra small text display */
	--text-body-xs-compact:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Extra small text display - smaller line height */
	--text-body-sm:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-06) var(--font-family-02);		/* Small text display */
	--text-body-sm-compact:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Small text display - smaller line height */
	--text-body-md:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-06) var(--font-family-02);		/* Medium text display */
	--text-body-md-compact:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Medium text display - smaller line height */
	--text-body-lg:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-200)/var(--font-line-height-06) var(--font-family-02);		/* Large text display */
	--text-body-lg-compact:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-200)/var(--font-line-height-05) var(--font-family-02);		/* Large text display - smaller line height */

	/* Links
	====================================================================== */
	--text-link-sm:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Small text link */
	--text-link-sm-hover:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Small text link (hover) */
	--text-link-sm-visited:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-05) var(--font-family-02);		/* Small text link (visited) */
	--text-link-md:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Medium text link */
	--text-link-md-hover:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Medium text link (hover) */
	--text-link-md-visited:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Medium text link (visited) */
	--text-link-lg:								var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large text link */
	--text-link-lg-hover:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large text link (hover) */
	--text-link-lg-visited:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large text link (visited) */

	/* Flags
	====================================================================== */
	--text-flag:								var(--font-style-normal) var(--font-weight-med) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Product flags */

	/* Product Name & Type
	====================================================================== */
	--text-product-name-lg:						var(--font-style-normal) var(--font-weight-bold) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large display product name */
	--text-product-name-sm:						var(--font-style-normal) var(--font-weight-bold) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Small display product name */
	--text-product-type-lg:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large display product type/model */
	--text-product-type-sm:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Small display product type/model */

	/* Price
	====================================================================== */
	--text-price-sm:							var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Small product price displays */
	--text-price-sm-promo:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Small promotional price displays */
	--text-price-md:							var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large product price displays */
	--text-price-md-promo:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Large promotional price displays */
	--text-price-lg:							var(--font-style-normal) var(--font-weight-med) var(--font-size-400)/var(--font-line-height-04) var(--font-family-02);		/* Promo cards */
	--text-price-lg-promo:						var(--font-style-normal) var(--font-weight-med) var(--font-size-400)/var(--font-line-height-04) var(--font-family-02);		/* Promo cards */
	--text-price-msrp-sm:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Product displays */
	--text-price-msrp-md:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Product displays */

	/* Buttons
	====================================================================== */
	--text-button-lg:							var(--font-style-normal) var(--font-weight-med) var(--font-size-100)/var(--font-line-height-05) var(--font-family-02);		/* Button text large */
	--text-button-sm:							var(--font-style-normal) var(--font-weight-med) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Button text small */

	/* Menu
	====================================================================== */
	--text-menu-primary:						var(--font-style-normal) var(--font-weight-bold) var(--font-size-100)/var(--font-line-height-06) var(--font-family-02);		/* Main menu links */
	--text-menu-secondary:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Menu sub links under main menu section headings */
	--text-menu-secondary-hover:				var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Menu sub links - hover state */
	--text-menu-sub:							var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Menu secondary links */
	--text-menu-sub-hover:						var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-05) var(--font-family-02);		/* Menu secondary links - hover state */

	/* Marketing Tiles
	====================================================================== */
	--text-marketing-headline-xs:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-400)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 320, 480, 768 */
	--text-marketing-headline-sm:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-500)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 576, 992, 1200, 1448 */
	--text-marketing-headline-md:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-600)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 768 */
	--text-marketing-headline-lg:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-700)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 992 */
	--text-marketing-headline-xl:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-800)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 1200 */
	--text-marketing-headline-xxl:				var(--font-style-normal) var(--font-weight-bold) var(--font-size-900)/var(--font-line-height-03) var(--font-family-02);		/* Headline - 1448 */
	--text-marketing-content-sm:				var(--font-style-normal) var(--font-weight-reg) var(--font-size-50)/var(--font-line-height-04) var(--font-family-02);		/* Top Line - 320, 480/Sub Line - 320, 480 */
	--text-marketing-content-md:				var(--font-style-normal) var(--font-weight-reg) var(--font-size-100)/var(--font-line-height-04) var(--font-family-02);		/* Top Line - 576, 768, 992, 1200, 1448
																																											   Sub Line - 576, 768, 992, 1200, 1448 */
	--text-marketing-content-lg:				var(--font-style-normal) var(--font-weight-reg) var(--font-size-300)/var(--font-line-height-04) var(--font-family-02);		/* Top Line - 768, 992/Sub Line - 768, 992 */
	--text-marketing-content-xl:				var(--font-style-normal) var(--font-weight-reg) var(--font-size-400)/var(--font-line-height-04) var(--font-family-02);		/* Top Line - 1200, 1448 */
	--text-marketing-content-disclaimer:		var(--font-style-normal) var(--font-weight-reg) var(--font-size-25)/var(--font-line-height-03) var(--font-family-02);		/* Disclaimer text all sizes */

	/* Marketing Tiles (Holiday)
	====================================================================== */
	--text-headline-holiday-sm:					var(--font-style-normal) var(--font-weight-holiday-01) var(--font-size-400)/var(--font-line-height-holiday-01) var(--font-family-holiday-01); /* Headline - 320, 480, 768 */
	--text-headline-holiday-md:					var(--font-style-normal) var(--font-weight-holiday-01) var(--font-size-500)/var(--font-line-height-holiday-01) var(--font-family-holiday-01); /* Headline - 576, 992, 1200, 1448 */
	--text-headline-holiday-lg:					var(--font-style-normal) var(--font-weight-holiday-01) var(--font-size-600)/var(--font-line-height-holiday-01) var(--font-family-holiday-01); /* Headline - 768 */
	--text-headline-holiday-xl:					var(--font-style-normal) var(--font-weight-holiday-01) var(--font-size-700)/var(--font-line-height-holiday-01) var(--font-family-holiday-01); /* Headline - 992 */
	--text-headline-holiday-xxl:				var(--font-style-normal) var(--font-weight-holiday-01) var(--font-size-800)/var(--font-line-height-holiday-01) var(--font-family-holiday-01); /* Headline - 1200, 1448 */
	--text-content-holiday-sm:					var(--font-style-normal) var(--font-weight-holiday-02) var(--font-size-50)/var(--font-line-height-holiday-02) var(--font-family-holiday-02);  /* Top Line - 320, 480
																																																 Sub Line - 320, 480 */
	--text-content-holiday-md:					var(--font-style-normal) var(--font-weight-holiday-02) var(--font-size-100)/var(--font-line-height-holiday-02) var(--font-family-holiday-02); /* Top Line - 576, 768, 992, 1200, 1448
																																																 Sub Line - 576, 768, 992, 1200, 1448 */
	--text-content-holiday-lg:					var(--font-style-normal) var(--font-weight-holiday-02) var(--font-size-300)/var(--font-line-height-holiday-02) var(--font-family-holiday-02); /* Top Line - 768, 992/Sub Line - 768, 992 */
	--text-content-holiday-xl:					var(--font-style-normal) var(--font-weight-holiday-02) var(--font-size-400)/var(--font-line-height-holiday-02) var(--font-family-holiday-02); /* Top Line - 1200, 1448 */


	/* ======================================================================
	SPACING VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=2901%3A9965&mode=dev
	====================================================================== */

	/* Positive
	====================================================================== */
	--spacing-01:								4px;
	--spacing-02:								8px;
	--spacing-03:								12px;
	--spacing-04:								16px;
	--spacing-05:								20px;
	--spacing-06:								24px;
	--spacing-07:								28px;
	--spacing-08:								32px;
	--spacing-09:								36px;
	--spacing-10:								40px;
	--spacing-11:								44px;
	--spacing-12:								48px;
	--spacing-13:								52px;
	--spacing-14:								56px;
	--spacing-15:								60px;
	--spacing-16:								64px;

	/* Negative
	====================================================================== */
	--spacing-01-negative:						-4px;
	--spacing-02-negative:						-8px;
	--spacing-03-negative:						-12px;
	--spacing-04-negative:						-16px;
	--spacing-05-negative:						-20px;
	--spacing-06-negative:						-24px;
	--spacing-07-negative:						-28px;
	--spacing-08-negative:						-32px;
	--spacing-09-negative:						-36px;
	--spacing-10-negative:						-40px;
	--spacing-11-negative:						-44px;
	--spacing-12-negative:						-48px;
	--spacing-13-negative:						-52px;
	--spacing-14-negative:						-56px;
	--spacing-15-negative:						-60px;
	--spacing-16-negative:						-64px;

	/* Negative + Border
	====================================================================== */
	--spacing-00-negative-border:				-1px;
	--spacing-01-negative-border:				-5px;
	--spacing-02-negative-border:				-9px;
	--spacing-03-negative-border:				-13px;
	--spacing-04-negative-border:				-17px;
	--spacing-05-negative-border:				-21px;
	--spacing-06-negative-border:				-25px;
	--spacing-07-negative-border:				-29px;
	--spacing-08-negative-border:				-33px;
	--spacing-09-negative-border:				-37px;
	--spacing-10-negative-border:				-41px;
	--spacing-11-negative-border:				-45px;
	--spacing-12-negative-border:				-49px;
	--spacing-13-negative-border:				-53px;
	--spacing-14-negative-border:				-57px;
	--spacing-15-negative-border:				-61px;
	--spacing-16-negative-border:				-65px;


	/* ======================================================================
	BORDER VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=7946%3A15842&mode=dev
	====================================================================== */
	--border-radius-sm:							4px;						/* Buttons, images, tags */
	--border-radius-md:							8px;						/* Cards, images, components */
	--border-radius-lg:							200px;						/* Tags, nav cats */
	--border-weight-01:							1px;						/* Standard border */
	--border-weight-02:							2px;						/* Hover border */

	/* Box Shadow
	====================================================================== */
	--box-shadow-black:							0 0 0 1px var(--black);		/* Hover border general */
	--box-shadow-gray:							0 0 0 1px var(--gray-500);	/* Hover border for unavailable ordering styles */
	--box-shadow-backorder:						0 0 0 1px var(--color-backorder);	/* Hover border for backorder ordering styles */


	/* ======================================================================
	ASPECT RATIO VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=8724%3A20903&mode=dev
	====================================================================== */

	/* Aspect Primitives
	====================================================================== */
	--aspect-1-1:								1/1;						/* Riding hard good */
	--aspect-3-4:								3/4;						/* Apparel, hard goods */
	--aspect-4-3:								4/3;						/* Shoes, baits, Tackle hard goods */
	--aspect-7-12:								7/12;						/* Racquet */
	--aspect-16-9:								16/9;						/* Video & article thumbs */
	--aspect-350-1532:							350/1532;					/* Rods */
	--aspect-517-1200:							517/1200;					/* Racquet thumbs */

	/* Universal Variables
	====================================================================== */
	--image-video:								var(--aspect-16-9);			/* Video thumb */
	--image-article:							var(--aspect-16-9);			/* Article thumb */
	--image-custom:								var(--aspect-1-1);			/* Custom image */


	/* ======================================================================
	OPACITY VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=8033%3A1446&mode=dev
	====================================================================== */
	--opacity-00:								0;
	--opacity-10:								0.1;
	--opacity-20:								0.2;
	--opacity-30:								0.3;
	--opacity-40:								0.4;
	--opacity-50:								0.5;
	--opacity-60:								0.6;
	--opacity-70:								0.7;
	--opacity-80:								0.8;
	--opacity-90:								0.9;
	--opacity-100:								1;


	/* ======================================================================
	Z-INDEX VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=5322%3A47828&mode=dev
	====================================================================== */
	--z-index-10:								1000;						/* Modal header & footers (sticky) */
	--z-index-09:								900;						/* Modals/panels */
	--z-index-08:								800;
	--z-index-07:								700;
	--z-index-06:								600;
	--z-index-05:								500;						/* Sticky headers drawer (active) */
	--z-index-04:								400;						/* Live chat widget & Back to top */
	--z-index-03:								300;						/* Drawer (inactive) */
	--z-index-02:								200;						/* Most content */
	--z-index-01:								100;						/* Backgrounds */


	/* ======================================================================
	PRIMITIVE ICON VARIABLES

	Figma file: https://www.figma.com/file/nJAnQFhJlgFg3N6kqsYwvi/Design-System-(NS)?node-id=4828%3A6816&mode=dev

	To use, set these values on the icon container:
	* width: var(--icon-size-?);						Example: width: var(--icon-size-md);
	* height: var(--icon-size-?);						Example: height: var(--icon-size-md);
	* padding: var(--icon-size-?) 0 0;					Example: padding: var(--icon-size-md) 0 0;
	* background-size: var(--icon-size-?);				Example: background-size: var(--icon-size-md);
	* background-position: var(--icon-position-?-?);	Example: background-position: var(--icon-position-md-black);
	====================================================================== */

	/* Size
	====================================================================== */
	--icon-size-xs:								12px;						/* Extra small */
	--icon-size-sm:								16px;						/* Small */
	--icon-size-md:								24px;						/* Medium */
	--icon-size-lg:								32px;						/* Large */
	--icon-size-xl:								40px;						/* Extra large */

	/* Position (Determines color of icon)
	====================================================================== */
	/* Extra Small */
	--icon-position-xs-black:					0 0;
	--icon-position-xs-gray:					0 -12px;
	--icon-position-xs-white:					0 -24px;
	--icon-position-xs-color:					0 -36px;

	/* Small */
	--icon-position-sm-black:					0 0;
	--icon-position-sm-gray:					0 -16px;
	--icon-position-sm-white:					0 -32px;
	--icon-position-sm-color:					0 -48px;

	/* Medium */
	--icon-position-md-black:					0 0;
	--icon-position-md-gray:					0 -24px;
	--icon-position-md-white:					0 -48px;
	--icon-position-md-color:					0 -72px;

	/* Large */
	--icon-position-lg-black:					0 0;
	--icon-position-lg-gray:					0 -32px;
	--icon-position-lg-white:					0 -64px;
	--icon-position-lg-color:					0 -96px;

	/* Extra Large */
	--icon-position-xl-black:					0 0;
	--icon-position-xl-gray:					0 -40px;
	--icon-position-xl-white:					0 -80px;
	--icon-position-xl-color:					0 -120px;


	/* ======================================================================
	MISC BOOTSTRAP VARIABLE OVERRIDES
	====================================================================== */
	--primary:									var(--color-brand-primary-01);
	--secondary:								var(--color-brand-secondary-01);
	--success:									var(--color-surface-support-success);
	--info:										var(--color-surface-support-info);
	--warning:									var(--color-surface-support-warning);
	--danger:									var(--color-surface-support-critical);
	--font-family-sans-serif:					var(--font-family-01);
}