/**
Define app wide colors here 
-----------------------------------------------------
COLOR DEFINITION

-- Dark shades are defined last while light are defined first
--- 1 represent the lighest shades
--- 3 represent the darkest shades
Primary color: Pink
Secondary color: blue (accent)
Primary-color1:#ffb2dd
Primary-color2:#ff80ab
Primary-color3:#c94f7c
secondary-color1:#82f7ff
secondary-color2:#40c4ff
secondary-color3:#0094cc
----------------------------------------------------------
COLOR FORMAT

suffix-f : Defines font colors
color without suffix - Define backround colors
suffix-b defines border colors
suffix - ph defines placeholders
ACCENT COLORS ARE USED ONLY IN TEXT SMALL COMPONENTS AND BORDERS
---------------------------------------------------------------
*/

/*
BACKGROUND COLORS
.................................................................
*/

.primary-1 {
    background: #ffb2dd;
}

.primary-2 {
    background: #ff80ab;
}

.primary-3 {
    background: #c94f7c;
}

.secondary-1 {
    background: #82f7ff;
}

.secondary-2 {
    background: #40c4ff;
}

.secondary-3 {
    background: #0094cc;
}

/**
Tansparent colors
**/

.transp-light-1 {
    background: rgba(255, 255, 255, 0.3);
}

.transp-light-2 {
    background: rgba(255, 255, 255, 0.6);
}

.transp-light-3 {
    background: rgba(255, 255, 255, 0.8);
}

.transp-dark-1 {
    background: rgba(0, 0, 0, 0.3);
}

.transp-dark-2 {
    background: rgba(0, 0, 0, 0.6);
}

.transp-dark-3 {
    background: rgba(0, 0, 0, 0.8);
}

.light {
    background: #fff;
}

.dark {
    background: #000;
}

/*
FONT COLORS
.................................................................
*/

.light-f {
    color: #fff;
}

.dark-f {
    color: #000;
}

.secondary-1-f {
    color: #82f7ff;
}

.secondary-2-f {
    color: #40c4ff;
}

.secondary-3-f {
    color: #0094cc;
}

/**
Tansparent font colors
**/

.transp-light-1-f {
    color: rgba(255, 255, 255, 0.3);
}

.transp-light-2-f {
    color: rgba(255, 255, 255, 0.6);
}

.transp-light-3-f {
    color: rgba(255, 255, 255, 0.8);
}

.transp-dark-1-f {
    color: rgba(0, 0, 0, 0.3);
}

.transp-dark-2-f {
    color: rgba(0, 0, 0, 0.6);
}

.transp-dark-3-f {
    color: rgba(0, 0, 0, 0.8);
}

/*
Border COLORS
.................................................................
*/

.light-b {
    border-color: #fff;
}

.dark-b {
    border-color: #000;
}

.secondary-1-b {
    border-color: #82f7ff;
}

.secondary-2-b {
    border-color: #40c4ff;
}

.secondary-3-b {
    border-color: #0094cc;
}

/**
Tansparent font colors
**/

.transp-light-1-b {
    border-color: rgba(255, 255, 255, 0.3);
}

.transp-light-2-b {
    border-color: rgba(255, 255, 255, 0.6);
}

.transp-light-3-b {
    border-color: rgba(255, 255, 255, 0.8);
}

.transp-dark-1-b {
    border-color: rgba(0, 0, 0, 0.3);
}

.transp-dark-2-b {
    border-color: rgba(0, 0, 0, 0.6);
}

.transp-dark-3-b {
    color: rgba(0, 0, 0, 0.8);
}
/**
Button colors
**/
.primary-button{ 
    color:#fff;
    background-color:#c94f7c;
    border: solid 1px #c94f7c;
}
.primary-button:hover{ 
    color:#c94f7c;
    background-color:#fff;
}
.secondary-button{ 
    color:#fff;
    background-color:#0094cc;
    border: solid 1px #0094cc;
}
.secondary-button:hover { 
    background-color:#fff;
    color:#0094cc;  
}
.outline-button{ 
    color:rgba(0, 0, 0, 0.4);
    background-color:#fff;
    border:solid 1px rgba(0, 0, 0, 0.3);
}
.outline-button:hover{ 
    background-color:rgba(0, 0, 0, 0.2);
    color:rgba(0, 0, 0, 0.4);
    border:solid 1px rgba(0, 0, 0, 0.3);
}