/*
        can be used throughout the project like this: color: var(--primary-color);
        keep in mind, that old browsers don't support this, so we need to define some fallback values too, before using this
          background-color: #007bff;               //fallback value
          background-color: var(--primary-color); //use CSS variable if supported
*/

:root { /* Coredat / Default */
    /*** COLORS ***/
    --primary-accent-color: #244FAA;
    --primary-color: #152E65;
    --text-color: #000;
    --text-color-inverted: #fff;
    --text-placeholder-color: #808080;
    --bg-dark: #0e1e32;
    --bg-light: #f2f2f2;
    --secondary-accent-pink: #ff9195;
    --secondary-accent-yellow: #fced21;
    --secondary-accent-olive: #adbdaa;
    --secondary-accent-purple: #5a447a;
    /*** CONSTANTS ***/
    --transition-speed: 0.3s;
    --brightness: 2;
}


.dark {
    --text-primary: #b6b6b6;
    --text-secondary: #ececec;
    --bg-primary: #23232e;
    --bg-secondary: #141418;
}

.light {
    --text-primary: #1f1f1f;
    --text-secondary: #000000;
    --bg-primary: #ffffff;
    --bg-secondary: #e4e4e4;
}

.solar {
    --text-primary: #576e75;
    --text-secondary: #35535c;
    --bg-primary: #fdf6e3;
    --bg-secondary: #f5e5b8;
}