/*======================================
  Wx Design System v1.0
  Base Styles
======================================*/

/* Root */

html{
    font-size:16px;
}

/* Body */

body{
    font-family:var(--font-body);
    font-size:var(--text-base);
    font-weight:var(--fw-regular);
    line-height:var(--leading-normal);
    color:var(--text-body);
    background:var(--bg-body);
    overflow-x:hidden;
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    color:var(--text-heading);
    line-height:var(--leading-tight);
    letter-spacing:-0.02em;
}

h1{
    font-size:var(--text-5xl);
}

h2{
    font-size:var(--text-4xl);
}

h3{
    font-size:var(--text-3xl);
}

h4{
    font-size:var(--text-2xl);
}

h5{
    font-size:var(--text-xl);
}

h6{
    font-size:var(--text-lg);
}

p{
    margin-bottom:1rem;
}

p:last-child{
    margin-bottom:0;
}

/* Links */

a{
    transition:var(--transition-fast);
}

a:hover{
    color:var(--color-accent);
}

/* Buttons */

button{
    transition:var(--transition-fast);
}

/* Images */

img{
    height:auto;
    user-select:none;
}

/* Selection */

::selection{
    background:var(--color-accent);
    color:#fff;
}

/* Scrollbar */

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

::-webkit-scrollbar-track{
    background:var(--bg-soft);
}

::-webkit-scrollbar-thumb{
    background:var(--color-primary);
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--color-accent);
}

/* Focus */

:focus-visible{
    outline:3px solid var(--color-accent);
    outline-offset:3px;
}

/* Sections */

section{
    padding:var(--section-padding) 0;
    position:relative;
}

/* Utility */

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

.text-accent{
    color:var(--color-accent);
}

.text-primary{
    color:var(--color-primary);
}

.bg-dark{
    background:var(--bg-dark);
    color:var(--text-light);
}

.bg-light{
    background:var(--bg-light);
}

.hidden{
    display:none !important;
}