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

/* ===== Headings ===== */

h1,
h2,
h3,
h4,
h5,
h6{
    margin: 0;
    color: var(--color-text);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

h1{
    font-size: var(--fs-hero);
}

h2{
    font-size: var(--fs-2xl);
}

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

h4{
    font-size: var(--fs-lg);
}

h5{
    font-size: var(--fs-md);
}

h6{
    font-size: var(--fs-sm);
}

/* ===== Paragraph ===== */

p{
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.8;
    color: var(--color-text-secondary);
}

/* ===== Links ===== */

a{
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* ===== Lists ===== */

ul,
ol{
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ===== Images ===== */

img{
    display: block;
    max-width: 100%;
    height: auto;
}

/* ===== Selection ===== */

::selection{
    background: var(--color-primary);
    color: var(--color-bg);
}