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


body {

    font-family:
    "Inter",
    "Manrope",
    "Segoe UI",
    Arial,
    sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.7;

    color: var(--text-secondary);

}


/* =========================
   HEADINGS
========================= */


h1,
h2,
h3,
h4,
h5,
h6 {

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

    color: var(--text-primary);

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -0.02em;

}



h1 {

    font-size:
    clamp(2.8rem, 5vw, 4.8rem);

}



h2 {

    font-size:
    clamp(2rem, 4vw, 3.2rem);

}



h3 {

    font-size:
    clamp(1.5rem, 3vw, 2rem);

}



h4 {

    font-size: 1.25rem;

}



/* =========================
   PARAGRAPH
========================= */


p {

    color: var(--text-secondary);

    max-width: 75ch;

}



.text-muted {

    color: var(--text-muted);

}



/* =========================
   LINKS
========================= */


a {

    transition:
    var(--transition);

}



a:hover {

    color: var(--primary);

}



/* =========================
   FONT WEIGHTS
========================= */


.fw-light {

    font-weight: 300;

}


.fw-normal {

    font-weight: 400;

}


.fw-medium {

    font-weight: 500;

}


.fw-semibold {

    font-weight: 600;

}


.fw-bold {

    font-weight: 700;

}


.fw-extra {

    font-weight: 800;

}



/* =========================
   TEXT ALIGNMENT
========================= */


.text-center {

    text-align: center;

}


.text-left {

    text-align: left;

}


.text-right {

    text-align: right;

}