: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%);

	/* Accent Colors */

	--accent-h:                       242;
	--accent-s:                       29%;
	--accent-l:                       50%;

	--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%));

	--color-accent-1:                 #5D5BA4;
	--color-accent-1-lighter:         #B4A1E8;
	--color-accent-1-darker:          #311B6D;
	--color-accent-1-bg-light:        #1E1144;
	--color-accent-1-bg-light-shade-1:#F5F3FC;
	--color-accent-1-bg-light-shade-2:#CEC2F0;
	--color-accent-1-bg-dark:         #120A29;
	--color-accent-1-bg-dark-shade-1: #1B0F3D;
	--color-accent-1-bg-dark-shade-2: #241452;

	--color-accent-2:                 #BDBDFF;
	--color-accent-3:                 #341C73;
	--color-accent-4:                 #F5CDE0;
	--color-accent-5:                 #8A48A0;

	--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-bg-light:                 #ffffff;
	--color-bg-light-shade-1:         #F7F7F8;
	--color-bg-light-shade-2:         #EFEEF1;

	--color-bg-dark:                  #18161D;
	--color-bg-dark-shade-1:          #2F2B3B;
	--color-bg-dark-shade-2:          #3B3649;

	--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:            hsl(40, 100%, 60%);
	--color-notification-bg:         #FEC;
	--color-notification-success:    #3B786A;
	--color-notification-success-bg: #DDEEEA;
	--color-notification-error:      #A11233;
	--color-notification-error-bg:   #FCE8ED;
}

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

:root,
.Theme-Header,
.Theme-Footer {
	--hue:                            0;
	--saturation:                     0%;
	--lightness:                      100%;

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

	--color-text-dark:                #3C3A40;
	--color-text-darker:              #18161D;
	
	--color-text-dark-lighter:        hsl(var(--hue), 10%, 15%);
	--color-text-dark-darker:         hsl(var(--hue), 10%, 0%);
	--color-text-darker-light:        #64616B;
	--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));

	--color-border-light:             #E4E3E8;
	--color-border-light-lighter:     #F2F1F4;
	--color-border-light-darker:      #CAC7D1;

	--color-border-dark:              #312E38;
	--color-border-dark-lighter:      #3D3946;
	--color-border-dark-darker:       #24222A;

	--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:                     var(--color-text-dark);
	--color-text-strong:              var(--color-text-dark-darker);
	--color-text-subtle:              var(--color-text-dark-lighter);

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

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

	--input-background-color:         var(--color-bg-light-shade-2);
	--input-border-color:             var(--border-color-strong);
	--input-text-color:               var(--color-text);

	--backdrop-color:                 hsla(var(--hue), var(--saturation), 0%, .8);
}

/*------------------------------------------------------------------------------*/
/* Color Adjustments
/*------------------------------------------------------------------------------*/

/* Color Adjustments for Dark Tones */

[data-header-text="white"] .Theme-Header,
[data-footer-text="white"] .Theme-Footer {
	--background-color-shade-1:       hsl(var(--hue), var(--saturation), calc(var(--lightness) + 5%));
	--background-color-shade-2:       hsl(var(--hue), var(--saturation), calc(var(--lightness) + 10%));

	--color-text:                     var(--color-text-light);
	--color-text-strong:              var(--color-text-light-lighter);
	--color-text-subtle:              var(--color-text-light-darker);

	--border-l:                       calc(var(--lightness) + 10%);
	--border-l-subtle:                calc(var(--lightness) + 5%);
	--border-l-strong:                calc(var(--lightness) + 20%);
	color-scheme: dark;
}

[data-header-text="white"][data-header-lightness="very-low"] .Theme-Header,
[data-header-text="white"][data-footer-lightness="very-low"] .Theme-Footer {
	--border-l:                       calc(var(--lightness) + 20%);
	--border-l-subtle:                calc(var(--lightness) + 15%);
	--border-l-strong:                calc(var(--lightness) + 25%);
}

[data-header-text="white"][data-header-lightness="very-low"][data-header-saturation="very-high"] .Theme-Header,
[data-header-text="white"][data-header-lightness="very-low"][data-footer-saturation="very-high"] .Theme-Footer {
	--border-s:                       calc(var(--saturation) - 65%);
	--border-s-subtle:                calc(var(--saturation) - 65%);
	--border-s-strong:                calc(var(--saturation) - 65%);
}

