:root {
	/* Fixed Colors */
	--color-white:                  #ffffff; /* → --sds-color-white */
	--color-white-darker:           #f5f5f5; /* → --sds-brand-color-background-weak-neutral */
	--color-black:                  #000000; /* → --sds-color-black */
	--color-black-lighter:          #1F1F1F; /* → --sds-brand-color-element-default-neutral */

	/* Accent Colors (Tiffany) */
	--accent-h:                     172;
	--accent-s:                     55%;
	--accent-l:                     65%;

	--color-accent:                 #25afa5; /* Tiffany main */
	--color-accent-lighter: 		#A3E5DF; /* Lighter Tiffany */
	--color-accent-darker: 			#4DB6AC; /* Darker Tiffany */

	--background-accent-color:             #E5F9F7; /* very light Tiffany bg */
	--background-accent-color-shade-1:     #D9F3F1;
	--background-accent-color-shade-2:     #CFF0ED;

	--color-text-accent:                   #4DB6AC;
	--color-text-accent-lighter:           #66CFC7;
	--color-text-accent-darker:            #2E827A;

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

	/* Notification Colors */
	--color-notification-bg:               #FFF7E6;
	--color-notification-success:          #4DB6AC;
	--color-notification-success-bg:       #E5F9F7;
	--color-notification-error:            #C62828;
	--color-notification-error-bg:         #FFEDEE;

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

	--hue:                            172;
	--saturation:                     55%;
	--lightness:                      100%;

	--color-text-light:               #ffffff;
	--color-text-light-lighter:       #ffffff;
	--color-text-light-darker:        #f5f5f5;

	--color-text-dark:                #1F1F1F;
	--color-text-dark-lighter:        #363636;
	--color-text-dark-darker:         #000000;

	--border-s:                       0%;
	--border-s-subtle:                0%;
	--border-s-strong:                0%;
	--border-l:                       0%;
	--border-l-subtle:                0%;
	--border-l-strong:                0%;

	/* Abstraction */
	--background-color:               #ffffff;
	--background-color-shade-1: #eefffe;
	--background-color-shade-2:       #DFF2F1;

	--border-color:                   #e2e2e2;
	--border-color-subtle:            #DFF2F1;
	--border-color-strong:            #2E827A;

	--box-shadow:                     0 1px 1px 0 rgba(0,0,0,0.08), 0 2px 4px 0 rgba(0,0,0,0.06);

	--color-link:                     #4DB6AC;
	--color-link-hover:               #2E827A;
	--color-link-active:              #2E827A;

	--color-text:                     #1F1F1F;
	--color-text-strong:              #000000;
	--color-text-subtle:              #363636;

	--discount-background-color:      #2E827A;
	--discount-text-color:            #ffffff;

	--image-background-color:         #ffffff;

	--input-background-color:         #ffffff;
	--input-border-color:             #DFF2F1;
	--input-text-color:               #1F1F1F;

	--cl-a: #dc3545;
	--cl-d: var(--color-accent);

}