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

*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

/* ===========================================================
   ROOT
=========================================================== */

:root {

    --primary: #4f46e5;
    --primary-dark: #3730a3;

    --secondary: #2563eb;

    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;

    --white: #ffffff;

    --background: #f5f7fb;

    --border: #e5e7eb;

    --text: #111827;

    --text-light: #6b7280;

    --shadow:
        0 15px 40px rgba(0,0,0,.08);

    --radius: 12px;

    --transition: .25s;

    --sidebar-width: 270px;

}

/* ===========================================================
   BODY
=========================================================== */

html,
body{

    width:100%;
    height:100%;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:

        Inter,

        "Segoe UI",

        sans-serif;

}

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

a{

    color:inherit;

    text-decoration:none;

}

/* ===========================================================
   BUTTON
=========================================================== */

button{

    cursor:pointer;

    border:none;

    transition:var(--transition);

}

button:disabled{

    opacity:.6;

    cursor:not-allowed;

}

/* ===========================================================
   INPUT
=========================================================== */

input,
textarea,
select{

    font:inherit;

    outline:none;

}

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

.card{

    background:white;

    border-radius:16px;

    box-shadow:var(--shadow);

}

/* ===========================================================
   FLEX
=========================================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ===========================================================
   LOADER
=========================================================== */

.loader{

    width:42px;

    height:42px;

    border-radius:50%;

    border:4px solid #ddd;

    border-top-color:var(--primary);

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:30px;

}