/* ==========================================================
   e-DEXEL Platform UI
   Base Styles
========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

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

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

/* ==========================================================
   LIGHT THEME
========================================================== */

:root{

    --background:#f7f7f8;
    --surface:#ffffff;

    --surface-alt:#f2f3f5;

    --text:#121212;
    --text-light:#646464;

    --border:#e4e6ea;

    --primary:#000000;

    --accent:#0057ff;

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

    --shadow:

        0 10px 30px rgba(0,0,0,.05);

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:20px;
    --radius-xl:28px;

    --transition:.18s ease;

}

/* ==========================================================
   DARK THEME
========================================================== */

html[data-theme="dark"]{

    --background:#0f1012;

    --surface:#18191b;

    --surface-alt:#202225;

    --text:#ffffff;

    --text-light:#b4b4b4;

    --border:#32353a;

    --primary:#ffffff;

    --accent:#4d84ff;

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

}

/* ==========================================================
   DOCUMENT
========================================================== */

html{

    min-height:100%;
    scroll-behavior:smooth;

}

body{

    min-height:100vh;

    background:var(--background);

    color:var(--text);

    font-family:"Inter",sans-serif;

    font-size:15px;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1{

    font-size:42px;

    font-weight:800;

    line-height:1.1;

}

h2{

    font-size:32px;

    font-weight:700;

}

h3{

    font-size:24px;

    font-weight:700;

}

h4{

    font-size:20px;

    font-weight:600;

}

p{

    color:var(--text-light);

}

/* ==========================================================
   ELEMENTS
========================================================== */

button,
input,
textarea,
select{

    font:inherit;

}

input,
textarea,
select{

    outline:none;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

img{

    display:block;

    max-width:100%;

}

hr{

    border:0;

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

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#999;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#666;

}

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

::selection{

    background:var(--accent);

    color:#fff;

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.skip-link{

    position:absolute;

    left:-9999px;

}

.skip-link:focus{

    left:25px;

    top:25px;

    z-index:99999;

    padding:12px 18px;

    background:#000;

    color:#fff;

    border-radius:10px;

}