:root {
    --font-style: normal;
    --font-display: swap;

    --brand: #f80;
    --black: #000000ff;
    --moderate: #FFB800;

    /* TEXT & ICONS */
    --secondary: #e4e4ed;
    --text-on-secondary: #2f2f70;
    --icon-on-secondary: #2f2f70;

    --text-on-brand: #29294D;
    --icon-on-brand: #29294D;

    --info-icon: var(--gradient-brand);
    --text-on-info-icon: var(--text-on-brand);
    --info-on-info-icon: var(--icon-on-brand);

    --border: #edeef3;
    --border-dim: #8493b3;
    --border-brand: var(--gradient-brand);

    /* SURFACES */
    --surface: #F7F7F9;
    --text-on-surface: #2F2F70;
    --icon-on-surface: #8493B3;

    --surface-bright: #FFFFFF;
    --text-on-surface-bright: #2F2F70;
    --icon-on-surface-bright: #2F2F70;

    --surface-dim: #EDEEF3;
    --text-on-surface-dim: #29294D;
    --icon-on-surface-dim: #29294D;

    /* PRIMARY Interactive */
    --primary-default-background: #272cb2;
    --primary-default-text: #FFFFFF;
    --primary-default-icon: #FFFFFF;

    --primary-hover-background: #2944cc;
    --primary-hover-text: #FFFFFF;
    --primary-hover-icon: #FFFFFF;

    --primary-active-background: #29294d;
    --primary-active-text: #FFFFFF;
    --primary-active-icon: #FFFFFF;

    --primary-focus-background: #29294d;
    --primary-focus-text: #FFFFFF;
    --primary-focus-icon: #FFFFFF;

    --primary-disabled-background: #a9a9b8;
    --primary-disabled-text: #FFFFFF;
    --primary-disabled-icon: #FFFFFF;

    /* SECONDARY Interactive */
    --secondary-default-background: #E4E4ED;
    --secondary-default-text: #2F2F70;
    --secondary-default-icon: #2F2F70;

    --secondary-hover-background: #d6d6e4;
    --secondary-hover-text: #2F2F70;
    --secondary-hover-icon: #2F2F70;

    --secondary-active-background: #5a6782;
    --secondary-active-text: #fff;
    --secondary-active-icon: #fff;

    --secondary-focus-background: #5a6782;
    --secondary-focus-text: #fff;
    --secondary-focus-icon: #fff;

    --secondary-disabled-background: #ededf3;
    --secondary-disabled-text: #849383;
    --secondary-disabled-icon: #849383;

    /* LINKS */
    --link-default: #272cb2;
    --link-hover: #2944cc;
    --link-active: #29294d;
    --link-focus: #29294d;
    --link-disabled: #a9a9b8;

    /* LINKS ON BRAND */
    --link-on-brand-default: #29294d;
    --link-on-brand-hover: #2944cc;
    --link-on-brand-active: #29294d;
    --link-on-brand-focus: #29294d;
    --link-on-brand-disabled: #a9a9b8;

    /* BORDER Dividers */
    --border: #edeef3;
    --border-dim: #8493b3;
    --border-active: var(--gradient-brand);

    /* GRADIENTS */
    --gradient-brand:          linear-gradient(to right, #FF8800 00%, #FFC700);
    --gradient-brand-hover:    linear-gradient(to right, #FF8800 75%, #FFB800 100%);
    --gradient-brand-active:   linear-gradient(to right, #FF8800 25%, #FFB800 100%);
    --gradient-brand-disabled: linear-gradient(to right, #ffcc88 00%, #ffee99);

    --gradient-primary: linear-gradient(to right, #2F2F70, #272cb2 );
    --gradient-promo:   linear-gradient(to right, #1FD7FF, #2AF7BB);
    --gradient-promo-2: linear-gradient(to right, #1FD7FF, #E498FF);

    /* STATUS */
    --success-background: #dbebde;
    --success-background-hover: #dbebdeaa ;
    --success-text: #256f25;
    --success-icon: #009850;

    --danger-background: #ffe0ed;
    --danger-background-hover: #ffe0edaa;
    --danger-text: #cc0052;
    --danger-icon: #ff004c;

    --warning-background: #ffdbb2;
    --warning-background-hover: #ffdbb2aa;
    --warning-text: #855400;
    --warning-icon: #c75d00;

    --info-background: #cdd5e3;
    --info-background-hover: #cdd5e3aa;
    --info-text: #2f2f70;
    --info-icon: #2944cc;
    --strato-box-shadow: 0 0.125rem 0.5rem rgb(85, 85, 85, 0.2);
    --strato-box-shadow-hover: 0 0.125rem 0.5rem rgb(85, 85, 85, 0.5);

    --border-radius: 1rem;

    --bs-link-color: var(--link-default);
    --bs-link-hover-color: var(--link-hover);
    --bs-link-active-color: var(--link-active);
    --bs-link-focus-color: var(--link-focus);
    --bs-link-disabled-color: var(--link-disabled);

    --bs-breadcrumb-divider-color: var(--text-on-surface-dim);
    --bs-breadcrumb-item-active-color: var(--text-on-surface-dim);
}