[data-header-text="white"][data-header-lightness="very-low"][data-header-saturation="high"] .Theme-Header,
[data-header-text="white"][data-header-lightness="very-low"][data-footer-saturation="high"] .Theme-Footer {
	--border-s:                       calc(var(--saturation) - 45%);
	--border-s-subtle:                calc(var(--saturation) - 45%);
	--border-s-strong:                calc(var(--saturation) - 45%);
}

[data-header-text="white"][data-header-lightness="low"] .Theme-Header,
[data-header-text="white"][data-footer-lightness="low"] .Theme-Footer {
	--border-l:                       calc(var(--lightness) + 20%);
	--border-l-subtle:                calc(var(--lightness) + 13%);
	--border-l-strong:                calc(var(--lightness) + 25%);
}

[data-header-text="white"][data-header-lightness="low"][data-header-saturation="very-high"] .Theme-Header,
[data-header-text="white"][data-header-lightness="low"][data-footer-saturation="very-high"] .Theme-Footer {
	--border-s:                       calc(var(--saturation) - 35%);
	--border-s-subtle:                calc(var(--saturation) - 35%);
	--border-s-strong:                calc(var(--saturation) - 35%);
}

[data-header-text="white"][data-header-lightness="low"][data-header-saturation="high"] .Theme-Header,
[data-header-text="white"][data-header-lightness="low"][data-footer-saturation="high"] .Theme-Footer {
	--border-s:                       calc(var(--saturation) - 35%);
	--border-s-subtle:                calc(var(--saturation) - 35%);
	--border-s-strong:                calc(var(--saturation) - 35%);
}

[data-header-text="white"][data-header-lightness="low"][data-header-saturation="medium"] .Theme-Header,
[data-header-text="white"][data-header-lightness="low"][data-footer-saturation="medium"] .Theme-Footer {
	--border-s:                       calc(var(--saturation) - 25%);
	--border-s-subtle:                calc(var(--saturation) - 25%);
	--border-s-strong:                calc(var(--saturation) - 25%);
}

[data-header-text="white"][data-header-lightness="medium"] .Theme-Header,
[data-header-text="white"][data-footer-lightness="medium"] .Theme-Footer {
	--border-l:                       calc(var(--lightness) + 30%);
	--border-l-subtle:                calc(var(--lightness) + 15%);
	--border-l-strong:                calc(var(--lightness) + 35%);
}

[data-header-text="white"][data-header-lightness="medium"][data-header-saturation="very-high"] .Theme-Header,
[data-header-text="white"][data-header-lightness="medium"][data-footer-saturation="very-high"] .Theme-Footer {
	--border-l:                       calc(var(--lightness) + 25%);
	--border-l-subtle:                calc(var(--lightness) + 20%);
	--border-l-strong:                calc(var(--lightness) + 30%);
}

[data-header-text="white"][data-header-lightness="medium"][data-header-saturation="high"] .Theme-Header,
[data-header-text="white"][data-header-lightness="medium"][data-footer-saturation="high"] .Theme-Footer {
	--border-l:                       calc(var(--lightness) + 15%);
	--border-l-subtle:                calc(var(--lightness) + 10%);
	--border-l-strong:                calc(var(--lightness) + 20%);
}

[data-header-text="white"][data-header-lightness="medium"][data-header-saturation="medium"] .Theme-Header,
[data-header-text="white"][data-header-lightness="medium"][data-footer-saturation="medium"] .Theme-Footer {
	--border-l:                       calc(var(--lightness) + 15%);
	--border-l-subtle:                calc(var(--lightness) + 10%);
	--border-l-strong:                calc(var(--lightness) + 20%);
}

/* Color Adjustments for Light Tones */

[data-header-text="black"][data-header-lightness="very-high"][data-header-saturation="very-high"] .Theme-Header,
[data-header-text="black"][data-footer-lightness="very-high"][data-header-saturation="very-high"] .Theme-Footer {
	--border-l:                       calc(var(--lightness) - 15%);
	--border-l-subtle:                calc(var(--lightness) - 10%);
	--border-l-strong:                calc(var(--lightness) - 20%);

	--border-s:                       calc(var(--saturation) - 45%);
	--border-s-subtle:                calc(var(--saturation) - 45%);
	--border-s-strong:                calc(var(--saturation) - 55%);
}

