/*
-------------------
App specific colors
-------------------
*/

.light-theme,:root {
    /* Neutral */
    --color-neutral--0: #FFF;
    --color-neutral--10: #FAFAFA;
    --color-neutral--20: #F6F6F6;
    --color-neutral--40: #DDD;
    --color-neutral--50: #9E9E9E;
    --color-neutral--60: #888;
    --color-neutral--80: #333;
    --color-neutral--100: #222;
    --color-neutral-opacity--0: rgba(0,0,0,0);
    --color-neutral-opacity--5: rgba(0,0,0,.05);
    --color-neutral-opacity--10: rgba(0,0,0,.1);
    --color-neutral-opacity--20: rgba(0,0,0,.2);
    --color-neutral-opacity--30: rgba(0,0,0,.3);
    --color-neutral-opacity--40: rgba(0,0,0,.4);
    --color-neutral-opacity--50: rgba(0,0,0,.5);
    --color-neutral-opacity--60: rgba(0,0,0,.6);
    --color-neutral-opacity--70: rgba(0,0,0,.7);
    --color-neutral-opacity--80: rgba(0,0,0,.8);
    --color-neutral-opacity--90: rgba(0,0,0,.9);
    --color-neutral-opacity--100: rgba(0,0,0,1);
    --color-neutral-opacity-in--0: rgba(255,255,255,0);
    --color-neutral-opacity-in--10: rgba(255,255,255,.1);
    --color-neutral-opacity-in--20: rgba(255,255,255,.2);
    --color-neutral-opacity-in--30: rgba(255,255,255,.3);
    --color-neutral-opacity-in--40: rgba(255,255,255,.4);
    --color-neutral-opacity-in--50: rgba(255,255,255,.5);
    --color-neutral-opacity-in--60: rgba(255,255,255,.6);
    --color-neutral-opacity-in--70: rgba(255,255,255,.7);
    --color-neutral-opacity-in--80: rgba(255,255,255,.8);
    --color-neutral-opacity-in--90: rgba(255,255,255,.9);
    --color-neutral-opacity-in--100: rgba(255,255,255,1);
    
    /* Red */
    --color-danger--20: #FFB8B8;
    --color-danger--40: #E87575;
    --color-danger--60: #BD4242;
    --color-danger--80: #A42626;
    --color-danger--100: #730000;
    --color-danger-opacity--0: rgba(115,0,0,0);
    --color-danger-opacity--5: rgba(115,0,0,.05);
    --color-danger-opacity--10: rgba(115,0,0,.1);
    --color-danger-opacity--20: rgba(115,0,0,.2);
    --color-danger-opacity--30: rgba(115,0,0,.3);
    --color-danger-opacity--40: rgba(115,0,0,.4);
    --color-danger-opacity--50: rgba(115,0,0,.5);
    --color-danger-opacity--60: rgba(115,0,0,.6);
    --color-danger-opacity--70: rgba(115,0,0,.7);
    --color-danger-opacity--80: rgba(115,0,0,.8);
    --color-danger-opacity--90: rgba(115,0,0,.9);
    --color-danger-opacity--100: rgba(115,0,0,1);
    
    /* Green */
    --color-success--20: #D9FFB8;
    --color-success--40: #99E875;
    --color-success--60: #42BD4B;
    --color-success--80: #28A426;
    --color-success--100: #00730F;
    --color-success-opacity--0: rgba(0,115,15,0);
    --color-success-opacity--5: rgba(0,115,15,.05);
    --color-success-opacity--10: rgba(0,115,15,.1);
    --color-success-opacity--20: rgba(0,115,15,.2);
    --color-success-opacity--30: rgba(0,115,15,.3);
    --color-success-opacity--40: rgba(0,115,15,.4);
    --color-success-opacity--50: rgba(0,115,15,.5);
    --color-success-opacity--60: rgba(0,115,15,.6);
    --color-success-opacity--70: rgba(0,115,15,.7);
    --color-success-opacity--80: rgba(0,115,15,.8);
    --color-success-opacity--90: rgba(0,115,15,.9);
    --color-success-opacity--100: rgba(0,115,15,1);
    
    /* Blue */
    --color-info--20: #B8FBFF;
    --color-info--40: #75CDE8;
    --color-info--60: #428CBD;
    --color-info--80: #265CA4;
    --color-info--100: #004373;
    --color-info-opacity--0: rgba(0,67,115,0);
    --color-info-opacity--5: rgba(0,67,115,.05);
    --color-info-opacity--10: rgba(0,67,115,.1);
    --color-info-opacity--20: rgba(0,67,115,.2);
    --color-info-opacity--30: rgba(0,67,115,.3);
    --color-info-opacity--40: rgba(0,67,115,.4);
    --color-info-opacity--50: rgba(0,67,115,.5);
    --color-info-opacity--60: rgba(0,67,115,.6);
    --color-info-opacity--70: rgba(0,67,115,.7);
    --color-info-opacity--80: rgba(0,67,115,.8);
    --color-info-opacity--90: rgba(0,67,115,.9);
    --color-info-opacity--100: rgba(0,67,115,1);
    
    /* Yellow */
    --color-warning--20: #FFF1B8;
    --color-warning--30: #ECE09E;
    --color-warning--40: #E8D775;
    --color-warning--60: #BDAF42;
    --color-warning--80: #A48926;
    --color-warning--100: #735A00;
    --color-warning-opacity--0: rgba(115,90,0,0);
    --color-warning-opacity--5: rgba(115,90,0,.05);
    --color-warning-opacity--10: rgba(115,90,0,.1);
    --color-warning-opacity--20: rgba(115,90,0,.2);
    --color-warning-opacity--30: rgba(115,90,0,.3);
    --color-warning-opacity--40: rgba(115,90,0,.4);
    --color-warning-opacity--50: rgba(115,90,0,.5);
    --color-warning-opacity--60: rgba(115,90,0,.6);
    --color-warning-opacity--70: rgba(115,90,0,.7);
    --color-warning-opacity--80: rgba(115,90,0,.8);
    --color-warning-opacity--90: rgba(115,90,0,.9);
    --color-warning-opacity--100: rgba(115,90,0,1);
    
    /* Shadows */
    --color-shadow--product: rgba(112,67,67,.15);
    --shadow-soft: 0 7px 20px var(--color-neutral-opacity--30);
    --shadow-ultra-soft: 0 20px 30px var(--color-neutral-opacity--20);
    --shadow-menu: 0 4px 12px var(--color-neutral-opacity--20);
    --shadow-variant: 0 7px 20px var(--color-neutral-opacity--5);
    --shadow-none: 0 7px 20px var(--color-neutral-opacity--0);
    --shadow-none-xs: 0 2px 8px var(--color-neutral-opacity--0);
    --shadow-info-soft: 0 7px 20px var(--color-info-opacity--20);
    --shadow-info-soft-xs: 0 2px 8px var(--color-info-opacity--20);
    --shadow-danger-soft: 0 7px 20px var(--color-danger-opacity--20);
    --shadow-danger-soft-xs: 0 2px 8px var(--color-danger-opacity--20);
    --shadow-inset: 0 0px 6px var(--color-neutral-opacity--10) inset;
    
    /* Gradients */
    --color-gradient--top-white-none: linear-gradient(to top,var(--color-neutral--0),transparent);
    --color-gradient--left-white-none: linear-gradient(to left, var(--color-neutral--0),transparent);
    --color-gradient--right-white-none: linear-gradient(to right, var(--color-neutral--0),transparent);
    --color-gradient--top-black-none: linear-gradient(to top,var(--color-neutral--100),transparent);
    --color-gradient--top-none-black: linear-gradient(to top, transparent,var(--color-neutral--100));
    --color-gradient--top--blue-none: linear-gradient(to top, var(--color-info--100),transparent);
    --color-gradient--top--blue-50: linear-gradient(to top, var(--color-info--100),var(--color-neutral-opacity--50));
    --color-gradient--top--blue-black: linear-gradient(to top, var(--color-info--100), var(--color-neutral--100));
    --color-gradient--corner-right-bottom--blue--5: linear-gradient(125deg, transparent, var(--color-info-opacity--5));
    --color-gradient--corner-right-bottom--blue--10: linear-gradient(125deg, transparent, var(--color-info-opacity--10));
    --color-gradient--left--blue-none: linear-gradient(to right, var(--color-info--100),transparent);
    
    .text.neutral-80 {
        color: var(--color-neutral--80);
    }
    
    .text.neutral-100 {
        color: var(--color-neutral--100);
    }
    
    .text.info {
        color: var(--color-info--80);
    }
    
    .text.warning {
        color: var(--color-warning--80);
    }
    
    .text.danger {
        color: var(--color-danger--80);
    }
    
    .text.success {
        color: var(--color-success--80);
    }
}

.dark-theme {
    /* Neutral */
    --color-neutral--0: #1A1A1A;
    --color-neutral--20: #212121;
    --color-neutral--40: #353535;
    --color-neutral--60: #797979;
    --color-neutral--80: #BDBDBD;
    --color-neutral--100: #CACACA;
    
    /* Red */
    --color-danger--20: #610B0B;
    --color-danger--40: #8D2727;
    --color-danger--60: #B14E4E;
    --color-danger--80: #CA6060;
    --color-danger--100: #F17E7E;
    
    /* Green */
    --color-success--20: #33610B;
    --color-success--40: #478D27;
    --color-success--60: #4EB156;
    --color-success--80: #61CA60;
    --color-success--100: #7EF18D;
    
    /* Blue */
    --color-info--20: #0B5C61;
    --color-info--40: #27758D;
    --color-info--60: #4E89B1;
    --color-info--80: #608DCA;
    --color-info--100: #7EC1F1;
    
    /* Yellow */
    --color-warning--20: #61500B;
    --color-warning--40: #8D7E27;
    --color-warning--60: #B1A54E;
    --color-warning--80: #CAB360;
    --color-warning--100: #F1D87E;
    
    /* Shadows */
    --color-shadow--product: rgba(112,67,67,.15);
}