:root {

    /* Brand Colors */
    --brand-main-color: #12a16b;
    --brand-second-color: #12a16b;

    /* Colors */
    --black: #000000;
    --white: #ffffff;



    /* Borders */
    --border-radius: 2px;
    --border-radius-md: 2px;
    --border-radius-sm: 2px;

    /* Buttons */
    --btn-bg: var(--brand-main-color);
    --btn-color: #ffffff;

    --btn-second-bg: var(--brand-second-color);
    --btn-second-color: #fff;


    /* Navbar */
    --navbar-bg: #000000;
    --navbar-color: #ffffff;
    --navbar-shadow: 0 0 10px rgba(0, 0, 0, .1);



    /* Card ( box ) Style Colors */
    --card-bg: #fff;
    --card-padding: 1rem;
    --card-color: #212121;
    --card-shadow: 0px 0 40px rgba(10, 15, 70, .07);
    --card-border: none;
    --card-border-radius: 2px;



    /* Start Inputs */
    --input-text-color: #6f6b80;
    --input-main-bg: #fefefe;
    --input-border-color: #d6dbe5;
    --input-border-radius: var(--border-radius-sm);
    --input-height: 54px;
    /* On Foucs */
    --input-text-color-on-foucs: #212121;
    --input-main-bg-on-foucs: #ffffff;
    --input-border-on-foucs: var(--brand-main-color);



    /*
    --btn-soft-bg: #00baf221;
    --btn-soft-color: #00b9f2;
    --btn-second-bg: var(--second-color);
    --btn-second-color: #fff;
    --btn-second-soft-bg: #be198d38;
    --btn-second-soft-color: #be198d;
    */



}