/* Color Pallete */
:root {
    --color-bg-pallete-100: #d1cece;
    --color-bg-pallete-200: #f3f3f3;
    --color-bg-pallete-300: #ffffff;
    
    --color-bg-primary-100: #3aaac3;
    --color-bg-primary-50: #3aaac350;
    --color-bg-secondary-100: #f91355;
    --color-bg-secondary-50: #f9135550;
    --color-bg-tertiary-100: #27e0c4;
    --color-bg-tertiary-50: #27e0c450;

    --color-primary-text: #111010;
    --color-secondary-text: #3f3c3c;
    
    --color-primary: #3aaac3;
    --color-secondary: #f91355;
    --color-tertiary: #27e0c4;
}

/* Light theme (default) */
body.theme-light {
    --color-bg-pallete-100: #d1cece;
    --color-bg-pallete-200: #f3f3f3;
    --color-bg-pallete-300: #ffffff;
    
    --color-bg-primary-100: #3aaac3;
    --color-bg-primary-50: #3aaac350;
    --color-bg-secondary-100: #f91355;
    --color-bg-secondary-50: #f9135550;
    --color-bg-tertiary-100: #27e0c4;
    --color-bg-tertiary-50: #27e0c450;

    --color-primary-text: #111010;
    --color-secondary-text: #3f3c3c;
    
    --color-primary: #3aaac3;
    --color-secondary: #f91355;
    --color-tertiary: #27e0c4;
}

/* Dark theme */
body.theme-dark {
    --color-bg-pallete-100: #111010;
    --color-bg-pallete-200: #3f3c3c;
    --color-bg-pallete-300: #444444;
    
    --color-bg-primary-100: #3aaac3;
    --color-bg-primary-50: #3aaac350;
    --color-bg-secondary-100: #f91355;
    --color-bg-secondary-50: #f9135550;
    --color-bg-tertiary-100: #27e0c4;
    --color-bg-tertiary-50: #27e0c450;

    --color-primary-text: #fffcfc;
    --color-secondary-text: #dbdbdb;
    
    --color-primary: #3aaac3;
    --color-secondary: #f91355;
    --color-tertiary: #27e0c4;
}