/* ==========================
   STEP UP DESIGN SYSTEM
========================== */

/* ---------- Light Theme ---------- */

:root{

    /* Brand */
    --primary:#0D6EFD;
    --primary-dark:#0A58CA;
    --primary-light:#4DA3FF;

    /* Accent */
    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;
    --info:#06B6D4;

    /* Background */
    --background:
        linear-gradient(
        180deg,
        #eef4ff,
        #f7fbff
        );
    --surface:#FFFFFF;
    --surface-2:#F8FAFC;

    /* Sidebar */
    --sidebar:#0F172A;
    --sidebar-hover:#1E293B;
    --sidebar-active:#2563EB;

    /* Navbar */
    --navbar:#FFFFFF;

    /* Text */
    --text:#1F2937;
    --text-light:#64748B;
    --text-white:#FFFFFF;

    /* Border */
    --border:#E5E7EB;

    /* Shadows */

    --shadow-sm:
        0 2px 6px rgba(0,0,0,.05);

    --shadow-md:
        0 8px 20px rgba(0,0,0,.08);

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

    /* Radius */

    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:20px;

    /* Transition */

    --transition-fast:.20s;

    --transition:
        .35s ease;

    /* Layout */

    --navbar-height:70px;

    --sidebar-width:270px;

    --sidebar-collapsed:78px;

    --content-padding:30px;

    /* Buttons */

    --button-height:44px;

}


/* ==========================
   DARK MODE
========================== */

body.dark{

    --background:
        linear-gradient(
        180deg,
        #09111d,
        #111827
        );

    --surface:#172033;

    --surface-2:#202B42;

    --navbar:#111827;

    --sidebar:#020617;

    --sidebar-hover:#172033;

    --sidebar-active:#2563EB;

    --text:#F8FAFC;

    --text-light:#CBD5E1;

    --border:#334155;

    --shadow-sm:
        0 3px 10px rgba(0,0,0,.30);

    --shadow-md:
        0 10px 30px rgba(0,0,0,.40);

    --shadow-lg:
        0 25px 60px rgba(0,0,0,.55);

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    background:var(--background);

    color:var(--text);

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    transition:
        background .35s,
        color .35s;

    overflow-x:hidden;

}


/* Scrollbar */

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-track{

    background:var(--background);

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}


/* Selection */

::selection{

    background:var(--primary);

    color:white;

}


/* Links */

a{

    text-decoration:none;

    color:inherit;

}


/* Inputs */

input,
select,
textarea,
button{

    font-family:inherit;

}

/*====================================
 DARK MODE - FORM ELEMENTS
====================================*/

body.dark input,
body.dark select,
body.dark textarea{
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

body.dark input::placeholder,
body.dark textarea::placeholder{
    color: var(--text-light);
    opacity: .8;
}

body.dark select{
    color: var(--text);
}

body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(13,110,253,.18);
}