/**
 * The .variables class should be composed into the root class of an MFE or app.
 * After doing so, the variables will be available to CSS in that app's DOM tree.
 *
 * One exception is the grid breakpoints. They use CSS Module Values because
 * media queries can't be scoped to the DOM like variables, so we need a different
 * approach to isolating those.
 */
@value grid-breakpoint-sm: 768px;
@value grid-breakpoint-md: 992px;
@value grid-breakpoint-lg: 1200px;
@value vertical-breakpoint-sm: 640px;

.variables {
	/* Basic colors */
	--color-gray-xxx-light: #f4f4f7;
	--color-gray-xx-light: #e4e4ea;
	--color-gray-x-light: #b6b7c1;
	--color-gray-light: #9a9ca9;
	--color-gray-medium: #585a64;
	--color-gray-dark: #434551;
	--color-gray-x-dark: #1e202b;

	/* Branding colors */
	--color-mfly-primary: #155e93;
	--color-mfly-secondary: #5f5094;

	/* UI colors */
	--color-success-light: #b6f2d6;
	--color-success: #21664c;
	--color-danger-light: #fddedb;
	--color-danger: #9d3a18;
	--color-warning-light: #f6e68a;
	--color-warning: #e4cd6d;
	--color-warning-dark: #7e5105;
	--color-info-light: #d1e9ee;
	--color-info: #435f64;

	/* Button colors */
	--color-button-default-text: #1e202b;
	--color-button-default-background: #fff;
	--color-button-default-border: #b6b7c1;
	--color-button-default-hover-background: #f4f4f7;
	--color-button-default-hover-border: #b6b7c1;
	--color-button-primary-text: #fff;
	--color-button-primary-background: #155e93;
	--color-button-primary-border: #155e93;

	/* Colors used in ui-theme (React) */
	--color-ui-theme-primary: #155e93;
	--color-ui-theme-primary-dark: #1c486f;
	--color-ui-theme-primary-light: #2b83c6;
	--color-ui-theme-secondary: #5f5094;
	--color-ui-theme-success: #21664c;
	--color-ui-theme-warning: #e4cd6d;
	--color-ui-theme-info: #435f64;
	--color-ui-theme-error: #9d3a18;
	--color-ui-theme-text-primary: #1e202b;
	--color-ui-theme-text-secondary: #585a64;
	--color-ui-theme-text-disabled: #b6b7c1;
	--color-ui-theme-background-default: #fff;
	--color-ui-theme-background-overlay: rgba(30, 32, 43, 0.8);

	/* Box shadows */
	--dropdown-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	--dropup-box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.15);
	--modal-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	--navbar-box-shadow: 0 3px 5px rgba(25, 25, 25, 0.75);
	--notification-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
	--input-focus-box-shadow: 0 0 8px rgba(187, 187, 187, 0.9);
	--input-dirty-focus-box-shadow: 0 0 8px rgba(84, 168, 68, 0.8);
	--input-invalid-focus-box-shadow: 0 0 8px rgba(169, 68, 66, 0.8);

	/* Inputs */
	--form-input-border-width: 1px;
	--form-input-border-radius: 3px;
	--form-input-height: 34px;

	/* Input groups */
	--form-group-margin-bottom: 20px;

	/* Grid breakpoints */
	--grid-breakpoint-sm: grid-breakpoint-sm; /* Note: everything from 0 to 768px is "xs" grid size */
	--grid-breakpoint-md: grid-breakpoint-md;
	--grid-breakpoint-lg: grid-breakpoint-lg;

	/* Vertical breakpoints */
	--vertical-breakpoint-sm: 640px;

	/* Site header sizes */
	--site-header-height: 100px;
	--site-header-height-small: 60px;

	/* Typography */
	--font-stack-main: 'Roboto', sans-serif;
	--font-stack-headers: 'Poppins', sans-serif;
	--font-size-base: 14px;
	--font-line-height-base: 1.7;
	--font-line-height-header: 1.3;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	/**
	 * Z-index
	 *
	 * Eventually, we want to move to a set of z-index constants, so we know for
	 * sure there are no rogue values floating around and we can totally predict
	 * the stacking order.
	 *
	 * However, for now we are starting by just collecting z-index values in these
	 * variables. This lets us see the relative stacking of elements even if they're
	 * not standardized.
	 *
	 * For example: https://gist.github.com/toadkicker/fc290e84d7bd861e3e73
	 */
	--z-index-spectrum-preview: 0;
	--z-index-ftm: 1005;
	--z-index-site-header: 1024;
	--z-index-site-navbar: 1024;
	--z-index-modal-backdrop: 1251;
	--z-index-modal: 1252;
	--z-index-dropdown-menu: 1300;
	--z-index-hover-tooltip: 1400;
	--z-index-ftm-high: 8000;
	--z-index-ftm-arrow-before: 8001;
	--z-index-ftm-arrow-after: 8002;
	--z-index-feedback: 9999;
	--z-index-ftm-max: 50000;
	--z-index-spectrum-container: 9999994;
}