:root {
  --white: #fff;
  --navy: #000;     /* Name can be replaced with --black */
  --navy-t: #000000e5;  /* Name can be replaced with --black-t */
  --turquoise: #259DAD; /* Name can be replaced with --breathe */
  --lime: #A076A6;       /* Name can be replaced with --lavender */
  --lime-light: #EEECF0; /* Name can be replaced with --lavender-light */
  --green-dark: #186772; /* Name can be replaced with --purple-dark */
  --text: #000;
  --grey-light: #F7F7F7;
  --grey-dark: #676779;
  --grey-mid: #676779;
  --grey-mid-t: #67677933;
  --clay-light:#F6EEE8;
  --lavender-light: #EEECF0;
  --breathe-light: #F2F9F8;
  --navy-filter: brightness(0%) saturate(100%) invert(3%) sepia(88%) saturate(7416%) hue-rotate(248deg) brightness(83%) contrast(85%);
  --lime-filter: brightness(0%) saturate(100%) invert(69%) sepia(47%) saturate(567%) hue-rotate(42deg) brightness(95%) contrast(87%);
}

.bg-grey-light {
    background-color: var(--grey-light);
    color: var(--text);   
}

.bg-navy {
    background-color: var(--navy);
    color: var(--white);
}

.bg-navy * {
    color: var(--white);
}

.bg-navy .button {
    color: var(--navy);
}

.bg-white {
    background-color: var(--white);
}

.bg-clay-light {
    background-color: var(--clay-light);
    color: var(--text);   
}
.bg-lavender-light {
    background-color: var(--lavender-light);
    color: var(--text);   
}
.bg-breathe-light {
    background-color: var(--breathe-light);
    color: var(--text);   
}

#mobile-nav .filter-white {
    filter: brightness(100);
}

.bg-navy * {
    color: var(--white);
}

.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy h6 {
    color: var(--lime);
}

.bg-navy-t {
    background-color: var(--navy-t);
}

.c-navy {
    color: var(--navy);
}

.c-lime {
    color: var(--lime);
}

.filter-lime {
    filter: var(--lime-filter);
}

.filter-white {
    filter: brightness(100);
}

.filter-navy {
    filter: var(--navy-filter);
}