[data-header-text="black"][data-header-lightness="very-high"][data-header-saturation="high"] .Theme-Header,
[data-header-text="black"][data-footer-lightness="very-high"][data-header-saturation="high"] .Theme-Footer {
	--border-l:                       calc(var(--lightness) - 12%);
	--border-l-subtle:                calc(var(--lightness) - 7%);
	--border-l-strong:                calc(var(--lightness) - 15%);

	--border-s:                       calc(var(--saturation) - 25%);
	--border-s-subtle:                calc(var(--saturation) - 25%);
	--border-s-strong:                calc(var(--saturation) - 25%);
}

[data-header-text="black"][data-header-lightness="high"] .Theme-Header,
[data-header-text="black"][data-footer-lightness="high"] .Theme-Footer {
	--border-l:                       calc(var(--lightness) - 10%);
	--border-l-subtle:                calc(var(--lightness) - 7%);
	--border-l-strong:                calc(var(--lightness) - 15%);
}

[data-header-text="black"][data-header-lightness="high"][data-header-saturation="very-high"] .Theme-Header,
[data-header-text="black"][data-header-lightness="high"][data-footer-saturation="very-high"] .Theme-Footer {
	--border-s:                       calc(var(--saturation) - 25%);
	--border-s-subtle:                calc(var(--saturation) - 25%);
	--border-s-strong:                calc(var(--saturation) - 35%);
}

[data-header-text="black"][data-header-lightness="medium"] .Theme-Header,
[data-header-text="black"][data-footer-lightness="medium"] .Theme-Footer {
	--border-l:                       calc(var(--lightness) - 15%);
	--border-l-subtle:                calc(var(--lightness) - 10%);
	--border-l-strong:                calc(var(--lightness) - 20%);
}

[data-header-text="black"][data-header-lightness="medium"][data-header-saturation="very-high"] .Theme-Header,
[data-header-text="black"][data-header-lightness="medium"][data-footer-saturation="very-high"] .Theme-Footer {
	--border-s:                       calc(var(--saturation) - 25%);
	--border-s-subtle:                calc(var(--saturation) - 25%);
	--border-s-strong:                calc(var(--saturation) - 35%);
}

[data-header-text="black"][data-header-lightness="medium"][data-header-saturation="high"] .Theme-Header,
[data-header-text="black"][data-header-lightness="medium"][data-footer-saturation="high"] .Theme-Footer {
	--border-s:                       calc(var(--saturation) - 25%);
	--border-s-subtle:                calc(var(--saturation) - 25%);
	--border-s-strong:                calc(var(--saturation) - 35%);
}

/* Link Colors on Header and Footer */

[data-header-links="body"][data-header-text="black"] .Theme-Header,
[data-footer-links="body"][data-footer-text="black"] .Theme-Footer {
	--color-link:            hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) - 40%));
	--color-link-hover:      hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) - 50%));
	--color-link-active:     hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) - 50%));
	--color-text-accent:     hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) - 40%));
}

[data-header-links="body"][data-header-text="black"][data-header-lightness="very-high"] .Theme-Header,
[data-footer-links="body"][data-footer-text="black"][data-header-lightness="very-high"] .Theme-Footer {
	--color-link:            hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) - 60%));
	--color-link-hover:      hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) - 70%));
	--color-link-active:     hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) - 70%));
	--color-text-accent:     hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) - 60%));
}

[data-header-links="body"][data-header-text="white"] .Theme-Header,
[data-footer-links="body"][data-footer-text="white"] .Theme-Footer {
	--color-link:            hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) + 40%));
	--color-link-hover:      hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) + 50%));
	--color-link-active:     hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) + 50%));
	--color-text-accent:     hsl(var(--hue), calc(var(--saturation) - 30%), calc(var(--lightness) + 40%));
}

[data-header-links="body"][data-header-text="white"][data-header-lightness="very-low"] .Theme-Header,
[data-footer-links="body"][data-footer-text="white"][data-footer-lightness="very-low"] .Theme-Footer {
	--color-link:            hsl(var(--hue), calc(var(--saturation) - 50%), calc(var(--lightness) + 60%));
	--color-link-hover:      hsl(var(--hue), calc(var(--saturation) - 50%), calc(var(--lightness) + 70%));
	--color-link-active:     hsl(var(--hue), calc(var(--saturation) - 50%), calc(var(--lightness) + 70%));
	--color-text-accent:     hsl(var(--hue), calc(var(--saturation) - 50%), calc(var(--lightness) + 70%));
}

/* Header Search Element */

[data-header-lightness="very-low"] .Theme-Header .SimpleSearchForm input,
[data-header-lightness="low"] .Theme-Header .SimpleSearchForm input {
	border: 0;
}