/*#region Colors */


/*#region Theme Utilities */

/* Surface Utilities */
.bg-surface-default {
    background-color: var(--surface-default) !important;
}

.bg-surface-100 {
    background-color: var(--surface-100) !important;
}

.color-surface-default {
    color: var(--surface-default) !important;
}

.color-surface-100 {
    color: var(--surface-100) !important;
}

.border-surface-100 {
    border-color: var(--surface-100) !important;
}

.bg-surface-200 {
    background-color: var(--surface-200) !important;
}

.color-surface-200 {
    color: var(--surface-200) !important;
}

.border-surface-200 {
    border-color: var(--surface-200) !important;
}

.bg-surface-50 {
    background-color: var(--surface-50) !important;
}

.color-surface-50 {
    color: var(--surface-50) !important;
}

.border-surface-50 {
    border-color: var(--surface-50) !important;
}

/* Brand Utilities */

.bg-brand-default {
    background-color: var(--color-bg-brand-default) !important;
}
.bg-brand-secondary {
    background-color: var(--color-bg-brand-tertiary) !important;
}
.bg-brand-tertiary {
    background-color: var(--color-bg-brand-tertiary) !important;
}

.color-brand-100 {
    color: var(--brand-100) !important;
}

.border-brand-100 {
    border-color: var(--brand-100) !important;
}

.bg-brand-200 {
    background-color: var(--brand-200) !important;
}

.color-brand-200 {
    color: var(--brand-200) !important;
}

.border-brand-200 {
    border-color: var(--brand-200) !important;
}

.bg-brand-500 {
    background-color: var(--brand-500) !important;
}

.color-brand-500 {
    color: var(--brand-500) !important;
}

.bg-brand-50 {
    background-color: var(--brand-50) !important;
}

.color-brand-50 {
    color: var(--brand-50) !important;
}

.border-brand-50 {
    border-color: var(--brand-50) !important;
}

/* Secondary Utilities */
.bg-secondary-100 {
    background-color: var(--secondary-100) !important;
}

.color-secondary-100 {
    color: var(--secondary-100) !important;
}

.border-secondary-100 {
    border-color: var(--secondary-100) !important;
}


/* Neutral Utilities */
.bg-neutral-100 {
    background-color: var(--neutral-100) !important;
}

.color-neutral-100 {
    color: var(--neutral-100) !important;
}

.border-neutral-100 {
    border-color: var(--neutral-100) !important;
}


/* Info Utilities */
.bg-info-100 {
    background-color: var(--info-100) !important;
}

.color-info-100 {
    color: var(--info-100) !important;
}

.border-info-100 {
    border-color: var(--info-100) !important;
}


/* Error Utilities */
.bg-error-100 {
    background-color: var(--error-100) !important;
}

.color-error-100 {
    color: var(--error-100) !important;
}

.border-error-100 {
    border-color: var(--error-100) !important;
}


/* Warning Utilities */
.bg-warning-100 {
    background-color: var(--warning-100) !important;
}

.color-warning-100 {
    color: var(--warning-100) !important;
}

.border-warning-100 {
    border-color: var(--warning-100) !important;
}


/* Success Utilities */
.bg-success-100 {
    background-color: var(--success-100) !important;
}

.color-success-100 {
    color: var(--success-100) !important;
}

.border-success-100 {
    border-color: var(--success-100) !important;
}

.bg-surface-50 {
    background-color: var(--surface-50) !important;
}

.color-surface-50 {
    color: var(--surface-50) !important;
}

.border-surface-50 {
    border-color: var(--surface-50) !important;
}

.bg-brand-50 {
    background-color: var(--brand-50) !important;
}

.color-brand-50 {
    color: var(--brand-50) !important;
}

.border-brand-50 {
    border-color: var(--brand-50) !important;
}

.bg-secondary-50 {
    background-color: var(--secondary-50) !important;
}

.color-secondary-50 {
    color: var(--secondary-50) !important;
}

.border-secondary-50 {
    border-color: var(--secondary-50) !important;
}

.bg-neutral-50 {
    background-color: var(--neutral-50) !important;
}

