/* Color Pallete */
:root {
    --color-bg-pallete-100: #FAFAFA;
    --color-bg-pallete-200: #EDEDED;
    --color-bg-pallete-300: #DDDDDD;
    
    --color-bg-primary-100: #3B9D6C;
    --color-bg-primary-50: #3B9D6C50;
    --color-bg-secondary-100: #f91355;
    --color-bg-secondary-50: #f9135550;
    --color-bg-tertiary-100: #27e0c4;
    --color-bg-tertiary-50: #27e0c450;

    --color-primary-text: #0D3743;
    --color-secondary-text: #3f3c3c;
    
    --color-primary: #3B9D6C;
    --color-secondary: #f91355;
    --color-tertiary: #27e0c4;
}

/* Light theme (default) */
body.theme-light {
    --color-bg-pallete-100: #FAFAFA;
    --color-bg-pallete-200: #EDEDED;
    --color-bg-pallete-300: #DDDDDD;
    
    --color-bg-primary-100: #3B9D6C;
    --color-bg-primary-50: #3B9D6C50;
    --color-bg-secondary-100: #f91355;
    --color-bg-secondary-50: #f9135550;
    --color-bg-tertiary-100: #27e0c4;
    --color-bg-tertiary-50: #27e0c450;

    --color-primary-text: #0D3743;
    --color-secondary-text: #3f3c3c;
    
    --color-primary: #3B9D6C;
    --color-secondary: #f91355;
    --color-tertiary: #27e0c4;
}

/* Dark theme */
body.theme-dark {
    --color-bg-pallete-100: #FAFAFA;
    --color-bg-pallete-200: #EDEDED;
    --color-bg-pallete-300: #DDDDDD;
    
    --color-bg-primary-100: #3B9D6C;
    --color-bg-primary-50: #3B9D6C50;
    --color-bg-secondary-100: #f91355;
    --color-bg-secondary-50: #f9135550;
    --color-bg-tertiary-100: #27e0c4;
    --color-bg-tertiary-50: #27e0c450;

    --color-primary-text: #0D3743;
    --color-secondary-text: #dbdbdb;
    
    --color-primary: #3B9D6C;
    --color-secondary: #f91355;
    --color-tertiary: #27e0c4;
}