/*
Brand Style Guide
Create your own version of this file, set whatever colors you like, then attach it to the document after _blue-style-guide and before _blue-global.
*/

:root {
  
  /*Primary Colors*/
  --mc-pink: #f27fb6;
  --mc-pink-accent: #c86896;
  
  --brand-primary: #f27fb6;
  --brand-secondary: #c86896;
  --brand-tertiary: #432342;
  
  /*Shades of Pink*/
  --mc-pink-1: #eb7ab0;
  --mc-pink-2: #f27fb6;
  --mc-pink-3: #c86896;
  --mc-pink-4: #a6567d;
  --mc-pink-5: #844562;
  --mc-pink-6: #63334b;
  
  /*Supporting Neutrals*/
  --mc-white: #f7ebf1;
  --mc-plum: #432342;
  --mc-navy: #04243a;
  
  /*Extended & Denotive Palete*/
  --mc-gray: #3f3f3f;
  --mc-teal: #75ead2;
  --mc-maroon: #962342;
  --mc-blue: #1897b2;
  --mc-yellow: #ffc370;
  --mc-orange: #e5896d;
  --mc-purple: #966aaa;
  
  /*Denotative Colors*/
 --denotative-success: #75ead2;
 --denotative-failure: #962342;
 --denotative-info: #1897b2;
 --denotative-warning: #ffc370;


}

/*Primary*/
.mc-pink{
  color: var(--mc-pink);
}
.mc-pink-bg{
  background-color: var(--mc-pink);
}

.mc-accent{
  color: var(--mc-pink-accent);
}
.mc-accent-bg{
  background-color: var(--mc-pink-accent);
}

/*Shades*/
.mc-pink-1{
  color: var(--mc-pink-1);
}
.mc-pink-1-bg{
  background-color: var(--mc-pink-1);
}
.mc-pink-2{
  color: var(--mc-pink-2);
}
.mc-pink-2-bg{
  background-color: var(--mc-pink-2);
}
.mc-pink-3{
  color: var(--mc-pink-3);
}
.mc-pink-3-bg{
  background-color: var(--mc-pink-3);
}
.mc-pink-4{
  color: var(--mc-pink-4);
}
.mc-pink-4-bg{
  background-color: var(--mc-pink-4);
}
.mc-pink-5{
  color: var(--mc-pink-5);
}
.mc-pink-5-bg{
  background-color: var(--mc-pink-5);
}
.mc-pink-6{
  color: var(--mc-pink-6);
}
.mc-pink-6-bg{
  background-color: var(--mc-pink-6);
}

/*Neutrals*/
.mc-white{
  color: var(--mc-white);
}
.mc-white-bg{
  background-color: var(--mc-white);
}
.mc-plum{
  color: var(--mc-plum);
}
.mc-plum-bg{
  background-color: var(--mc-plum);
}
.mc-navy{
  color: var(--mc-navy);
}
.mc-navy-bg{
  background-color: var(--mc-navy);
}
.mc-gray{
  color: var(--mc-gray);
}
.mc-gray-bg{
  background-color: var(--mc-gray);
}

/*Extended Palette*/
.mc-teal{
  color: var(--mc-teal);
}
.mc-teal-bg{
  background-color: var(--mc-teal);
}
.mc-maroon{
  color: var(--mc-maroon);
}
.mc-maroon-bg{
  background-color: var(--mc-maroon);
}
.mc-blue{
  color: var(--mc-blue);
}
.mc-blue-bg{
  background-color: var(--mc-blue);
}
.mc-yellow{
  color: var(--mc-yellow);
}
.mc-yellow-bg{
  background-color: var(--mc-yellow);
}
.mc-orange{
  color: var(--mc-orange);
}
.mc-orange-bg{
  background-color: var(--mc-orange);
}
.mc-purple{
  color: var(--mc-purple);
}
.mc-purple-bg{
  background-color: var(--mc-purple);
}


/*Primary*/
.brand-primary{
  color: var(--mc-pink);
}
.brand-primary-bg{
  background-color: var(--mc-pink);
}

.brand-secondary{
  color: var(--mc-pink-accent);
}
.brand-secondary-bg{
  background-color: var(--mc-pink-accent);
}
.brand-tertiary{
  color: var(--mc-plum);
}
.brand-tertiary-bg{
  background-color: var(--mc-plum);
}


/*Denotive Colors*/
.denotive-success{
  color: var(--mc-teal);
}
.denotive-failure{
  color: var(--mc-maroon);
}
.denotive-info{
  color: var(--mc-blue);
}
.denotive-warning{
  color: var(--mc-yellow);
}

.denotive-success-bg{
  background: var(--mc-teal);
}
.denotive-failure-bg{
  background: var(--mc-maroon);
}
.denotive-info-bg{
  background: var(--mc-blue);
}
.denotive-warning-bg{
  background: var(--mc-yellow);
}