/*----------------------------------------------
    # All Variables here
----------------------------------------------*/
:root {
    
    --white: #FFF; 
    --black: #000;
    --title: #1F1F1F; 
    --title2: #C5ED82; 
    --title3: #C6DEFD; 

    --title4: #010F34; 

    --dark: #0D0D0D;
    --yellow: #F2D701; 
    --yellow2: #FFB400; 
    --red: #CB2027; 
    --blue: #1877F2; 
    --border: #D8DDE1;
    
    --gray: #696969;
    --gray2: #727272;

    --smoke: #FAF8F7;
    --smoke2: #ECF1F5;
    --smoke3: #F4F4F4;

    --bg: #EBF3ED;
    --bg2: #EAF6E6;
    --bg3: #E6F6F5;
    --bg4: #F1E6F6;
    --bg5: #D8E3DB;
    --bg6: #464E3D;

    --theme: #4D7B6B;
    --theme2: #3CA200;
    --theme3: #5D844E;
    --theme4: #996391;

    --box-shadow: 0px -10px 0px 0px #B3D5D3 inset;
    --icon-font: "Font Awesome 6 Pro";
}

// Theme Color - Defualt Colors
$white: var(--white);
$black: var(--black);
$title-color: var(--title); 
$title-color2: var(--title2); 
$title-color3: var(--title3); 
$title-color4: var(--title4); 
$dark: var(--dark);
$yellow: var(--yellow);
$yellow2: var(--yellow2);
$red: var(--red);
$blue: var(--blue);
$border-color: var(--border);
$gray: var(--gray);
$gray2: var(--gray2);

$smoke: var(--smoke);
$smoke2: var(--smoke2);
$smoke3: var(--smoke3);

$bg-color: var(--bg);
$bg-color2: var(--bg2);
$bg-color3: var(--bg3);
$bg-color4: var(--bg4);
$bg-color5: var(--bg5);
$bg-color6: var(--bg6);

$theme-color: var(--theme);
$theme-color2: var(--theme2);
$theme-color3: var(--theme3);
$theme-color4: var(--theme4);

$shadow: var(--box-shadow);

// Font Variation
$icon-font : var(--icon-font);