:root {
    /* Raw color values to be used as base for standard and transparent variations */
    --color-black-raw: 0, 0, 0; /*#000000*/
    --color-white-raw: 255, 255, 255; /*#FFFFFF*/
    --color-offwhite-raw: 247, 247, 247; /*#F7F7F7*/

    --color-primary-100-raw: 201, 212, 226; /*#C9D4E2*/
    --color-primary-200-raw: 171, 183, 201; /*#ABB7C9*/
    --color-primary-300-raw: 139, 154, 176; /*#8B9AB0*/
    --color-primary-500-raw: 92, 112, 139; /*#5C708B*/
    --color-primary-800-raw: 48, 61, 78; /*#303D4E*/
    --color-primary-900-raw: 30, 41, 55; /*#1E2937*/

    --color-accent-200-raw: 154, 174, 202; /*#9AAECA*/
    --color-accent-500-raw: 52, 93, 148; /*#345D94*/
    --color-accent-800-raw: 33, 65, 119; /*#214177*/
    --color-accent-A400-raw: 4, 90, 155; /*#045A9B*/

    /* Base palette */
    --color-brand-200: #F890AD;
    --color-brand-500: #ED225C;
    --color-brand-800: #B21452;

    --color-black: rgb(var(--color-black-raw));
    --color-white: rgb(var(--color-white-raw));
    --color-dark: #424A54;
    --color-light: #FFFFFF;
    --color-offwhite: rgb(var(--color-offwhite-raw));
    --color-grey: #ABABAB;

    --color-primary-50: #E9EDF8;
    --color-primary-100: rgb(var(--color-primary-100-raw));
    --color-primary-200: rgb(var(--color-primary-200-raw));
    --color-primary-300: rgb(var(--color-primary-300-raw));
    --color-primary-400: #73859D;
    --color-primary-500: rgb(var(--color-primary-500-raw));
    --color-primary-600: #4F627A;
    --color-primary-700: #3F4F64;
    --color-primary-800: rgb(var(--color-primary-800-raw));
    --color-primary-900: rgb(var(--color-primary-900-raw));
    --color-primary-A100: #000000; /*Not specified so far.*/
    --color-primary-A200: #000000; /*Not specified so far.*/
    --color-primary-A400: #000000; /*Not specified so far.*/
    --color-primary-A700: #000000; /*Not specified so far.*/

    --color-accent-50: #E7ECF2;
    --color-accent-100: #C2CEDF;
    --color-accent-200: rgb(var(--color-accent-200-raw));
    --color-accent-300: #718EB4;
    --color-accent-400: #5275A4;
    --color-accent-500: rgb(var(--color-accent-500-raw));
    --color-accent-600: #2F558C;
    --color-accent-700: #274B81;
    --color-accent-800: rgb(var(--color-accent-800-raw));
    --color-accent-900: #153065;
    --color-accent-A100: #000000; /*Not specified so far.*/
    --color-accent-A200: #2094CA;
    --color-accent-A400: rgb(var(--color-accent-A400-raw));
    /*Added to palette to match the current color of many svg icons.
      To be deleted after FBKBLP-3732*/
    --color-accent-A700: #192F7C;

    --color-warn-50: #FEE4E7;
    --color-warn-100: #FBDAC2;
    --color-warn-200: #FB8D9A;
    --color-warn-300: #F95F72;
    --color-warn-400: #FF83C53;
    --color-warn-500: #F71A35;
    --color-warn-600: #F61730;
    --color-warn-700: #F51328;
    --color-warn-800: #F30F22;
    --color-warn-900: #F10816;
    --color-warn-A100: #000000; /*Not specified so far.*/
    --color-warn-A200: #000000; /*Not specified so far.*/
    --color-warn-A400: #000000; /*Not specified so far.*/
    --color-warn-A700: #000000; /*Not specified so far.*/

    /* Base palette colors with opacity */
    --color-offwhite-transparent-1: rgba(var(--color-offwhite-raw), 0.9);
    --color-white-transparent-1: rgba(var(--color-white-raw), 0.9);

    --color-black-transparent-1: rgba(var(--color-black-raw), 0.2);
    --color-black-transparent-2: rgba(var(--color-black-raw), 0.25);
    --color-black-transparent-3: rgba(var(--color-black-raw), 0.6);

    --color-accent-500-transparent: rgba(var(--color-accent-500-raw), 0.1);
    --color-accent-800-transparent: rgba(var(--color-accent-800-raw), 0.2);
    --color-accent-A400-transparent: rgba(var(--color-accent-A400-raw), 0.15);
}