:root {
	--border-radius:               7px;
	--border-radius-medium:        calc(var(--border-radius) * 2);

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

	--color-accent:                   #333;
	--color-accent-lighter:           #444;
	--color-accent-darker:            #222;

	--background-accent-color:              #ffdf73;
	--background-accent-color-hover:		#ddc36a
	--background-accent-color-shade-1:      #fcfcfc;
	--background-accent-color-shade-2:      #999;

	--color-text-accent:               #333;
	--color-text-accent-lighter:       #444;
	--color-text-accent-darker:        #222;

	--color-text-on-accent:            #fff;

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

	--border-color:                   #333;
	--border-color-subtle:            #444;
	--border-color-strong:            #222;

	/* 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%);
}