:root {
    /* Core colors shades */
    --pink-50: #fdf2fa;
    --pink-100: #fce7f6;
    --pink-200: #fbcfee;
    --pink-300: #faa7df;
    --pink-400: #f571c8;
    --pink-500: #ee46b0;
    --pink-600: #dd2590;
    --pink-700: #CE187D;
    --pink-800: #9e1660;
    --pink-900: #841752;
    --pink-950: #51062e;
    --blue-gray-50: #f6f7f9;
    --blue-gray-100: #EBEEF3;
    --blue-gray-200: #d3d9e4;
    --blue-gray-300: #acb9cd;
    --blue-gray-400: #7f95b1;
    --blue-gray-500: #5f7798;
    --blue-gray-600: #4b5f7e;
    --blue-gray-700: #3e4d66;
    --blue-gray-800: #364256;
    --blue-gray-900: #30394a;
    --blue-gray-950: #202531;
    --gray-50: #f6f5f5;
    --gray-100: #e7e6e6;
    --gray-200: #d1d0d0;
    --gray-300: #b1afaf;
    --gray-400: #898787;
    --gray-500: #6e6c6c;
    --gray-600: #5e5c5c;
    --gray-700: #504f4e;
    --gray-800: #464544;
    --gray-900: #3d3c3c;
    --gray-950: #262626;
    --blue-50: #f2f7fc;
    --blue-100: #e2edf7;
    --blue-200: #ccdff1;
    --blue-300: #a9cbe7;
    --blue-400: #80b0da;
    --blue-500: #6294cf;
    --blue-600: #4e7cc2;
    --blue-700: #4469b1;
    --blue-800: #3c5791;
    --blue-900: #344a74;
    --blue-950: #242f47;
    --purple-50: #faf5ff;
    --purple-100: #f3e9fe;
    --purple-200: #e9d7fe;
    --purple-300: #d7b6fc;
    --purple-400: #be87f9;
    --purple-500: #a659f3;
    --purple-600: #9037e6;
    --purple-700: #7c26ca;
    --purple-800: #6924a5;
    --purple-900: #571f84;
    --purple-950: #3a0962;    
    --green-50: #edfcf3;
    --green-100: #d3f8e0;
    --green-200: #aaf0c7;
    --green-300: #73e2a7;
    --green-400: #3bcc84;
    --green-500: #17b26a;
    --green-600: #0b9055;
    --green-700: #097347;
    --green-800: #0a5b39;
    --green-900: #094b31;
    --green-950: #042a1c;
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #de3232;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;
    --red-950: #450a0a;
    --orange-50: #FFFAEB;
    --orange-100: #FFEFC6;
    --orange-200: #FEDF89;
    --orange-300: #FEC74B;
    --orange-400: #FDB022;
    --orange-500: #F78E09;
    --orange-600: #DB6704;
    --orange-700: #B64607;
    --orange-800: #93360D;
    --orange-900: #792D0E;
    --orange-950: #461502;
  
    /* colors */
    --primary-color: var(--pink-600);
    --white: #ffff;

    /* Shadows */
    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.025), 0px 1px 3px 0px rgba(16, 24, 40, 0.04);;
    --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.05), 0px 4px 8px -2px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
    --shadow-xxl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
    --shadow-xxxl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);

    /* General */
    --main-text-color: var(--gray-950);
    --main-bg-color: var(--gray-50);
    
    /* Input */
    --input-border-radius: 5px;
    --input-padding: 8px 10px;
    --input-shadow: var(--shadow-xs);
    --input-font-size: 14px;
    --input-height-sm: 30px;
    --input-height-md: 36px;
    --input-height-lg: 42px;
    --input-font-color: var(--gray-900);
    --input-placeholder-font-color: var(--gray-900);
    --input-border-color-default: var(--blue-gray-200);
    --input-border-color-hover: var(--blue-gray-300);
    --input-border-color-focus: var(--blue-gray-300);
    --input-border-color-disabled: var(--blue-gray-200);
    --input-bg-color-default: var(--white);
    --input-bg-color-hover: var(--white);
    --input-bg-color-focus: var(--white);
    --input-bg-color-disabled: var(--blue-gray-50);
    --input-label-font-size: 14px;
    --input-label-font-color: var(--blue-gray-950);
    --input-label-font-weight: 400;

    /* Checkbox */
    --checkbox-shadow: var(--shadow-xs);
    --checkbox-height: 16px;
    --checkbox-width: 16px;
    --checkbox-bg-color-active-default: var(--purple-50);
    --checkbox-bg-color-active-hover: var(--purple-100);
    --checkbox-bg-color-inactive-default: var(--white);
    --checkbox-bg-color-inactive-hover: var(--white);
    --checkbox-border-color-active-default: var(--primary-color);
    --checkbox-border-color-active-hover: var(--primary-color);
    --checkbox-border-color-inactive-default: var(--blue-gray-200);
    --checkbox-border-color-inactive-hover: var(--primary-color);
    

    /* Card */
    --card-bg-color: var(--white);
    --card-border-color: var(--blue-gray-100);
    --card-border-radius: 12px;
    --card-divider-color: var(--blue-gray-100);
    --card-padding: 20px;
    --card-title-font-weight: 600;
    --card-title-font-size: 18px;
    --card-title-font-color: var(--gray-950);
    --card-subtitle-font-weight: 400;
    --card-subtitle-font-size: 14px;
    --card-subtitle-font-color: var(--gray-500);

    /* Dialog */
    --dialog-bg-color: var(--white);
    --dialog-border-color: var(--blue-gray-100);
    --dialog-divider-color: var(--blue-gray-100);
    --dialog-padding: 20px;

    /* Buttons */
    --button-border-radius: 5px;
    --button-shadow-focus: 0px 0px 0px 2px var(--purple-100);
    --button-opatity-disabled: .4;
    --button-font-weight: 500;
    --button-line-height: 20px;

    /* --- Primary */
    --button-primary-bg-color-default: var(--primary-color);
    --button-primary-bg-color-hover: var(--pink-700);
    --button-primary-bg-color-focus: var(--primary-color);
    --button-primary-bg-color-pressed: var(--pink-800);
    --button-primary-bg-color-disabled: var(--primary-color);
    --button-primary-border-color-default: var(--primary-color);
    --button-primary-border-color-hover: var(--pink-700);
    --button-primary-border-color-focus: var(--primary-color);
    --button-primary-border-color-pressed: var(--pink-800);
    --button-primary-border-color-disabled: var(--primary-color);
    --button-primary-text-color-default: var(--white);
    --button-primary-text-color-hover: var(--white);
    --button-primary-text-color-focus: var(--white);
    --button-primary-text-color-pressed: var(--white);
    --button-primary-text-color-disabled: var(--white);

    /* ------ Success */
    --button-primary-success-bg-color-default: var(--green-500);
    --button-primary-success-bg-color-hover: var(--green-600);
    --button-primary-success-bg-color-focus: var(--green-500);
    --button-primary-success-bg-color-pressed: var(--green-700);
    --button-primary-success-bg-color-disabled: var(--green-500);
    --button-primary-success-border-color-default: var(--green-500);
    --button-primary-success-border-color-hover: var(--green-600);
    --button-primary-success-border-color-focus: var(--green-500);
    --button-primary-success-border-color-pressed: var(--green-700);
    --button-primary-success-border-color-disabled: var(--green-500);
    --button-primary-success-text-color-default: var(--white);
    --button-primary-success-text-color-hover: var(--white);
    --button-primary-success-text-color-focus: var(--white);
    --button-primary-success-text-color-pressed: var(--white);
    --button-primary-success-text-color-disabled: var(--white);

    /* --- Secondary */
    --button-secondary-bg-color-default: var(--purple-50);
    --button-secondary-bg-color-hover: var(--purple-100);
    --button-secondary-bg-color-focus: var(--purple-50);
    --button-secondary-bg-color-pressed: var(--purple-200);
    --button-secondary-bg-color-disabled: var(--purple-50);
    --button-secondary-border-color-default: var(--purple-200);
    --button-secondary-border-color-hover: var(--purple-200);
    --button-secondary-border-color-focus: var(--purple-200);
    --button-secondary-border-color-pressed: var(--purple-200);
    --button-secondary-border-color-disabled: var(--purple-200);
    --button-secondary-text-color-default: var(--primary-color);
    --button-secondary-text-color-hover: var(--primary-color);
    --button-secondary-text-color-focus: var(--primary-color);
    --button-secondary-text-color-pressed: var(--primary-color);
    --button-secondary-text-color-disabled: var(--primary-color);

    /* ------ Success */
    --button-secondary-success-bg-color-default: var(--green-50);
    --button-secondary-success-bg-color-hover: var(--green-100);
    --button-secondary-success-bg-color-focus: var(--green-50);
    --button-secondary-success-bg-color-pressed: var(--green-200);
    --button-secondary-success-bg-color-disabled: var(--green-50);
    --button-secondary-success-border-color-default: var(--green-200);
    --button-secondary-success-border-color-hover: var(--green-200);
    --button-secondary-success-border-color-focus: var(--green-200);
    --button-secondary-success-border-color-pressed: var(--green-200);
    --button-secondary-success-border-color-disabled: var(--green-200);
    --button-secondary-success-text-color-default: var(--green-500);
    --button-secondary-success-text-color-hover: var(--green-500);
    --button-secondary-success-text-color-focus: var(--green-500);
    --button-secondary-success-text-color-pressed: var(--green-500);
    --button-secondary-success-text-color-disabled: var(--green-500);

    /* ------ tertiary */
    --button-tertiary-success-bg-color-default: var(--white);
    --button-tertiary-success-bg-color-hover: var(--green-50);
    --button-tertiary-success-bg-color-focus: var(--white);
    --button-tertiary-success-bg-color-pressed: var(--green-100);
    --button-tertiary-success-bg-color-disabled: var(--white);
    --button-tertiary-success-border-color-default: var(--green-500);
    --button-tertiary-success-border-color-hover: var(--green-500);
    --button-tertiary-success-border-color-focus: var(--green-500);
    --button-tertiary-success-border-color-pressed: var(--green-500);
    --button-tertiary-success-border-color-disabled: var(--green-500);
    --button-tertiary-success-text-color-default: var(--green-500);
    --button-tertiary-success-text-color-hover: var(--green-500);
    --button-tertiary-success-text-color-focus: var(--green-500);
    --button-tertiary-success-text-color-pressed: var(--green-5000);
    --button-tertiary-success-text-color-disabled: var(--green-500);

    /* ------ Success */
    --button-tertiary-bg-color-default: var(--white);
    --button-tertiary-bg-color-hover: var(--blue-gray-50);
    --button-tertiary-bg-color-focus: var(--white);
    --button-tertiary-bg-color-pressed: var(--blue-gray-100);
    --button-tertiary-bg-color-disabled: var(--white);
    --button-tertiary-border-color-default: var(--blue-gray-200);
    --button-tertiary-border-color-hover: var(--blue-gray-200);
    --button-tertiary-border-color-focus: var(--blue-gray-200);
    --button-tertiary-border-color-pressed: var(--blue-gray-200);
    --button-tertiary-border-color-disabled: var(--blue-gray-200);
    --button-tertiary-text-color-default: var(--blue-gray-700);
    --button-tertiary-text-color-hover: var(--blue-gray-800);
    --button-tertiary-text-color-focus: var(--blue-gray-800);
    --button-tertiary-text-color-pressed: var(--blue-gray-800);
    --button-tertiary-text-color-disabled: var(--blue-gray-800);

    /* --- Ghost */
    --button-ghost-bg-color-default: transparent;
    --button-ghost-bg-color-hover: var(--blue-gray-50);
    --button-ghost-bg-color-focus: transparent;
    --button-ghost-bg-color-pressed: var(--blue-gray-100);
    --button-ghost-bg-color-disabled: transparent;
    --button-ghost-border-color-default: none;
    --button-ghost-border-color-hover: none;
    --button-ghost-border-color-focus: none;
    --button-ghost-border-color-pressed: none;
    --button-ghost-border-color-disabled: none;
    --button-ghost-text-color-default: var(--blue-gray-700);
    --button-ghost-text-color-hover: var(--blue-gray-800);
    --button-ghost-text-color-focus: var(--blue-gray-800);
    --button-ghost-text-color-pressed: var(--blue-gray-800);
    --button-ghost-text-color-disabled: var(--blue-gray-800);

    /* ------ Success */
    --button-ghost-success-bg-color-default: transparent;
    --button-ghost-success-bg-color-hover: var(--green-50);
    --button-ghost-success-bg-color-focus: transparent;
    --button-ghost-success-bg-color-pressed: var(--green-100);
    --button-ghost-success-bg-color-disabled: transparent;
    --button-ghost-success-border-color-default: none;
    --button-ghost-success-border-color-hover: none;
    --button-ghost-success-border-color-focus: none;
    --button-ghost-success-border-color-pressed: none;
    --button-ghost-success-border-color-disabled: none;
    --button-ghost-success-text-color-default: var(--green-500);
    --button-ghost-success-text-color-hover: var(--green-500);
    --button-ghost-success-text-color-focus: var(--green-500);
    --button-ghost-success-text-color-pressed: var(--green-500);
    --button-ghost-success-text-color-disabled: var(--green-500);

    /* --- sizes */
    --button-padding-xs: 4px 10px;
    --button-padding-sm: 6px 14px;
    --button-padding-md: 8px 16px;
    --button-padding-lg: 10px 16px;
    --button-height-xs: 28px;
    --button-height-sm: 32px;
    --button-height-md: 36px;
    --button-height-lg: 40px;
    --button-font-size-xs: 12px;
    --button-font-size-sm: 13px;
    --button-font-size-md: 14px;
    --button-font-size-lg: 14px;

    /* Menu Button */
    --button-menu-bg-color: var(--white);
    --button-menu-border-color: var(--gray-100);

    /* Button Group */
    --button-group-border-color: var(--blue-gray-200);
    --button-group-divider-color: var(--blue-gray-200);
    --button-group-border-radius: 5px;
    --button-group-divider-width: 1px;
    --button-group-divider-height: 1px;
    --button-group-divider-color: var(--blue-gray-200);

    /* Item */
    --button-group-item-font-weight: 500;
    --button-group-item-shadow-focus: 0px 0px 0px 2px var(--purple-100);

    /* Types */
    --button-group-item-font-color: var(--blue-gray-800);
    --button-group-item-bg-color-default: var(--white);
    --button-group-item-bg-color-hover: var(--blue-gray-50);
    --button-group-item-bg-color-pressed: var(--blue-gray-100);
    --button-group-item-bg-color-selected: #f2f3f5;
    
    /* --- Neutral */
    --button-group-item-neutral-font-color-default: var(--blue-gray-800);
    --button-group-item-neutral-font-color-hover: var(--blue-gray-800);
    --button-group-item-neutral-font-color-pressed: var(--blue-gray-800);
    --button-group-item-neutral-font-color-selected: var(--blue-gray-800);
    --button-group-item-neutral-bg-color-default: var(--white);
    --button-group-item-neutral-bg-color-hover: var(--blue-gray-50);
    --button-group-item-neutral-bg-color-pressed: var(--blue-gray-100);
    --button-group-item-neutral-bg-color-selected: #f2f3f5;
    --button-group-item-neutral-border-color-default: var(--blue-gray-200);
    --button-group-item-neutral-border-color-hover: var(--blue-gray-200);
    --button-group-item-neutral-border-color-pressed: var(--blue-gray-200);
    --button-group-item-neutral-border-color-selected: var(--blue-gray-200);

    /* --- Primary */
    --button-group-item-primary-font-color-default: var(--blue-gray-800);
    --button-group-item-primary-font-color-hover: var(--pink-600);
    --button-group-item-primary-font-color-pressed: var(--pink-600);
    --button-group-item-primary-font-color-selected: var(--pink-600);
    --button-group-item-primary-bg-color-default: var(--white);
    --button-group-item-primary-bg-color-hover: var(--purple-50);
    --button-group-item-primary-bg-color-pressed: var(--purple-100);
    --button-group-item-primary-bg-color-selected: var(--purple-50);
    --button-group-item-primary-border-color-default: var(--blue-gray-200);
    --button-group-item-primary-border-color-hover: var(--blue-gray-200);
    --button-group-item-primary-border-color-pressed: var(--blue-gray-200);
    --button-group-item-primary-border-color-selected: var(--pink-600);

    /* --- Sizes */
    --button-group-item-font-size-xs: 12px;
    --button-group-item-font-size-sm: 12px;
    --button-group-item-font-size-md: 14px;
    --button-group-item-font-size-lg: 14px;
    --button-group-item-padding-xs: 4px 10px;
    --button-group-item-padding-sm: 6px 14px;
    --button-group-item-padding-md: 8px 16px;
    --button-group-item-padding-lg: 10px 16px;
    --button-group-item-height-xs: 28px;
    --button-group-item-height-sm: 32px;
    --button-group-item-height-md: 36px;
    --button-group-item-height-lg: 40px;

    /* Badge */
    --badge-font-weight: 500;

    /* --- Sizes */
    --badge-padding-sm: 1px 6px;
    --badge-padding-md: 2px 8px;
    --badge-padding-lg: 4px 10px;
    --badge-font-size-sm: 12px;
    --badge-font-size-md: 14px;
    --badge-font-size-lg: 14px;
    --badge-line-height-sm: 16px;
    --badge-line-height-md: 18px;
    --badge-line-height-lg: 20px;
    --badge-height-sm: 20px;
    --badge-height-md: 24px;
    --badge-height-lg: 28px;

    /* --- Styles and colors */
    /* ------ Assent */
    --badge-assent-primary-bg-color: var(--pink-50);
    --badge-assent-primary-border-color: var(--pink-200);
    --badge-assent-primary-font-color: var(--pink-600);
    --badge-assent-neutral-bg-color: var(--blue-gray-50);
    --badge-assent-neutral-border-color: var(--blue-gray-200);
    --badge-assent-neutral-font-color: var(--blue-gray-600);
    --badge-assent-green-bg-color: var(--green-50);
    --badge-assent-green-border-color: var(--green-200);
    --badge-assent-green-font-color: var(--green-500);
    --badge-assent-orange-bg-color: var(--orange-50);
    --badge-assent-orange-border-color: var(--orange-200);
    --badge-assent-orange-font-color: var(--orange-600);
    --badge-assent-red-bg-color: var(--red-50);
    --badge-assent-red-border-color: var(--red-200);
    --badge-assent-red-font-color: var(--red-500);
    --badge-assent-blue-bg-color: var(--blue-50);
    --badge-assent-blue-border-color: var(--blue-200);
    --badge-assent-blue-font-color: var(--blue-500);

    /* ------ Outlined */
    --badge-outlined-primary-bg-color: transparent;
    --badge-outlined-primary-border-color: var(--pink-600);
    --badge-outlined-primary-font-color: var(--pink-600);
    --badge-outlined-neutral-bg-color: transparent;
    --badge-outlined-neutral-border-color: var(--blue-gray-200);
    --badge-outlined-neutral-font-color: var(--blue-gray-600);
    --badge-outlined-green-bg-color: transparent;
    --badge-outlined-green-border-color: var(--green-500);
    --badge-outlined-green-font-color: var(--green-500);
    --badge-outlined-orange-bg-color: transparent;
    --badge-outlined-orange-border-color: var(--orange-500);
    --badge-outlined-orange-font-color: var(--green-500);
    --badge-outlined-red-bg-color: transparent;
    --badge-outlined-red-border-color: var(--red-500);
    --badge-outlined-red-font-color: var(--red-500);
    --badge-outlined-blue-bg-color: transparent;
    --badge-outlined-blue-border-color: var(--blue-500);
    --badge-outlined-blue-font-color: var(--blue-500);

    /* ------ Filled */
    --badge-filled-primary-bg-color: var(--pink-600);
    --badge-filled-primary-border-color: var(--pink-600);
    --badge-filled-primary-font-color: var(--white);
    --badge-filled-neutral-bg-color: var(--blue-gray-500);
    --badge-filled-neutral-border-color: var(--blue-gray-500);
    --badge-filled-neutral-font-color: var(--white);
    --badge-filled-green-bg-color: var(--green-500);
    --badge-filled-green-border-color: var(--green-500);
    --badge-filled-green-font-color: var(--white);
    --badge-filled-orange-bg-color: var(--orange-500);
    --badge-filled-orange-border-color: var(--orange-500);
    --badge-filled-orange-font-color: var(--white);
    --badge-filled-red-bg-color: var(--red-500);
    --badge-filled-red-border-color: var(--red-500);
    --badge-filled-red-font-color: var(--white);
    --badge-filled-blue-bg-color: var(--blue-500);
    --badge-filled-blue-border-color: var(--blue-500);
    --badge-filled-blue-font-color: var(--white);

    /* --- Shape */
    --badge-border-radius-pill: 9999px;
    --badge-border-radius-rounded: 5px;

    /* Chip */
    --chip-font-weight: 400;
    --chip-border-radius: 5px;
    
    /* --- Sizes */
    --chip-padding-sm: 2px 6px;
    --chip-padding-md: 2px 8px;
    --chip-padding-lg: 4px 10px;
    --chip-font-size-sm: 12px;
    --chip-font-size-md: 14px;
    --chip-font-size-lg: 14px;
    --chip-line-height-sm: 16px;
    --chip-line-height-md: 20px;
    --chip-line-height-lg: 20px;
    --chip-icon-size-sm: 16px;
    --chip-icon-size-md: 18px;
    --chip-icon-size-lg: 20px;

    /* --- Styles and colors */
    /* ------ Assent */
    --chip-assent-primary-bg-color-default: var(--pink-50);
    --chip-assent-primary-bg-color-hover: var(--pink-100);
    --chip-assent-primary-bg-color-pressed: var(--pink-200);
    --chip-assent-primary-border-colo-default: var(--pink-200);
    --chip-assent-primary-border-color-hover: var(--pink-200);
    --chip-assent-primary-border-color-pressed: var(--pink-200);
    --chip-assent-primary-font-color-default: var(--pink-600);
    --chip-assent-primary-font-color-hover: var(--pink-600);
    --chip-assent-primary-font-color-pressed: var(--pink-600);
    --chip-assent-neutral-bg-color-default: var(--blue-gray-50);
    --chip-assent-neutral-bg-color-hover: var(--blue-gray-100);
    --chip-assent-neutral-bg-color-pressed: var(--blue-gray-200);
    --chip-assent-neutral-border-color-default: var(--blue-gray-200);
    --chip-assent-neutral-border-color-hover: var(--blue-gray-200);
    --chip-assent-neutral-border-color-pressed: var(--blue-gray-200);
    --chip-assent-neutral-font-color-default: var(--blue-gray-600);
    --chip-assent-neutral-font-color-hover: var(--blue-gray-600);
    --chip-assent-neutral-font-color-pressed: var(--blue-gray-600);
    --chip-assent-success-bg-color-default: var(--green-50);
    --chip-assent-success-bg-color-hover: var(--green-100);
    --chip-assent-success-bg-color-pressed: var(--green-200);
    --chip-assent-success-border-color-default: var(--green-200);
    --chip-assent-success-border-color-hover: var(--green-200);
    --chip-assent-success-border-color-pressed: var(--green-200);
    --chip-assent-success-font-color-default: var(--green-500);
    --chip-assent-success-font-color-hover: var(--green-500);
    --chip-assent-success-font-color-pressed: var(--green-500);
    --chip-assent-destructive-bg-color-default: var(--red-50);
    --chip-assent-destructive-bg-color-hover: var(--red-100);
    --chip-assent-destructive-bg-color-pressed: var(--red-200);
    --chip-assent-destructive-border-color-default: var(--red-200);
    --chip-assent-destructive-border-color-hover: var(--red-200);
    --chip-assent-destructive-border-colorpressedt: var(--red-200);
    --chip-assent-destructive-font-color-default: var(--red-500);
    --chip-assent-destructive-font-color-hover: var(--red-500);
    --chip-assent-destructive-font-color-pressed: var(--red-500);

    /* ------ Outlined */
    --chip-outlined-primary-bg-color-default: var(--white);
    --chip-outlined-primary-bg-color-hover: var(--pink-50);
    --chip-outlined-primary-bg-color-pressed: var(--pink-100);
    --chip-outlined-primary-border-color-default: var(--pink-600);
    --chip-outlined-primary-border-color-hover: var(--pink-600);
    --chip-outlined-primary-border-color-pressed: var(--pink-600);
    --chip-outlined-primary-font-color-default: var(--pink-600);
    --chip-outlined-primary-font-color-hover: var(--pink-600);
    --chip-outlined-primary-font-color-pressed: var(--pink-600);
    --chip-outlined-neutral-bg-color-default: var(--white);
    --chip-outlined-neutral-bg-color-hover: var(--blue-gray-50);
    --chip-outlined-neutral-bg-color-pressed: var(--blue-gray-100);
    --chip-outlined-neutral-border-color-default: var(--blue-gray-200);
    --chip-outlined-neutral-border-color-hover: var(--blue-gray-200);
    --chip-outlined-neutral-border-color-pressed: var(--blue-gray-200);
    --chip-outlined-neutral-font-color-default: var(--blue-gray-600);
    --chip-outlined-neutral-font-color-hover: var(--blue-gray-600);
    --chip-outlined-neutral-font-color-pressed: var(--blue-gray-600);
    --chip-outlined-success-bg-color-default: var(--white);
    --chip-outlined-success-bg-color-hover: var(--green-50);
    --chip-outlined-success-bg-color-pressed: var(--green-100);
    --chip-outlined-success-border-color-default: var(--green-500);
    --chip-outlined-success-border-color-hover: var(--green-500);
    --chip-outlined-success-border-color-pressed: var(--green-500);
    --chip-outlined-success-font-color-default: var(--green-500);
    --chip-outlined-success-font-color-hover: var(--green-500);
    --chip-outlined-success-font-color-pressed: var(--green-500);
    --chip-outlined-destructive-bg-color-default: var(--white);
    --chip-outlined-destructive-bg-color-hover: var(--red-50);
    --chip-outlined-destructive-bg-color-pressed: var(--red-100);
    --chip-outlined-destructive-border-color-default: var(--red-500);
    --chip-outlined-destructive-border-color-hover: var(--red-500);
    --chip-outlined-destructive-border-color-pressed: var(--red-500);
    --chip-outlined-destructive-font-color-default: var(--red-500);
    --chip-outlined-destructive-font-color-hover: var(--red-500);
    --chip-outlined-destructive-font-color-pressed: var(--red-500);
  }