:root {
    /*
        Brand colors
    */
   --color-brand-50: var(--color-orange-50);
   --color-brand-100: var(--color-orange-100);
   --color-brand-200: var(--color-orange-200);
   --color-brand-300: var(--color-orange-300);
   --color-brand-400: var(--color-orange-400);
   --color-brand-500: var(--color-orange-500);
   --color-brand-600: var(--color-orange-600);
   --color-brand-700: var(--color-orange-700);
   --color-brand-800: var(--color-orange-800);
   --color-brand-900: var(--color-orange-900);

   --color-opacity-brand-primary-008: rgba(125, 0, 55, 0.08);
   --color-opacity-brand-primary-016: rgba(125, 0, 55, 0.16);
   --color-opacity-brand-primary-024: rgba(125, 0, 55, 0.24);

   --color-opacity-brand-secondary-008: rgba(255, 218, 202, 0.08);
   --color-opacity-brand-secondary-016: rgba(255, 218, 202, 0.16);
   --color-opacity-brand-secondary-024: rgba(255, 218, 202, 0.24);

   --color-opacity-black-008: rgba(0, 0, 0, 0.08);
   --color-opacity-black-016: rgba(0, 0, 0, 0.16);
   --color-opacity-black-024: rgba(0, 0, 0, 0.24);
   --color-opacity-black-048: rgba(0, 0, 0, 0.48);

    /*
        Link
    */
	--link-color-primary: var(--color-orange-700);
	--link-color-primary-hover: var(--color-orange-800);
	--link-color-primary-active: var(--color-orange-900);

	--link-color-secondary: var(--color-black);
	--link-color-secondary-hover: var(--color-black);
	--link-color-secondary-active: var(--color-grey-600);

    /*
        Illustrations
    */
    --color-illustration-theme-100: var(--color-purple-100);
	--color-illustration-theme-200: var(--color-purple-300);
	--color-illustration-theme-300: var(--color-purple-500);
	--color-illustration-theme-400: var(--color-purple-700);

    /*
        Text
    */
	--text-color-primary: var(--color-black);
	--text-color-secondary:	var(--color-grey-600);
	--text-color-tertiary: var(--color-orange-800);

    /*
        Input
    */
	--input-border-color: var(--color-black);
	--input-background-color-checked: var(--color-orange-700);
	--input-border-color-checked: var(--color-orange-700);
	--input-icon-color: var(--color-orange-100);

    /*
        Border
    */
	--border-color-primary: var(--color-grey-700);
	--border-color-secondary: var(--color-grey-300);
	--border-color-brand: var(--color-brand-300);
	--border-radius-button: 10rem;
	--border-width: 4px;

    /*
        Button
    */
    --button-primary-background-color: var(--color-orange-700);
    --button-primary-text-color: var(--color-orange-50);
    --button-primary-background-color-hover: var(--color-orange-800);
    --button-primary-text-color-hover: var(--color-orange-50);
    --button-primary-background-color-active: var(--color-orange-900);
    --button-primary-text-color-active: var(--color-orange-50);

    --button-secondary-background-color: transparent;
    --button-secondary-text-color: var(--color-orange-700);
    --button-secondary-border-color: var(--color-orange-700);
    --button-secondary-background-color-hover: var(--color-orange-700);
    --button-secondary-text-color-hover: var(--color-orange-50);
    --button-secondary-background-color-active: var(--color-orange-800);
    --button-secondary-text-color-active: var(--color-orange-50);

    --button-tertiary-background-color: transparent;
    --button-tertiary-text-color: var(--color-black);
    --button-tertiary-text-color-hover: var(--color-black);
    --button-tertiary-text-color-active: var(--color-grey-600);
    --button-tertiary-background-hover: var(--color-opacity-brand-primary-008);
    --button-tertiary-background-active: var(--color-opacity-brand-primary-016);

    /*
        Surface
    */
    --surface-color-background: var(--color-brand-100);
    --surface-color-text: var(--color-black);

    /*
        Support
    */
    --support-color-focused: var(--color-purple-500);
    --support-color-success: var(--color-green-600);
    --support-color-warning: var(--color-red);
    --support-color-info: var(--color-purple-700);
    --support-color-disabled: var(--color-grey-400);
    --support-border-focused: 4px;
}