:root {
    /* ----- colors ----- */
    --cs_text_color: #131313;

    /* greys */
    --color_gray_50: #FAFAFA;
    --color_gray_100: #F5F5F5;
    --color_gray_200: #EEEEEE;
    --color_gray_300: #E0E0E0;
    --color_gray_400: #B8B8B8;
    --color_gray_500: #9E9E9E;
    --color_gray_600: #757575;
    --color_gray_700: #616161;
    --color_gray_800: #323232;
    --color_gray_900: #131313;

    /* blues */
    --color_blue_50: #F1F7FE;
    --color_blue_100: #C8CBE4;
    --color_blue_200: #A4AAD4;
    --color_blue_300: #8189C2;
    --color_blue_400: #686FB6;
    --color_blue_500: #4F55A9;
    --color_blue_600: #494D9F;
    --color_blue_700: #404393;
    --color_blue_800: #393A86;
    --color_blue_900: #2D2870;

    /* navy blues */
    --color_navy_blue_100: #F4F5FB;
    --color_navy_blue_200: #DCDEEB;
    --color_navy_blue_300: #C5C7DA;
    --color_navy_blue_400: #ADAFCA;
    --color_navy_blue_500: #9698BA;
    --color_navy_blue_600: #7E81A9;
    --color_navy_blue_700: #666A99;
    --color_navy_blue_800: #4F5288;
    --color_navy_blue_900: #383B78;

    /* reds */
    --color_red_50: #FFEBEE;
    --color_red_100: #FFCDD2;
    --color_red_200: #EF9494;
    --color_red_300: #E57373;
    --color_red_400: #EF5350;
    --color_red_500: #F44336;
    --color_red_600: #E53935;
    --color_red_700: #D32F2F;
    --color_red_800: #C62828;
    --color_red_900: #B71C1C;

    /* services colors */
    --ex-light_blue: #EBF3FF;
    --light_blue: #D9E8FF;
    --dark_blue: #6FA7FD;

    /* client colors */
    --cs_color-abbey_road: #CD2037;
    --cs_color-dolby_on: #AC3DD1;
    --cs_color-klassik_radio: #77B926;
    --cs_color-imagination: #FF1955;
    --cs_color-training-hub: #EE6606;


    /* ----- typography ----- */
    /* font family */
    --cs_font_family_quote: "calluna", serif;

    /* font size - desktop */
    --font_decor_1_font_size: 240px;
    --font_decor_2_font_size: 120px;
    --font_decor_3_font_size: 80px;
    --font_decor_4_font_size: 36px;
    --font_heading_1_font_size: 80px;
    --font_heading_2_font_size: 42px;
    --font_heading_3_font_size: 32px;
    --font_heading_4_font_size: 28px;
    --font_heading_5_font_size: 20px;
    --font_heading_6_font_size: 16px;
    --font_body_font_size: 16px;
    --font_body_small_font_size: 12px;
    --font_button_font_size: 20px;

    /* font size - mobile */
    --font_decor_1_mobile_font_size: 189px;
    --font_decor_1_mobile-small_font_size: 169px;
    --font_decor_2_mobile_font_size: 100px;
    --font_decor_3_mobile_font_size: 80px;
    --font_decor_3_small_mobile_font_size: 60px;
    --font_decor_4_mobile_font_size: 26px;
    --font_heading_1_mobile_font_size: 80px;
    --font_heading_2_mobile_font_size: 36px;
    --font_heading_3_mobile_font_size: 28px;
    --font_heading_4_mobile_font_size: 20px;
    --font_heading_5_mobile_font_size: 16px;
    --font_heading_6_mobile_font_size: 14px;
    --font_body_mobile_font_size: 16px;
    --font_body_small_mobile_font_size: 12px;
    --font_button_mobile_font_size: 20px;

    /* cs font size - desktop */
    --cs_decor_1_font_size: 240px;
    --cs_decor_2_font_size: 120px;
    --cs_decor_3_font_size: 80px;
    --cs_decor_4_font_size: 36px;
    --cs_heading_1_font_size: 80px;
    --cs_heading_2_font_size: 42px;
    --cs_heading_3_font_size: 32px;
    --cs_heading_4_font_size: 20px;
    --cs_heading_5_font_size: 16px;
    --cs_body_font_size: 16px;
    --cs_body_small_font_size: 12px;
    --cs_button_font_size: 20px;

    /* cs font size - mobile */
    --cs_decor_1_mobile_font_size: 189px;
    --cs_decor_1_mobile-small_font_size: 169px;
    --cs_decor_2_mobile_font_size: 100px;
    --cs_decor_3_mobile_font_size: 80px;
    --cs_decor_3_small_mobile_font_size: 60px;
    --cs_decor_4_mobile_font_size: 26px;
    --cs_heading_1_mobile_font_size: 80px;
    --cs_heading_2_mobile_font_size: 36px;
    --cs_heading_3_mobile_font_size: 28px;
    --cs_heading_4_mobile_font_size: 20px;
    --cs_heading_5_mobile_font_size: 16px;
    --cs_body_mobile_font_size: 16px;
    --cs_body_small_mobile_font_size: 12px;
    --cs_button_mobile_font_size: 20px;

    /* font weight */
    --cs-font_weight--light: 300;
    --cs-font_weight--regular: 400;
    --cs-font_weight--semibold: 700;
    --cs-font_weight--bold: 800;
    --cs-font_weight--black: 900;

    /* line height */
    --cs_line-height_s: 1;
    --cs_line-height_m: 1.1;
    --cs_line-height_l: 1.2;
    --cs_line-height_xl: 1.5;
    --cs_line-height_xxl: 2;

    /* letter spacing */
    --cs_letter-spacing: 1px;
    --cs_letter-spacing_xs: -0.75px;
    --cs_letter-spacing_s: -1px;
    --cs_letter-spacing_m: -1.75px;
    --cs_letter-spacing_l: -2.5px;
    --cs_letter-spacing_xl: -3px;
    --cs_letter-spacing_xxl: -5px;
    --cs_letter-spacing_xxxl: -12.5px;
}