/* Color Pallete */
:root {
    --color-bg-pallete-100: #F7F7F7;
    --color-bg-pallete-200: red; /*#EDEDED;*/
    --color-bg-pallete-300: green; /*#DDDDDD;*/
    
    --color-bg-primary-100: #FF2018;
    --color-bg-primary-50: #FF201850;
    --color-bg-secondary-100: #000000;
    --color-bg-secondary-50: #00000050;
    --color-bg-tertiary-100: #27e0c4;
    --color-bg-tertiary-50: #27e0c450;

    --color-primary-text: #161616;
    --color-secondary-text: orange; /*#3f3c3c;*/
    
    --color-primary: #FF2018;
    --color-secondary: #161616; /*#f91355;*/
    --color-tertiary: brown; /*#27e0c4;*/
}

/* Light theme (default) */
body.theme-light {
    --color-bg-pallete-100: #F7F7F7;
    --color-bg-pallete-200: red; /*#EDEDED;*/
    --color-bg-pallete-300: green; /*#DDDDDD;*/
    
    --color-bg-primary-100: #FF2018;
    --color-bg-primary-50: #FF201850;
    --color-bg-secondary-100: #000000;
    --color-bg-secondary-50: #00000050;
    --color-bg-tertiary-100: #27e0c4;
    --color-bg-tertiary-50: #27e0c450;

    --color-primary-text: #161616;
    --color-secondary-text: orange; /*#3f3c3c;*/
    
    --color-primary: #FF2018;
    --color-secondary: #161616; /*#f91355;*/
    --color-tertiary: brown; /*#27e0c4;*/
}

/* Dark theme */
body.theme-dark {
    --color-bg-pallete-100: #F7F7F7;
    --color-bg-pallete-200: red; /*#EDEDED;*/
    --color-bg-pallete-300: green; /*#DDDDDD;*/
    
    --color-bg-primary-100: #FF2018;
    --color-bg-primary-50: #FF201850;
    --color-bg-secondary-100: #000000;
    --color-bg-secondary-50: #00000050;
    --color-bg-tertiary-100: #27e0c4;
    --color-bg-tertiary-50: #27e0c450;

    --color-primary-text: #161616;
    --color-secondary-text: orange; /*#3f3c3c;*/
    
    --color-primary: #FF2018;
    --color-secondary: #161616; /*#f91355;*/
    --color-tertiary: brown; /*#27e0c4;*/
}