/*
|--------------------------------------------------------------------------
| PROJECT REDLINE - CSS VARIABLES
|--------------------------------------------------------------------------
*/

:root {

    /*
    |--------------------------------------------------------------------------
    | COLORS
    |--------------------------------------------------------------------------
    */

    --primary-color:
        #FF3434;

    --primary-hover:
        #FF2020;

    --secondary-color:
        #111111;

    --background-color:
        #050505;

    --background-secondary:
        #090909;

    /*
    |--------------------------------------------------------------------------
    | TEXT
    |--------------------------------------------------------------------------
    */

    --text-color:
        #FFFFFF;

    --text-muted:
        rgba(255,255,255,0.45);

    --text-soft:
        rgba(255,255,255,0.62);

    /*
    |--------------------------------------------------------------------------
    | CARDS
    |--------------------------------------------------------------------------
    */

    --card-background:
        rgba(255,255,255,0.04);

    --card-background-hover:
        rgba(255,255,255,0.06);

    --card-border:
        rgba(255,255,255,0.06);

    /*
    |--------------------------------------------------------------------------
    | SUCCESS
    |--------------------------------------------------------------------------
    */

    --success-color:
        #2CFF94;

    /*
    |--------------------------------------------------------------------------
    | DANGER
    |--------------------------------------------------------------------------
    */

    --danger-color:
        #FF4747;

    /*
    |--------------------------------------------------------------------------
    | SHADOWS
    |--------------------------------------------------------------------------
    */

    --shadow-primary:
        0 0 30px rgba(255,52,52,0.16);

    /*
    |--------------------------------------------------------------------------
    | RADIUS
    |--------------------------------------------------------------------------
    */

    --radius-small:
        14px;

    --radius-medium:
        20px;

    --radius-large:
        30px;

    /*
    |--------------------------------------------------------------------------
    | TRANSITIONS
    |--------------------------------------------------------------------------
    */

    --transition-fast:
        0.18s ease;

    --transition-normal:
        0.24s ease;

    --success-background:
    rgba(44,255,148,0.12);

    --warning-background:
        rgba(255,210,74,0.12);

    --danger-background:
        rgba(255,52,52,0.12);

    --modal-background:
        #111111;    
}

/*
|--------------------------------------------------------------------------
| DARK THEME
|--------------------------------------------------------------------------
*/

body.theme-dark {

    --primary-color:
        #FF3434;

    --primary-hover:
        #FF2020;

    --secondary-color:
        #111111;

    --background-color:
        #050505;

    --background-secondary:
        #090909;

    --text-color:
        #FFFFFF;

    --text-muted:
        rgba(255,255,255,0.45);

    --text-soft:
        rgba(255,255,255,0.62);

    --card-background:
        rgba(255,255,255,0.04);

    --card-background-hover:
        rgba(255,255,255,0.06);

    --card-border:
        rgba(255,255,255,0.06);

    --success-background:
    rgba(44,255,148,0.12);

    --warning-background:
        rgba(255,210,74,0.12);

    --danger-background:
        rgba(255,52,52,0.12);

    --modal-background:
        #111111;    
}

/*
|--------------------------------------------------------------------------
| LIGHT THEME
|--------------------------------------------------------------------------
*/

body.theme-light {

    --primary-color:
        #FF3434;

    --primary-hover:
        #E52A2A;

    --secondary-color:
        #F5F5F5;

    --background-color:
        #F3F4F6;

    --background-secondary:
        #FFFFFF;

    --text-color:
        #111111;

    --text-muted:
        rgba(0,0,0,0.55);

    --text-soft:
        rgba(0,0,0,0.72);

    --card-background:
        rgba(255,255,255,0.92);

    --card-background-hover:
        rgba(255,255,255,1);

    --card-border:
        rgba(0,0,0,0.08);

    --modal-background:
    #FFFFFF;

    --success-background:
        rgba(44,255,148,0.18);

    --warning-background:
        rgba(255,210,74,0.18);

    --danger-background:
        rgba(255,52,52,0.18);    
}