/* Base styles according to style guide */
:root {
    /****** COLORS ******/
    --cp-red-2: #FF5252;
    /*OLD*/
    --cp-primary-50: #e6f4f5;
    --cp-primary-100: #b0dce1;
    --cp-primary-200: #8acbd2;
    --cp-primary-300: #54b3be;
    --cp-primary-400: #33a4b1;
    --cp-primary-500: #008d9e;
    --cp-primary-600: #008090;
    --cp-primary-700: #006470;
    --cp-primary-800: #004e57;
    --cp-primary-900: #003b42;
    --cp-secondary-50: #fff3e6;
    --cp-secondary-75: #ffcc96;
    --cp-secondary-100: #feb76b;
    --cp-secondary-200: #fe982b;
    --cp-secondary-300: #fe8300;
    --cp-secondary-400: #b25c00;
    --cp-secondary-500: #9b5000;
    /**/
    --cp-text-50: #e7e8ea;
    --cp-text-100: #b5b7bd;
    --cp-text-200: #91949d;
    --cp-text-300: #5e6470;
    --cp-text-400: #3f4555;
    --cp-text-500: #0f172a;
    --cp-text-600: #0e1526;
    --cp-text-700: #0b101e;
    --cp-text-800: #080d17;
    --cp-text-900: #060a12;
    /**/
    --cp-success-50: #e7f7ec;
    --cp-success-75: #9eddaf;
    --cp-success-100: #76cf8e;
    --cp-success-200: #3abb5e;
    --cp-success-300: #12ad3d;
    --cp-success-400: #0d792b;
    --cp-success-500: #0b6a25;
    /**/
    --cp-error-50: #f8eaea;
    --cp-error-75: #e2aaaa;
    --cp-error-100: #d68686;
    --cp-error-200: #c45252;
    --cp-error-300: #b82f2f;
    --cp-error-400: #812121;
    --cp-error-500: #701d1d;
    /**/
    --cp-bg-gray-0: #ffffff;
    --cp-bg-gray-10: #fafbfb;
    --cp-bg-gray-20: #f5f6f7;
    --cp-bg-gray-30: #ebedf0;
    --cp-bg-gray-40: #dfe2e6;
    --cp-bg-gray-50: #c2c7d0;
    --cp-bg-gray-60: #b3b9c4;
    --cp-bg-gray-70: #a6aebb;
    --cp-bg-gray-80: #98a1b0;
    --cp-bg-gray-90: #8993a4;
    --cp-bg-gray-100: #7a8699;
    --cp-bg-gray-200: #6b788e;
    --cp-bg-gray-300: #5d6b82;
    --cp-bg-gray-400: #505f79;
    --cp-bg-gray-500: #42526d;
    --cp-bg-gray-600: #354764;
    --cp-bg-gray-700: #243757;
    --cp-bg-gray-800: #15294b;
    --cp-bg-gray-900: #091e42;
    /**/
    --cp-green: #4da866;
    --cp-red: #b82f2f;
    --cp-purple: #8b5cf6;
    --cp-navy: #4158bb;
    --cp-teal: #26547c;
    --cp-sky: #73d4ff;
    --cp-blue-light: #d6ebfd;
    /****** Font ******/
    --cp-font-family: "Open Sans";
    /**/
    --cp-font-weight-regular: 400;
    --cp-font-weight-medium: 400;
    --cp-font-weight-light: 300;
    --cp-font-weight-bold: 700;
    /**/
    --cp-font-size-display-2xl: 72px;
    --cp-font-size-display-xl: 72px;
    --cp-font-size-display-lg: 72px;
    --cp-font-size-display-md: 72px;
    --cp-font-size-display-sm: 72px;
    --cp-font-size-display-xs: 72px;
    --cp-font-size-display-2xs: 72px;
    --cp-font-size-text-xl: 20px;
    --cp-font-size-text-lg: 18px;
    --cp-font-size-text-md: 16px;
    --cp-font-size-text-sm: 14px;
    --cp-font-size-text-xs: 12px;
    --cp-font-size-text-2xs: 10px;
    /**/
    --cp-line-height-display-2xl: 72px;
    --cp-line-height-display-xl: 72px;
    --cp-line-height-display-lg: 72px;
    --cp-line-height-display-md: 72px;
    --cp-line-height-display-sm: 72px;
    --cp-line-height-display-xs: 72px;
    --cp-line-height-display-2xs: 72px;
    --cp-line-height-text-xl: 28px;
    --cp-line-height-text-lg: 26px;
    --cp-line-height-text-md: 24px;
    --cp-line-height-text-sm: 20px;
    --cp-line-height-text-xs: 18px;
    --cp-line-height-text-2xs: 14px;
}

body {
    color: var(--cp-text-700);
    font-family: var(--cp-font-family);
    font-size: 14px;
}

a, a:hover, a:active, a:visited {
    text-decoration: none;
}

h1 {
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 50px */
    letter-spacing: -0.5px;
    margin: 0;
}

h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 40px */
    letter-spacing: -0.2px;
    margin: 0;
}

h3 {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 30px */
    letter-spacing: 0.2px;
    margin: 0;
}

h4 {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 27.5px */
    margin: 0;
}

h5 {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 25.2px */
    letter-spacing: 0.2px;
    margin: 0;
}

h6 {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 22.4px */
    letter-spacing: 0.2px;
    margin: 0;
}