:root {
	/* Fixed Colors */

	--color-white:                  hsl(0, 0%, 100%);
	--color-white-darker:           hsl(0, 0%, 97%);
	--color-black:                  hsl(0, 0%, 0%);
	--color-black-lighter:          hsl(0, 0%, 10%);
	--color-red:          hsl(358, 85%, 52%);
	--color-dark-gray: #333;

	/* Accent Colors */

	--accent-h:                       145;
	--accent-s:                       55%;
	--accent-l:                       32%;

	--color-accent:                   hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--color-accent-lighter:           hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 10%));
	--color-accent-darker:            hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 5%));

	--background-accent-color:               hsl(var(--accent-h), var(--accent-s), 95%);
	--background-accent-color-shade-1:       hsl(var(--accent-h), var(--accent-s), 90%);
	--background-accent-color-shade-2:       hsl(var(--accent-h), var(--accent-s), 85%);

	--color-text-accent:               hsl(var(--accent-h), var(--accent-s), 30%);
	--color-text-accent-lighter:       hsl(var(--accent-h), var(--accent-s), 40%);
	--color-text-accent-darker:        hsl(var(--accent-h), var(--accent-s), 20%);

	--color-text-on-accent:            hsl(var(--accent-h), 10%, 95%); /* suitable text color on accent surface */

	/* Notification Colors */

	--color-notification-bg:         #ffeecc;
	--color-notification-success:    hsl(83, 57%, 47%);
	--color-notification-success-bg: hsl(83, 57%, 90%);
	--color-notification-error:      hsl(0, 71%, 53%);
	--color-notification-error-bg:   hsl(0, 71%, 95%);
}

/*------------------------------------------------------------------------------*/
/* Color Variables
/*------------------------------------------------------------------------------*/

:root {
	--hue:                            0;
	--saturation:                     0%;
	--lightness:                      100%;

	--color-text-light:               hsl(var(--hue), 10%, 95%);
	--color-text-light-lighter:       hsl(var(--hue), 10%, 100%);
	--color-text-light-darker:        hsl(var(--hue), 10%, 87%);

	--color-text-dark:                hsl(var(--hue), 10%, 10%);
	--color-text-dark-lighter:        hsl(var(--hue), 10%, 15%);
	--color-text-dark-darker:         hsl(var(--hue), 10%, 0%);

	--border-s:                       calc(var(--saturation) - 5%);
	--border-s-subtle:                calc(var(--saturation) - 5%);
	--border-s-strong:                calc(var(--saturation) - 5%);
	--border-l:                       calc(var(--lightness) - 10%);
	--border-l-subtle:                calc(var(--lightness) - 7%);
	--border-l-strong:                calc(var(--lightness) - 15%);

	/* Abstraction */

	--background-color:               hsl(var(--hue), var(--saturation), var(--lightness));
	--background-color-shade-1:       hsl(var(--hue), var(--saturation), calc(var(--lightness) - 3%));
	--background-color-shade-2:       hsl(var(--hue), var(--saturation), calc(var(--lightness) - 5%));

	--border-color:                   hsl(var(--hue), var(--border-s), var(--border-l));
	--border-color-subtle:            hsl(var(--hue), var(--border-s-subtle), var(--border-l-subtle));
	--border-color-strong:            hsl(var(--hue), var(--border-s-strong), var(--border-l-strong));

	--box-shadow:                     0 1px 1px 0 hsla(var(--hue), var(--saturation), 0%, .1), 0 1px 2px 0 hsla(var(--hue), var(--saturation), 0%, .06);

	--color-link:                     var(--color-text-accent);
	--color-link-hover:               var(--color-text-accent-lighter);
	--color-link-active:              var(--color-text-accent-lighter);

	--color-text:                     #333333;
	--color-text-strong:              #262626;
	--color-text-subtle:              #404040;

	--discount-background-color:      var(--color-accent);
	--discount-text-color:            var(--color-text-on-accent);

	--image-background-color:         var(--color-white);

	--input-background-color:         var(--background-color);
	--input-border-color:             var(--border-color-strong);
	--input-text-color:               var(--color-text);




	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	--primary-bg: #ed1c24;
}