/* ================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ================================================ */

   :root {
    /* Home Theme */
    --cyan-primary: #009FE3;
    --cyan-light: #BFE7F8;
    
    /* SM Theme */
    --orange-primary: #EE7F00;
    --orange-light: #FBDFBF;
    --orange-accent: #F6BF7F;
    --blue-dark: #212d32;
    
    /* ZE Theme */
    --wine-primary: #7D2C48;
    --wine-dark: #471929;
    --wine-light: #DECAD1;
    
    /* Akademie Theme */
    --yellow-primary: #FFCD00;
    --yellow-light: #FFF2BF;

    /* Karriere Theme */
    --green-primary: #94C11F;
    --green-light: #E4EFC7;
    --green-accent: #C9E08F;
    
    /* Neutrals */
    --black: #000;
    --white: #fff;
}

/* ================================================
   THEME BUTTONS
   ================================================ */

.btn-cyan { 
    background-color: var(--cyan-primary); 
    color: black; 
}

.btn-cyan-light { 
    background-color: var(--cyan-light); 
    color: black; 
}

.btn-orange { 
    background-color: var(--orange-primary); 
    color: black; 
}

.btn-orange-light { 
    background-color: var(--orange-light); 
    color: black; 
}

.btn-wine { 
    background-color: var(--wine-dark); 
    color: white; 
}

.btn-wine-light { 
    background-color: var(--wine-light); 
    color: var(--wine-dark); 
}

.btn-yellow { 
    background-color: var(--yellow-primary); 
    color: black; 
}

.btn-yellow-light { 
    background-color: var(--yellow-light); 
    color: black; 
}

.btn-green { 
    background-color: var(--green-primary); 
    color: black; 
}

.btn-green-light { 
    background-color: var(--green-light); 
    color: black; 
}

/* ================================================
   THEME BACKGROUNDS
   ================================================ */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ================================================
   THEME TEXT COLORS
   ================================================ */

.text-cyan { 
    color: var(--cyan-primary); 
}

.text-cyan a { 
    color: var(--cyan-primary); 
}

.text-orange { 
    color: var(--orange-primary); 
}

.text-orange a { 
    color: var(--orange-primary); 
}

.text-wine { 
    color: var(--wine-primary); 
}

.text-wine a { 
    color: var(--wine-primary); 
}

.text-wine-dark { 
    color: var(--wine-dark); 
}

.text-wine-dark a { 
    color: var(--wine-dark); 
}

.text-wine-light { 
    color: var(--wine-light); 
}

.text-wine-light a { 
    color: var(--wine-light); 
}

.text-yellow { 
    color: var(--yellow-primary); 
}

.text-yellow a { 
    color: var(--yellow-primary); 
}

.text-green { 
    color: var(--green-primary); 
}

.text-green a { 
    color: var(--green-primary); 
}

.text-blue-dark {
    color: var(--blue-dark);
}

.text-blue-dark a {
    color: var(--blue-dark);
}

.text-white { 
    color: white; 
}

.text-black { 
    color: black; 
}