:root {
  /* Breakpoints 
    - var() can NOT be used inside @media queries
    - use only as reference to maintain consistency for breakpoints until SCSS is implemented 
    - further reading: https://bholmes.dev/blog/alternative-to-css-variable-media-queries/ 
  */
  --desktop-medium-width: 1440px;
  --tablet-landscape-width: 1194px;
  --tablet-portrait-width: 834px;
  --mobile-landscape-width: 667px; 
  --mobile-portrait-width: 375px;

  /* Colors */
  --slb-blue: #0014dc;
  --slb-white: #fff;
  --slb-aqua-blue: #00d2dc;
  --slb-deep-blue: #051464;
  --slb-frost-blue-1: #6e8cc8;
  --slb-frost-blue-2: #afbee1;
  --slb-black: #000;
  --slb-grey-1: #f0f0f0;
  --slb-grey-2: #dce1e1;
  --slb-grey-3: #c8cdcd;
  --slb-grey-4: #aaa;
  --slb-grey-5: #6c6969;
  --slb-red-error: #b50a0a;
  --slb-ext-green-1: #198c19;

  /* Horizontal Padding */
  --horizontal-padding-mobile: 24px;
  --horizontal-padding-tablet-portrait: 56px;
  --horizontal-padding-tablet-landscape: 94px;
  --horizontal-padding-desktop: 120px;
}