.color-neutral-50 {
    color: var(--neutral-50) !important;
}

.border-neutral-50 {
    border-color: var(--neutral-50) !important;
}

.bg-info-50 {
    background-color: var(--info-50) !important;
}

.color-info-50 {
    color: var(--info-50) !important;
}

.border-info-50 {
    border-color: var(--info-50) !important;
}

.bg-error-50 {
    background-color: var(--error-50) !important;
}

.color-error-50 {
    color: var(--error-50) !important;
}

.border-error-50 {
    border-color: var(--error-50) !important;
}

.bg-warning-50 {
    background-color: var(--warning-50) !important;
}

.color-warning-50 {
    color: var(--warning-50) !important;
}

.border-warning-50 {
    border-color: var(--warning-50) !important;
}

.bg-success-50 {
    background-color: var(--success-50) !important;
}

.color-success-50 {
    color: var(--success-50) !important;
}

.border-success-50 {
    border-color: var(--success-50) !important;
}

.color-primary {
    color: var(--color-text-neutral-primary) !important;
}

.color-secondary {
    color: var(--text-secondary) !important;
}

.color-tertiary {
    color: var(--text-tertiary) !important;
}

.color-inverted {
    color: var(--text-inverted) !important;
}

/*#endregion */

/*#region background color */
/*#region system */
.bg-system-default {
    background-color: var(--color-bg-system-default) !important;
}

.bg-system-secondary {
    background-color: var(--color-bg-system-secondary) !important;
}

.bg-system-tertiary {
    background-color: var(--color-bg-system-tertiary) !important;
}

.bg-system-inverted {
    background-color: var(--color-bg-system-inverted) !important;
}

.bg-system-overlay {
    background-color: var(--color-bg-system-overlay) !important;
}
/*#endregion*/

/*#region brand */
.bg-brand-lightest {
    background-color: var(--color-bg-brand-lightest) !important;
}

.bg-brand-default {
    background-color: var(--color-bg-brand-default) !important;
}

.bg-brand-secondary {
    background-color: var(--color-bg-brand-secondary) !important;
}

.bg-brand-tertiary {
    background-color: var(--color-bg-brand-tertiary) !important;
}
/*#endregion*/

/*#region success */
.bg-success-default {
    background-color: var(--color-bg-success-default) !important;
}

.bg-success-secondary {
    background-color: var(--color-bg-success-secondary) !important;
}

.bg-success-tertiary {
    background-color: var(--color-bg-success-tertiary) !important;
}
/*#endregion*/

/*#region error */
.bg-error-default {
    background-color: var(--color-bg-error-default) !important;
}

.bg-error-secondary {
    background-color: var(--color-bg-error-secondary) !important;
}

.bg-error-tertiary {
    background-color: var(--color-bg-error-tertiary) !important;
}
/*#endregion*/

/*#region warning */
.bg-warning-default {
    background-color: var(--color-bg-warning-default) !important;
}

.bg-warning-secondary {
    background-color: var(--color-bg-warning-secondary) !important;
}

.bg-warning-tertiary {
    background-color: var(--color-bg-warning-tertiary) !important;
}
/*#endregion*/

/*#region info */
.bg-info-default {
    background-color: var(--color-bg-info-default) !important;
}

.bg-info-secondary {
    background-color: var(--color-bg-info-secondary) !important;
}

.bg-info-tertiary {
    background-color: var(--color-bg-info-tertiary) !important;
}
/*#endregion*/
/*#endregion*/

/*#region text color */
/*#region brand */
.text-brand-lightest {
    color: var(--color-text-brand-lightest) !important;
}

.text-brand-default {
    color: var(--color-text-brand-default) !important;
}

.text-brand-secondary {
    color: var(--color-text-brand-secondary) !important;
}

.text-brand-tertiary {
    color: var(--color-text-brand-tertiary) !important;
}
/*#endregion*/

/*#region neutral */
.text-neutral-lightest {
    color: var(--color-text-neutral-lightest) !important;
}

.text-neutral-default {
    color: var(--color-text-neutral-default) !important;
}

