:root {

  /* new colors */
  --color-transparent: rgba(255, 255, 255, 0);
  --color-green: #03715F;
  --color-primary: #02bfa4;
  --color-primary-dark: #008C71;
  --color-secondary-100: #00898b;
  --color-secondary-100-dark: #005658;
  --color-secondary-200: #00566e;
  --color-secondary-200-dark: #00233B;
  --color-accent: #ff7763;
  --color-accent-dark: #CC4430;
  --color-disabled: #f2f3f4;
  --color-disabled-dark: #BFC0C1;
  --color-warning: #ffc108;
  --color-warning-dark: #CC8E00;
  --color-danger: #dc3645;
  --color-danger-dark: #A90312;
  --color-success: #10cc97;
  --color-success-dark: #009964;
  --color-info: #4a90e2;
  --color-info-dark: #175DAF;
  --color-snow: #fdfdfd;
  --color-white: #ffffff;
  --color-grey-100: #f8f9fa;
  --color-grey-200: #f2f3f4;
  --color-grey-300: #e5e8eb;
  --color-grey-400: #ced4da;
  --color-grey-500: #adb5bd;
  --color-grey-600: #697885;
  --color-grey-700: #35424D;
  --color-grey-800: #343a40;

  --color-grey-2000: #292C30;
  --color-grey-1000: #181B1E;

  --color-grey-900: #222529;
  --color-grey-3000: #18191A;
  --color-default: #10161f;
  --color-black: #000000;
  --color-gradient-accent-1: linear-gradient(#02BFA4, #00898B);
  --color-gradient-primary: linear-gradient(-46deg,#00898B 0%, #02BFA4 100%);
  --color-gradient-primary-2: linear-gradient(90deg, #02bfa4, #15a691);

  /* spacings, element sizes */
  --spacing-0-5: 4px;
  --spacing-1: 8px;
  --spacing-1-5: 12px;
  --spacing-1-8: 14px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 40px;
  --spacing-6: 48px;
  --spacing-7: 56px;
  --spacing-8: 64px;
  --spacing-9: 72px;
  --spacing-10: 80px;
  --spacing-11: 88px;
  --spacing-12: 96px;
  --spacing-13: 104px;
  --spacing-14: 112px;
  --spacing-15: 120px;
  --spacing-20: 160px;
  --spacing-30: 240px;
  --card-container-small: 300px;
  --card-container-medium: 400px;
  --card-container-large: 640px;
  --card-container-extra-large: 1200px;
  --card-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
  --card-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.12);
  --card-shadow-3: 1px 2px 16px 0 rgba(0,0,0,0.16);
  --card-shadow-4: 0 12px 12px 0 rgba(173,181,189,0.10);
  --card-shadow-5: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  --card-radius: 12px 12px 12px 12px;
  --card-header-shadow: 0px -5px 10px var(--color-default);
  --height-009: 90px;
  --height-005: 50px;
  --height-002: 20px;

  /* border-radius */
  --radius-small: 2px;
  --radius-medium: 4px;
  --radius-large: 8px;

    /* button border-radius */
    --button-radius-super-small: 12px;
    --button-radius-extra-small: 16px;
    --button-radius-small: 20px;
    --button-radius-medium: 24px;
    --button-radius-large: 28px;

  /* typography */
  --font-family-montserrat: 'Montserrat', sans-serif;
  --font-family-noto-sans: 'Noto Sans', sans-serif;
  --font-family-roboto: 'Roboto', sans-serif;
  --typography-text-font-family: var(--font-family-noto-sans);
  --typography-text-font-weight-400: 400;
  --typography-text-font-weight-700: 700;
  --typography-text-font-case: capitalize;
  --typography-text-size-xs: 10px;
  --typography-text-size-s: 12px;
  --typography-text-size-m: 14px;
  --typography-text-size-l: 16px;
  --typography-text-size-xl: 18px;

  --typography-button-font-family: var(--font-family-noto-sans);
  --typography-button-font-weight-700: 700;
  --typography-button-font-case: capitalize;
  --typography-button-size-xs: 12px;
  --typography-button-size-s: 14px;
  --typography-button-size-m: 16px;
  --typography-button-size-l: 18px;
  --typography-button-size-xl: 20px;

  --typography-navigation-font-family: var(--font-family-noto-sans);
  --typography-navigation-font-weight-700: 700;
  --typography-navigation-size-s: 12px;
  --typography-navigation-size-m: 14px;
  --typography-navigation-size-l: 16px;
  --typography-navigation-size-xl: 18px;

  --typography-link-font-family: var(--font-family-noto-sans);
  --typography-link-font-weight-400: 400;
  --typography-link-font-weight-700: 700;
  --typography-link-size-s: 12px;
  --typography-link-size-m: 14px;
  --typography-link-size-l: 16px;
  --typography-link-size-xl: 18px;

  --typography-link-nav-font-family: var(--font-family-noto-sans);
  --typography-link-nav-font-weight-400: 400;
  --typography-link-nav-font-weight-700: 700;
  --typography-link-nav-font-case: uppercase;
  --typography-link-nav-size-s: 12px;
  --typography-link-nav-size-m: 14px;
  --typography-link-nav-size-l: 16px;
  --typography-link-nav-size-xl: 18px;

  --typography-header-font-family: var(--font-family-montserrat);
  --typography-header-font-weight-200: 200;
  --typography-header-font-weight-400: 400;
  --typography-header-font-weight-600: 600;
  --typography-header-size-sm: 16px;
  --typography-header-size-xs: 18px;
  --typography-header-size-s: 24px;
  --typography-header-size-m: 32px;
  --typography-header-size-l: 48px;
  --typography-header-size-xl: 64px;

  --typography-subheader-font-family: var(--font-family-noto-sans);
  --typography-subheader-font-weight-400: 400;
  --typography-subheader-size-xs: 12px;
  --typography-subheader-size-sm: 14px;
  --typography-subheader-size-s: 16px;
  --typography-subheader-size-m: 18px;
  --typography-subheader-size-l: 24px;
  --typography-subheader-size-xl: 32px;

  --typography-text-display-font-family: var(--font-family-montserrat);
  --typography-text-display-font-weight-400: 400;
  --typography-text-display-font-weight-700: 700;
  --typography-text-display-font-case: capitalize;
  --typography-text-display-size-s: 12px;
  --typography-text-display-size-m: 14px;
  --typography-text-display-size-l: 16px;
  --typography-text-display-size-xl: 18px;

  --typography-label-font-family: var(--font-family-noto-sans);
  --typography-label-font-weight-400: 400;
  --typography-label-font-weight-700: 700;
  --typography-label-font-case: uppercase;
  --typography-label-size-s: 10px;
  --typography-label-size-m: 12px;
  --typography-label-size-l: 14px;
  --typography-label-size-xl: 16px;

  --typography-caption-font-family: var(--font-family-noto-sans);
  --typography-caption-font-weight-400: 400;
  --typography-caption-font-case: capitalize;
  --typography-caption-size-s: 10px;
  --typography-caption-size-m: 12px;
  --typography-caption-size-l: 14px;
  --typography-caption-size-xl: 16px;

  --typography-title-font-family: var(--font-family-noto-sans);
  --typography-title-font-weight-400: 400;
  --typography-title-font-case: uppercase;
  --typography-title-size-s: 16px;
  --typography-title-size-m: 18px;
  --typography-title-size-l: 24px;
  --typography-title-size-xl: 32px;

  --typography-title-display-font-family: var(
    --font-family-montserrat
  );
  --typography-title-display-font-weight-200: 200;
  --typography-title-display-font-weight-400: 400;
  --typography-title-display-font-weight-500: 500;
  --typography-title-display-font-case: uppercase;
  --typography-title-display-size-s: 16px;
  --typography-title-display-size-m: 18px;
  --typography-title-display-size-l: 24px;
  --typography-title-display-size-xl: 32px;

  --typography-numbers-font-family: var(--font-family-noto-sans);
  --typography-numbers-font-weight-400: 400;
  --typography-numbers-font-weight-700: 700;
  --typography-numbers-font-case: uppercase;
  --typography-numbers-size-s: 14px;
  --typography-numbers-size-m: 16px;
  --typography-numbers-size-l: 18px;
  --typography-numbers-size-xl: 24px;
}