:root{
    --rossa-color-primary: #e7004c;
    --rossa-color-primary-hover: #ae0341;
    --rossa-color-secondary: #00303C;
    --rossa-color-blue-green: #006068;
    --rossa-color-white: #ffffff;
    --rossa-color-bg-primary-dark: #e6004c1a;
    --rossa-color-light-primary: #ff2c64;
    --rossa-color-black: #09090B;
    --rossa-color-default-text: #4B5563;
    --rossa-color-text-light: #6b7280;
    --rossa-color-red-error: #EF4444;
    --rossa-color-gray: #e4e4e7;
    --rossa-color-gray-skeleton: #ebe6e7;
    --rossa-color-bg-gray: #f7f7f7;
    --rossa-color-light-blue: #83b7e8;
    --rossa-color-green: #16a34a;
    --rossa-color-black-hover: #1f2937;
    --rossa-color-primary-dark: #991b1b;
    --rossa-color-bg-primary: #fff0f2;


    --rossa-box-shadow-dropdown: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --rossa-box-shadow-input: 0 1px 1px rgba(24, 36, 51, 0.06);
    --rossa-box-shadow-input-focus: 0 1px 1px rgba(24, 36, 51, 0.06), 0 0 0 0.25rem rgba(6, 111, 209, 0.25);
    --rossa-box-shadow-input-error: 0 1px 1px rgba(24, 36, 51, 0.06), 0 0 0 0.25rem rgba(214, 57, 57, 0.25);

    --rossa-z-index: 5000;
    --rossa-z-index-footer: calc(var(--rossa-z-index) + 1);
    --rossa-z-index-dropdown: calc(var(--rossa-z-index) + 2);
    --rossa-z-index-modal: calc(var(--rossa-z-index) + 3);

    --rossa-config-color-primary: var(--rossa-color-primary);
    --rossa-config-color-primary-hover: var(--rossa-color-primary-hover);
    --rossa-config-color-bg-primary: var(--rossa-color-bg-primary);

    --rossa-config-option-color-primary: var(--rossa-config-color-primary);
    --rossa-config-option-color-primary-hover: var(--rossa-config-color-primary-hover);
    --rossa-config-option-color-bg-primary: var(--rossa-config-color-bg-primary);

    --rossa-config-color-template-1: var(--rossa-color-primary-dark);
    --rossa-config-color-template-1-bg: var(--rossa-color-bg-primary);
    --rossa-config-color-template-1-bg-icon: var(--rossa-color-bg-primary-dark);

}