/* =========================================================
   Rovello Desk
   Business Management System
   Version : 1.0
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

:root{

    /* ===============================
       Brand Colors
    =============================== */

    --primary: #FF6B1A;
    --primary-hover: #E65A0D;
    --primary-light: #FFF3EC;

    --secondary: #0D2B52;
    --secondary-light: #1D3E69;

    --accent: #FF9F43;

    /* ===============================
       Background
    =============================== */

    --bg: #F6F8FC;
    --surface: #FFFFFF;
    --surface-2: #F9FAFC;

    /* ===============================
       Text
    =============================== */

    --text: #162B4D;
    --text-light: #6B7280;

    /* ===============================
       Borders
    =============================== */

    --border: #E8EDF5;

    /* ===============================
       Status
    =============================== */

    --success: #16A34A;
    --danger: #DC2626;
    --warning: #F59E0B;
    --info: #2563EB;

    /* ===============================
       Shadow
    =============================== */

    --shadow-sm: 0 5px 15px rgba(13,43,82,.06);

    --shadow-md: 0 15px 35px rgba(13,43,82,.08);

    --shadow-lg: 0 25px 60px rgba(13,43,82,.12);

    /* ===============================
       Radius
    =============================== */

    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Plus Jakarta Sans',sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

.card{

    border:none;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.btn-primary{

    background:var(--primary);

    border:none;

    border-radius:12px;

    height:52px;

    font-weight:600;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.form-control{

    height:54px;

    border-radius:12px;

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

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:none;

}