:root {
  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ DEFAULTS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --white: #FFFFFF;
  --black: #000000;
  
  --primary: #069DF1;
  --primary-light: #48BEFF;
  --primary-dark: #0063A7;
  --primary-opacity-05: rgba(6, 157, 241, 0.05);
  --primary-opacity-10: rgba(6, 157, 241, 0.1);

  --secondary: #7C98B3;
  --secondary-light: #C1D8E0;
  --secondary-dark: #55697E;

  --tertiary: #2A2E2E;
  --tertiary-light: #A4ABAB;
  --tertiary-dark: #151717;
  --tertiary-subtle: #E1E3E3;

  --success: #06D6A0;
  --success-light: #66EFC3;
  --success-dark: #00654F;

  --info-dark: #02538A;
  --info-light: #EFF8FF;

  --warning: #FFB120;
  --warning-light: #FFDF88;
  --warning-dark: #DD6802;
  --warning-subtle: #FFFAEB;

  --error: #F80A33;
  --error-light: #FF98AA;
  --error-dark: #AC0824;
  --error-subtle: #FFF0F3;

  --purple: #8C5C94;
  --orange: #FF6B35;
  
  --default-text-color: #303136;
  --disabled-text-color: #9FA2B2;
  --text-color-secondary: #77788B;
  --text-color-light: #626371;

  --default-border-color: #CBCFD6;
  --darker-border-color: #B5B8C4;
  --tabs-border-color: #D9E8EC;

  --default-focus-color: #069DF1;
  --default-link-color: #1E88E5;
  --border-color-secondary: #8B8DA0;
  --default-max-app-width: 1440px;

  --background-light: #F4F8F9;
  --background-subtle: #F5F6F8;
  --background-dark: #2B333B;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ BUTTONS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --btn-primary: var(--primary);
  --btn-primary-hover: var(--primary-light);
  --btn-primary-active: var(--primary-dark);
  --btn-primary-disabled: var(--tertiary-subtle);

  --btn-secondary: var(--secondary);
  --btn-secondary-hover: var(--secondary-light);
  --btn-secondary-active: var(--secondary-dark);
  --btn-secondary-disabled: var(--tertiary-subtle);

  --btn-tertiary: var(--tertiary);
  --btn-tertiary-hover: var(--tertiary-light);
  --btn-tertiary-active: var(--tertiary-dark);
  --btn-tertiary-disabled: var(--tertiary-subtle);

  --btn-success: var(--success);
  --btn-success-hover: var(--success-light);
  --btn-success-active: var(--success-dark);
  --btn-success-disabled: var(--tertiary-subtle);

  --btn-warning: var(--warning);
  --btn-warning-hover: var(--warning-light);
  --btn-warning-active: var(--warning-dark);
  --btn-warning-disabled: var(--tertiary-subtle);

  --btn-error: var(--error);
  --btn-error-hover: var(--error-light);
  --btn-error-active: var(--error-dark);
  --btn-error-disabled: var(--tertiary-subtle);

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ MARGINS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --margin-xs: 6px;
  --margin-sm: 10px;
  --margin-md: 16px;
  --margin-lg: 20px;
  --margin-xl: 25px;
  --margin-xxl: 35px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ PADDINGS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --padding-xs: 8px;
  --padding-sm: 12px;
  --padding-md: 16px;
  --padding-lg: 18px;
  --padding-xl: 20px;
  --padding-xxl: 40px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ TYPOGRAPHY ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --font-family-display: 'FreightDisp Pro', 'Proxima Nova', serif;

  --font-size-xxs: 10px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-xxl: 44px;
  --font-size-heading: 40px;

  --line-height-sm: 18px;
  --line-height-md: 20px;
  --line-height-heading: 48px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --font-weight-bolder: 700;
  --font-weight-boldest: 900;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ BREAKPOINTS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --break-point-mobile: 500px;
  --break-point-sm: 800px;
  --break-point-md: 1250px;
  --break-point-lg: 1500px;
  --break-point-xl: 1600px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ BOX SHADOWS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
  --dark-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
  --default-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
  --wider-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, .2);
  --box-shadow-elevation-1: 2px 2px 5px 0px rgba(0, 0, 0, .05);

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ BORDERS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;

  /* Border widths */
  --border-width-sm: 1px;
  --border-width-md: 2px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ ELEMENT SIZES ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --nav-header-height: 40px;
  --side-panel-width: 300px;  

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ PRODLIST SIZES per KC (future site_wide?) ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --productlist-tile-width: 269px;
  --productlist-tile-height: 420px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ PRODLIST SIZES per KC (future site_wide?) ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --vertical-product-tile-width: 269px;
  --vertical-product-tile-height: 348px;  
  --vertical-product-tile-image-width: 240px;
  --vertical-product-tile-image-height: 180px;
  --vertical-product-tileimage-gap: var(--margin-md); 
  --vertical-product-tiledetails-gap: 12px;
  --vertical-product-tiletitle-size: var(--font-size-md);
  --vertical-product-tiletitle-line-height: 18px;
  --vertical-product-tileprice-size: var(--font-size-lg);
  --vertical-product-tileprice-line-height: 24px;
  --vertical-product-tilecaption-line-height: 18px;
  --vertical-product-tileactions-gap: var(--margin-xs);
  --vertical-product-tilebutton-min-width: 120px;
  --vertical-product-tiledisabled-border: var(--darker-border-color);
  --vertical-product-tiledisabled-text: var(--darker-border-color);
  --vertical-product-tilesecondary-size: var(--font-size-xs);
  --vertical-product-tilesecondary-line-height: 14px;
  

  --vertical-product-tilebutton-height: 28px;
  --vertical-product-tiledisabled-bg: #edeff2;
  
  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ NOTIFICATIONS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --notification-yellow: #F98E07;
  --notification-green: #009F77;
  --notification-purple: #A371AC;
  --notification-blue: #48BEFF;
  --notification-pink: #F50D8D;
  --notification-gray: #6b7280;
}