/* ===========================================================
   WITS ADMIN UI DESIGN SYSTEM
   Version : 1.0
   Author  : WebDev IT Solutions
===========================================================*/

:root{

    /* ===========================
       BRAND COLORS
    ============================*/

    --primary:#22C55E;
    --primary-dark:#16A34A;
    --primary-light:#DCFCE7;

    --secondary:#94007A;
    --secondary-dark:#7A0065;
    --secondary-light:#F8E7F5;

    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#EF4444;
    --info:#0EA5E9;

    /* ===========================
       BACKGROUND COLORS
    ============================*/

    --bg:#F4F7FC;
    --bg-soft:#FAFBFD;
    --white:#FFFFFF;

    --sidebar:#0F172A;
    --sidebar-hover:#1E293B;

    /* ===========================
       TEXT COLORS
    ============================*/

    --text:#1E293B;
    --text-light:#64748B;
    --text-muted:#94A3B8;

    /* ===========================
       BORDER
    ============================*/

    --border:#E2E8F0;

    /* ===========================
       SHADOWS
    ============================*/

    --shadow-sm:0 2px 8px rgba(15,23,42,.05);

    --shadow-md:0 8px 30px rgba(15,23,42,.08);

    --shadow-lg:0 15px 45px rgba(15,23,42,.12);

    --shadow-xl:0 25px 60px rgba(15,23,42,.15);

    /* ===========================
       RADIUS
    ============================*/

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-xl:30px;
    --radius-pill:100px;

    /* ===========================
       TRANSITIONS
    ============================*/

    --transition:.35s ease;

    /* ===========================
       FONT
    ============================*/

    --font:'Poppins',sans-serif;

    --fs-12:12px;
    --fs-14:14px;
    --fs-16:16px;
    --fs-18:18px;
    --fs-20:20px;
    --fs-24:24px;
    --fs-30:30px;
    --fs-36:36px;
    --fs-42:42px;

}

/* ==========================================
   RESET
==========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--font);

    background:var(--bg);

    color:var(--text);

    font-size:var(--fs-16);

    overflow-x:hidden;

}

/* ==========================================
   LINKS
==========================================*/

a{
    text-decoration:none;
    transition:var(--transition);
}

a:hover{
    text-decoration:none;
}

/* ==========================================
   IMAGES
==========================================*/

img{
    max-width:100%;
    display:block;
}

/* ==========================================
   BUTTONS
==========================================*/

.btn{

    border-radius:var(--radius-pill);

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:linear-gradient(135deg,
    var(--primary),
    var(--secondary));

    border:none;

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-3px);

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

}

/* ==========================================
   FORM
==========================================*/

.form-control{

    height:55px;

    border-radius:14px;

    border:1px solid var(--border);

    box-shadow:none;

    font-size:15px;

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .18rem rgba(34,197,94,.15);

}

/* ==========================================
   CARD
==========================================*/

.card{

    border:none;

    border-radius:22px;

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

}

/* ==========================================
   CUSTOM SCROLLBAR
==========================================*/

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#F1F5F9;
}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    var(--primary),
    var(--secondary));

    border-radius:20px;

}

/* ==========================================
   SELECTION
==========================================*/

::selection{

    background:var(--primary);

    color:#fff;

}