.text-neutral-secondary {
    color: var(--color-text-neutral-secondary) !important;
}

.text-neutral-tertiary {
    color: var(--color-text-neutral-tertiary) !important;
}

.text-neutral-inverted {
    color: var(--color-text-neutral-inverted) !important;
}
/*#endregion*/

/*#region success */
.text-success-default {
    color: var(--color-text-success-default) !important;
}

.text-success-secondary {
    color: var(--color-text-success-secondary) !important;
}

.text-success-tertiary {
    color: var(--color-text-success-tertiary) !important;
}
/*#endregion*/

/*#region error */
.text-error-default {
    color: var(--color-text-error-default) !important;
}

.text-error-secondary {
    color: var(--color-text-error-secondary) !important;
}

.text-error-tertiary {
    color: var(--color-text-error-tertiary) !important;
}
/*#endregion*/

/*#region warning */
.text-warning-default {
    color: var(--color-text-warning-default) !important;
}

.text-warning-secondary {
    color: var(--color-text-warning-secondary) !important;
}

.text-warning-tertiary {
    color: var(--color-text-warning-tertiary) !important;
}
/*#endregion*/

/*#region info */
.text-info-default {
    color: var(--color-text-info-default) !important;
}

.text-info-secondary {
    color: var(--color-text-info-secondary) !important;
}

.text-info-tertiary {
    color: var(--color-text-info-tertiary) !important;
}
/*#endregion*/
/*#endregion*/

/*#region border color */
/*#region brand */
.border-brand-lightest {
    border-color: var(--color-border-brand-lightest) !important;
}

.border-brand-default {
    border-color: var(--color-border-brand-default) !important;
}

.border-brand-secondary {
    border-color: var(--color-border-brand-secondary) !important;
}

.border-brand-tertiary {
    border-color: var(--color-border-brand-tertiary) !important;
}
/*#endregion*/

/*#region neutral */
.border-neutral-lightest {
    border-color: var(--color-border-neutral-lightest) !important;
}

.border-neutral-default {
    border-color: var(--color-border-neutral-default) !important;
}

.border-neutral-secondary {
    border-color: var(--color-border-neutral-secondary) !important;
}

.border-neutral-tertiary {
    border-color: var(--color-border-neutral-tertiary) !important;
}

.border-neutral-inverted {
    border-color: var(--color-border-neutral-inverted) !important;
}
/*#endregion*/

/*#region success */
.border-success-default {
    border-color: var(--color-border-success-default) !important;
}

.border-success-secondary {
    border-color: var(--color-border-success-secondary) !important;
}

.border-success-tertiary {
    border-color: var(--color-border-success-tertiary) !important;
}
/*#endregion*/

/*#region error */
.border-error-default {
    border-color: var(--color-border-error-default) !important;
}

.border-error-secondary {
    border-color: var(--color-border-error-secondary) !important;
}

.border-error-tertiary {
    border-color: var(--color-border-error-tertiary) !important;
}
/*#endregion*/

/*#region warning */
.border-warning-default {
    border-color: var(--color-border-warning-default) !important;
}

.border-warning-secondary {
    border-color: var(--color-border-warning-secondary) !important;
}

.border-warning-tertiary {
    border-color: var(--color-border-warning-tertiary) !important;
}
/*#endregion*/

/*#region info */
.border-info-default {
    border-color: var(--color-border-info-default) !important;
}

.border-info-secondary {
    border-color: var(--color-border-info-secondary) !important;
}

.border-info-tertiary {
    border-color: var(--color-border-info-tertiary) !important;
}
/*#endregion*/
/*#endregion*/


/*#endregion */

/*#region Layout Utilities */

/*#endregion*/

/*#region State Utilities */

.hover\:bg-brand-400:hover {
    background-color: var(--brand-400) !important;
}

.hover\:text-brand-400:hover {
    color: var(--brand-400) !important;
}

.focus\:ring-info-300:focus {
    box-shadow: 0 0 0 3px var(--info-300) !important;
}

.active\:bg-error-500:active {
    background-color: var(--error-500) !important;
}


/*#endregion */