:root {
    /* Palette */

    /* Azure color */
    --azure--azure0: #000000;
    --azure--azure10: #16213B;
    --azure--azure20: #213459;
    --azure--azure30: #223C6A;
    --azure--azure40: #25457F;
    --azure--azure50: #2E5AA4;
    --azure--azure60: #3D6FBA;
    --azure--azure70: #618DCF;
    --azure--azure80: #98B4E1;
    --azure--azure90: #C8D7EF;
    --azure--azure95: #E6ECF8;
    --azure--azure100: #F3F5FC;

    /* Yellow color */
    --yellow--yellow10: #121000;
    --yellow--yellow20: #413C0C;
    --yellow--yellow30: #716818;
    --yellow--yellow40: #A09323;
    --yellow--yellow50: #D0BF2F;
    --yellow--yellow60: #FFEB3B;
    --yellow--yellow70: #FFEF62;
    --yellow--yellow80: #FFF389;
    --yellow--yellow90: #FFF7B1;
    --yellow--yellow95: #FFFDEB;

    /* Violet color */
    --violet--violet0: #240520;
    --violet--violet10: #480A40;
    --violet--violet20: #6B0F61;
    --violet--violet30: #8F1481;
    --violet--violet40: #B319A1;
    --violet--violet50: #C244B3;
    --violet--violet60: #D170C5;
    --violet--violet70: #DF9BD8;
    --violet--violet80: #EEC7EA;
    --violet--violet95: #FDF2FC;

    /* Black color */
    --black--black0: #000000;
    --black--black10: #222324;
    --black--black20: #333333;
    --black--black30: #4D4D4D;
    --black--black40: #666666;

    /* Grey color */
    --grey--grey50: #7F7F7F;
    --grey--grey60: #999999;
    --grey--grey70: #B3B3B3;
    --grey--grey80: #D7D7D7;
    --grey--grey90: #F7F7F7;

    /* White color */
    --white--white100: #FFFFFF;

    /* Red color */
    --red--red10: #4C1D1A;
    --red--red20: #601410;
    --red--red30: #8C1D18;
    --red--red40: #B3261E;
    --red--red50: #F91C11;
    --red--red60: #E46962;
    --red--red70: #EC928E;
    --red--red80: #F2B8B5;
    --red--red90: #F9DEDC;
    --red--red95: #FCF2F2;

    /* Green color */
    --green--green20: #0F5429;
    --green--green95: #F2FCF6;

    /* Blue color */
    --blue--blue20: #0645AD;

    /* Azure linear */
    --azure-linear: linear-gradient(90deg, #141F7E 0%, #2582D3 100%);

    /* Primary colors */
    --primary-color--dark: var(--azure--azure20);
    --primary-color--dark-dark-default: var(--azure--azure30);
    --primary-color--dark-default: var(--azure--azure40);
    --primary-color--default: var(--azure--azure50);
    --primary-color--default-light: var(--azure--azure90);
    --primary-color--light: var(--azure--azure95);

    /* Semantic tokens */
    /* Primary button */
    --color-primary-default-bg--default: var(--azure--azure50);
    --color-primary-default-bg--hover: var(--azure--azure40);
    --color-primary-default-bg--active: var(--azure--azure20);
    --color-primary-default-text--default: var(--white--white100);
    --color-primary-default-text--hover: var(--white--white100);
    --color-primary-default-text--active: var(--white--white100);
    --color-primary-default-svg--default: var(--white--white100);
    --color-primary-default-svg--hover: var(--white--white100);
    --color-primary-default-svg--active: var(--white--white100);
    --color-primary-disabled-bg--default: var(--grey--grey90);
    --color-primary-disabled-text--default: var(--grey--grey60);
    --color-primary-disabled-svg--default: var(--grey--grey60);

    /* Primary tonal button */
    --color-primary-tonal-default-bg--default: var(--azure--azure95);
    --color-primary-tonal-default-bg--hover: var(--azure--azure90);
    --color-primary-tonal-default-bg--active: var(--azure--azure80);
    --color-primary-tonal-default-text--default: var(--black--black10);
    --color-primary-tonal-default-text--hover: var(--black--black10);
    --color-primary-tonal-default-text--active: var(--black--black10);
    --color-primary-tonal-default-svg--default: var(--black--black10);
    --color-primary-tonal-default-svg--hover: var(--black--black10);
    --color-primary-tonal-default-svg--active: var(--black--black10);

    --color-primary-tonal-disabled-bg--default: var(--grey--grey90);
    --color-primary-tonal-disabled-text--default: var(--grey--grey60);
    --color-primary-tonal-disabled-svg--default: var(--grey--grey60);

    /* Outline button */
    --color-outline-default-bg--default: transparent;
    --color-outline-default-bg--hover: transparent;
    --color-outline-default-bg--active: transparent;
    --color-outline-default-text--default: var(--black--black10);
    --color-outline-default-text--hover: var(--azure--azure40);
    --color-outline-default-text--active: var(--azure--azure20);
    --color-outline-default-svg--default: var(--black--black10);
    --color-outline-default-svg--hover: var(--azure--azure40);
    --color-outline-default-svg--active: var(--azure--azure20);
    --color-outline-default-border--default: var(--azure--azure50);
    --color-outline-default-border--hover: var(--azure--azure40);
    --color-outline-default-border--active: var(--azure--azure20);

    --color-outline-disabled-bg--default: transparent;
    --color-outline-disabled-text--default: var(--grey--grey60);
    --color-outline-disabled-svg--default: var(--grey--grey60);
    --color-outline-disabled-border--default: var(--grey--grey60);

    --color-outline-default-menu-border--default: var(--grey--grey80);

    /* Menu item button */
    --color-menu-item-default-bg--default: var(--white--white100);
    --color-menu-item-default-bg--hover: var(--azure--azure95);
    --color-menu-item-default-bg--active: var(--azure--azure20);
    --color-menu-item-default-text--default: var(--grey--grey60);
    --color-menu-item-default-text--hover: var(--azure--azure50);
    --color-menu-item-default-text--active: var(--white--white100);
    --color-menu-item-default-svg--default: var(--grey--grey60);
    --color-menu-item-default-svg--hover: var(--azure--azure50);
    --color-menu-item-default-svg--active: var(--white--white100);

    /* Text input */
    --color-input-text-default-border--default: var(--grey--grey80);
    --color-input-text-default-border--hover: var(--azure--azure50);
    --color-input-text-default-border--active: var(--azure--azure50);
    --color-input-text-default-text--default: var(--grey--grey60);
    --color-input-text-default-text--hover: var(--grey--grey60);
    --color-input-text-default-text--active: var(--grey--grey60);
}

body::selection {
    background-color: var(--azure--azure50);
    color: white;
}