@import "tailwindcss";


@layer theme {
    :root{
        --color-white: #FFF;
        --color-white-transparent : rgba(255, 255, 255, 0.5);
        --color-black : #1E1E1E;
        --color-black-light : #2F2F2F;
        --color-black-transparent : rgba(0, 0, 0, 0.8);
        --color-black-transparent-light : rgba(0, 0, 0, 0.6);
        --color-grey : #8F8F8F;
        --color-grey-light : #D9D9D9;
        --color-grey-lighter : #F1F1F1;
        --color-red : #F9381B;

        --color-blue-dark : #111e27;
    }
}

@layer base {
    /* WHITE */
    .bg-white{background-color: var(--color-white);}
    .font-color-white {color: var(--color-white);}
    .border-white {border-color: var(--color-white);}
    .outline-white {outline-color: var(--color-white);}

    /* WHITE */
    .bg-white-transparent{background-color: var(--color-white-transparent);}

    /* BLACK */
    .bg-black {background-color: var(--color-black);}
    .font-color-black {color: var(--color-black);}
    .border-black {border-color: var(--color-black);}
    .outline-black {outline-color: var(--color-black);}

    /* BLACK TRANSPARENT */
    .bg-black-transparent{background-color: var(--color-black-transparent);}
    .bg-black-transparent-light{background-color: var(--color-black-transparent-light);}

    /* BLACK GRADIENT */
    .bg-black-gradient{background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.8) 60%,rgba(0, 0, 0, 1) 100%);}

    /* BLACK LIGHT */
    .bg-black-light {background-color: var(--color-black-light);}
    .font-color-black-light {color: var(--color-black-light);}
    .border-black-light {border-color: var(--color-black-light);}
    .outline-black-light {outline-color: var(--color-black-light);}

    /* GREY */
    .bg-grey{background-color: var(--color-grey);}
    .font-color-grey {color: var(--color-grey);}
    .border-grey {border-color: var(--color-grey);}
    .outline-grey {outline-color: var(--color-grey);}

    /* GREY LIGHT */
    .bg-grey-light{background-color: var(--color-grey-light);}
    .font-color-grey-light {color: var(--color-grey-light);}
    .border-grey-light {border-color: var(--color-grey-light);}
    .outline-grey-light {outline-color: var(--color-grey-light);}

    /* GREY LIGHTER */
    .bg-grey-lighter{background-color: var(--color-grey-lighter);}
    .font-color-grey-lighter {color: var(--color-grey-lighter);}
    .border-grey-lighter {border-color: var(--color-grey-lighter);}
    .outline-grey-lighter {outline-color: var(--color-grey-lighter);}

    /* BLUE DARK */
    .bg-blue-dark {background-color: var(--color-blue-dark);}
    .font-color-blue-dark {color: var(--color-blue-dark);}
    .border-blue-dark {border-color: var(--color-blue-dark);}
    .outline-blue-dark {outline-color: var(--color-blue-dark);}

    /* RED */
    .bg-red {background-color: var(--color-red);}
    .font-color-red {color: var(--color-red);}
    .border-red {border-color: var(--color-red);}
    .outline-red {outline-color: var(--color-red);}

    /* THEMES  */
    
    /* PRIMARY */
    .bg-primary{background-color: var(--color-primary)}
    .font-color-primary {color: var(--color-primary)}
    .border-primary {border-color: var(--color-primary)}
    .outline-primary {outline-color: var(--color-primary);}

    /* PRIMARY DARK */
    .bg-primary-dark{background-color: var(--color-primary-dark);}
    .font-color-primary-dark {color: var(--color-primary-dark);}
    .border-primary-dark {border-color: var(--color-primary-dark);}
    .outline-primary-dark {outline-color: var(--color-primary-dark);}

    /* ACCENT */
    .bg-accent{background-color: var(--color-accent);}
    .font-color-accent{color: var(--color-accent);}
    .border-accent{border-color: var(--color-accent);}
    .outline-accent {outline-color: var(--color-accent);}
}