/* ==========================================================================
   VARIABLES-COMPANY.CSS
========================================================================== */

/*
*  This CSS file defines all company-specific variables for color, typography,
*  layout, framework, etc.
*
*  NOTE: For global variables that affect all companies, please refer to
*  "variables-global.css".
*/

:root {

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

	Figma file: https://www.figma.com/file/sJfgoXSIUEMS31RLBhsZ77/Tackle-Design-System?node-id=0%3A1&mode=dev
	====================================================================== */

	/* Branding Colors
	====================================================================== */
	--color-brand-primary-01:					#b70510;				   /* Primary brand color */
	--color-brand-primary-02:					#92040d;				   /* Primary brand color (hover) */
	--color-brand-secondary-01:					#000000;				   /* Secondary brand color */
	--color-brand-secondary-02:					#4a4a4a;				   /* Secondary brand color (hover) */
	--color-brand-tertiary-01:					#757575;				   /* Tertiary brand color */
	--color-brand-tertiary-02:					#999999;				   /* Tertiary brand color (hover) */
	--color-brand-text-on-primary:				#ffffff;				   /* Text color on primary */
	--color-brand-text-on-secondary:			#949494;				   /* Text color on secondary */
	--color-brand-text-on-tertiary:				#000000;				   /* Text color on tertiary */

	/* Holiday Colors
	====================================================================== */
	--color-holiday-01:							#FFFFFF;				   /* Holiday color option #1 ("white" replacement option - primarily for text) */
	--color-holiday-02:							#212121;				   /* Holiday color option #2 ("black" replacement option - primarily for text) */
	--color-holiday-03:							#b62525;				   /* Holiday color option #3 (primarily for button background) */
	--color-holiday-04:							#4a4c20;				   /* Holiday color option #4 (primarily for button background) */
	--color-text-holiday-on-03:					var(--color-holiday-01);	/* Button text color on "color-holiday-01" background */
	--color-text-holiday-on-04:					var(--color-holiday-01);	/* Button text color on "color-holiday-02" background */
	--color-text-holiday-on-05:					var(--color-holiday-01);	/* Button text color on "color-holiday-03" background */
	--color-text-holiday-on-06:					var(--color-holiday-01);	/* Button text color on "color-holiday-04" background */


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

	Figma file: https://www.figma.com/file/sJfgoXSIUEMS31RLBhsZ77/Tackle-Design-System?node-id=17%3A833&mode=dev

	Make sure that all @font-face calls are included at the bottom of this
	file to account for all of the font families, styles, and weights
	defined in the variables below.
	====================================================================== */

	/* Font Families

	Note:	The first font name in each variable is the only one that
			needs to be updated on each site (ex: "Roboto"). All other
			font names are "fallbacks".
	====================================================================== */
	--font-family-01:							"Roboto","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";				/* Used for headings */
	--font-family-02:							"Roboto","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";				/* Used for body copy */
	--font-family-holiday-01:					"Chonburi", "Playfair Display","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";	/* Used for holiday headings */
	--font-family-holiday-02:					"Nunito", "Roboto","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";				/* Used for holiday body copy */

	/* Font Weight (Holiday)
	====================================================================== */
	--font-weight-holiday-01:					400;
	--font-weight-holiday-02:					500;

	/* Line Height (Holiday)
	====================================================================== */
	--font-line-height-holiday-01:				1;
	--font-line-height-holiday-02:				1;


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

	Figma file: https://www.figma.com/file/sJfgoXSIUEMS31RLBhsZ77/Tackle-Design-System?node-id=319%3A1031&mode=dev
	====================================================================== */
	--image-rod:								var(--aspect-350-1532);		/* Rods */
	--image-reel:								var(--aspect-4-3);			/* Reels */
	--image-bait:								var(--aspect-4-3);			/* Bait */
	--image-shoe:								var(--aspect-4-3);			/* Shoes */
	--image-apparel:							var(--aspect-3-4);			/* Apparel */
	--image-hard-good:							var(--aspect-4-3);			/* Hard goods & accessories */
	--image-pro:								2/3;						/* Pro fishermen */
	--image-mixed:								var(--aspect-1-1);			/* Mixed products (applies only to image wrapper) */
	--image-undefined:							var(--aspect-4-3);			/* Undefined products */
}

/* ==========================================================================
  FONT STACK

  Generally, fonts are specific to each site although most sites will share
  the same fonts. Make sure that all families, styles, and weights are
  accounted for below. Also, each site will have specific holiday fonts
  and you will need to make sure that those are accounted for below.
========================================================================== */

/* roboto-300 - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	src: url('https://img.skatewarehouse.com/fonts/roboto-v30-latin-300.woff2') format('woff2'); /* Super Modern Browsers */
}
/* roboto-regular - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('https://img.skatewarehouse.com/fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Super Modern Browsers */
}
/* roboto-italic - latin */
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	src: url('https://img.skatewarehouse.com/fonts/roboto-v30-latin-italic.woff2') format('woff2'); /* Super Modern Browsers */
}
/* roboto-500 - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: url('https://img.skatewarehouse.com/fonts/roboto-v30-latin-500.woff2') format('woff2'); /* Super Modern Browsers */
}
/* roboto-700 - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url('https://img.skatewarehouse.com/fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
}

/* libre-baskerville-regular - latin */
@font-face {
	font-family: 'Libre Baskerville';
	font-style: normal;
	font-weight: 400;
	src: url('https://img.skatewarehouse.com/fonts/libre-baskerville-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
}
/* libre-baskerville-italic - latin */
@font-face {
	font-family: 'Libre Baskerville';
	font-style: italic;
	font-weight: 400;
	src: url('https://img.skatewarehouse.com/fonts/libre-baskerville-v14-latin-italic.woff2') format('woff2'); /* Super Modern Browsers */
}
/* libre-baskerville-700 - latin */
@font-face {
	font-family: 'Libre Baskerville';
	font-style: normal;
	font-weight: 700;
	src: url('https://img.skatewarehouse.com/fonts/libre-baskerville-v14-latin-700.woff2') format('woff2'); /* Super Modern Browsers */
}
/* HOLIDAY FONTS BELOW - DO NOT REMOVE */
/* playfair-display-600 - latin */
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	src: url('https://img.skatewarehouse.com/fonts/playfair-display-v30-latin-600.woff2') format('woff2'); /* Super Modern Browsers */

}
/* nunito-sans-regular - latin */
@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 400;
	src: url('https://img.skatewarehouse.com/fonts/nunito-sans-v12-latin-regular.woff2') format('woff2'); /* Super Modern Browsers */
}
/* nunito-500 - latin */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 500;
	src: url('https://img.skatewarehouse.com/fonts/nunito-v26-latin-500.woff2') format('woff2'); /* Super Modern Browsers */
}
/* chonburi-regular - latin */
@font-face {
	font-family: 'Chonburi';
	font-style: normal;
	font-weight: 400;
	src: url('https://img.skatewarehouse.com/fonts/chonburi-v12-latin-regular.woff2') format('woff2'); /* Super Modern Browsers */
}