:root {

    --text-black: 0, 100%, 0%;
    --text-white: 0, 100%, 100%;

    --dark-grey: 0,0%,8%;
    
    --color-purple: #6c3b78;
    --color-navy-blue: #0A4A6C;
    --color-light-blue: #75BBE1;
    --color-cream: #FCF6DB;
    --color-yellow: #FFCF10;
    --color-black: #3D3D3D;
    --color-brown: #754D21;
    --color-green: #29871D;
}



.accent-purple {
    --color: var(--color-purple);
    --hero-text-color: var(--text-white);
    --menu-text: var(--text-white);
    --menu-hover: rgba(0,0,0,.25);
    --button-text-color: var(--text-white);
    --body-text-color: var(--text-white);
}



.accent-navy-blue {
    
    --color: var(--color-navy-blue);
    --hero-text-color: var(--text-white);
    --menu-text: var(--text-white);
    --menu-hover: rgba(0,0,0,.25);
    --button-text-color: var(--text-white);
    --body-text-color: var(--text-white);

}



.accent-light-blue {
    --color: var(--color-light-blue);
    --hero-text-color: var(--text-black);
    --menu-text: var(--text-black);
    --menu-hover: rgba(0,0,0,.25);
    --button-text-color: var(--text-black);
    --body-text-color: var(--text-black);

}



.accent-cream {
    --color: var(--color-cream);
    --hero-text-color: var(--text-black);
    --menu-text: var(--text-black);
    --menu-hover: rgba(0,0,0,.25);
    --button-text-color: var(--text-black);
    --body-text-color: var(--text-black);

}



.accent-yellow {
    --color: var(--color-yellow);
    --hero-text-color: var(--text-black);
    --menu-text: var(--text-black);
    --menu-hover: rgba(0,0,0,.25);
    --button-text-color: var(--text-black);
    --body-text-color: var(--text-black);

}



.accent-black {
    --color: var(--color-black);
    --hero-text-color: var(--text-white);
    --menu-text: var(--text-white);
    --menu-hover: rgba(0,0,0,.25);
    --button-text-color: var(--text-white);
    --body-text-color: var(--text-white);

}



.accent-brown {
    --color: var(--color-brown);
    --hero-text-color: var(--text-white);
    --menu-text: var(--text-white);
    --menu-hover: rgba(0,0,0,.25);
    --button-text-color: var(--text-white);
    --body-text-color: var(--text-white);

}



.accent-green {
    --color: var(--color-green);
    --hero-text-color: var(--text-white);
    --menu-text: var(--text-white);
    --menu-hover: rgba(0,0,0,.25);
    --button-text-color: var(--text-white);
    --body-text-color: var(--text-white);

}