:root {

  /* Colors */
  --store-primary: 54, 159, 76;
  --store-primary-light: 120, 190, 32;
  --store-primary-dark: 48, 140, 67;
  --store-secondary: 243, 232, 218;
  --store-secondary-40: 249, 243, 236;
  --store-black: 0, 0, 0;
  --store-dark: 69, 69, 69;
  --store-gray-one: 128, 128, 128;
  --store-gray-two: 191, 191, 191;
  --store-gray-three: 242, 242, 242;
  --store-white: 255, 255, 255;
  --store-promotion: 224, 62, 82;
  --store-success: var(--store-primary-light);
  --store-warning: 244, 218, 64;
  --store-danger: var(--store-promotion);
  --store-red: 237, 27, 52;
  --store-red-secondary: 219,70,97;
  --store-blue: 22, 0, 255;
  --store-light-brown-one: #FBF4ED;
  --store-light-brown-two: #F8EBDE;

  /* Soft shades */
  --store-soft-green: 155, 207, 166;
  --store-soft-green-light: 221, 240, 199;
  --store-soft-yellow: 253, 248, 231;
  --store-soft-pink: 252, 234, 235;

  /* Highlight */
  --store-highlight-winter: 107, 187, 174;
  --store-highlight-spring: 223, 70, 97;
  --store-highlight-autumn: 232, 119, 34;
  --store-highlight-summer: 244, 218, 64;

  /* Font */
  --store-raleway-font: 'Raleway', -apple-system, blinkmacsystemfont, sans-serif;
  --store-atyp-bl-variable-font: "atyp-bl-variable", -apple-system, blinkmacsystemfont,sans-serif;
  --store-robotoslab-font: 'Roboto Slab', -apple-system, blinkmacsystemfont, sans-serif;
  --store-font: var(--store-raleway-font);
  --store-icon-font: 'icomoon';
  --store-base-font-size: 16px;
  --store-text: var(--store-black);

  /* Others / Legacy */
  --store-checkout: var(--store-secondary);
  --iconsBefore: 0;
  --iconsAfter: 0;

  /*
   * Venia
   *  --venia-anim-*: Used in multiple files
   *  --venia-background-color: Only used in Main component
   *  --venia-border: Used in multiple files
   *  --venia-error: Used in multiple files, as error
   *  --venia-error-alt: Not used
   *  --venia-font: Only used in ToastContainer component
   *  --venia-grey: Used in multiple files
   *  --venia-grey-dark: Used in multiple files
   *  --venia-grey-darker: Used in Header component
   *  --venia-grey-darker: Used in Header component
   *  --venia-orange: Used in ToastContainer component, as warning color
   *  --venia-teal: Used in multiple files, as primary color
   *  --venia-teal-alt: Not used
   *  --venia-teal-dark: Used in Button component
   *  --venia-teal-light: Used in multiple files
   *  --venia-text: Used in multiple files
   *  --venia-text-alt: Used in multiple files
   *  --venia-text-hint: Not used
   *  --venia-text-spot: Not used
   *  --venia-warning-dark: Used in CategoryList component
   *  --venia-warning-light: Used in CategoryList component
   */
  --venia-anim-bounce: cubic-bezier(0.5, 1.8, 0.9, 0.8);
  --venia-anim-in: cubic-bezier(0, 0, 0.2, 1);
  --venia-anim-out: cubic-bezier(0.4, 0, 1, 1);
  --venia-anim-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --venia-background-color: var(--store-gray-three);
  --venia-border: var(--store-gray-two);
  --venia-error: var(--store-danger);
  --venia-error-alt: var(--store-danger);
  --venia-font: var(--store-font);
  --venia-grey: var(--store-gray-three);
  --venia-grey-dark: var(--store-gray-two);
  --venia-grey-darker: var(--store-gray-one);
  --venia-orange: var(--store-warning);
  --venia-teal: var(--store-primary);
  --venia-teal-alt: var(--store-primary);
  --venia-teal-dark: var(--store-primary);
  --venia-teal-light: var(--store-primary);
  --venia-text: var(--store-text);
  --venia-text-alt: var(--store-text);
  --venia-text-hint: var(--store-text);
  --venia-text-spot: var(--store-text);
  --venia-warning-dark: 246, 65, 0;
  --venia-warning-light: 255, 136, 93;
}