/* ==========================================================
   VINCIT MANAGEMENT CONSULTING
   FILE       : 03-typography.css
   PURPOSE    : Global Typography System
   VERSION    : 1.0.0
========================================================== */


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

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: 1.2;
}


/* ==========================================================
   BODY
========================================================== */

body {
    font-size: 16px;
}


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

p {
    color: var(--color-text-light);
    font-size: 16px;
}


/* ==========================================================
   SMALL TEXT
========================================================== */

.text-small {
    font-size: 14px;
}


.text-muted {
    color: var(--color-text-light);
}


/* ==========================================================
   EYEBROW / SECTION LABEL
========================================================== */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 16px;

    color: var(--color-gold);

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--weight-bold);

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.eyebrow::before {
    content: "";

    display: inline-block;

    width: 30px;
    height: 1px;

    background: var(--color-gold);
}


/* ==========================================================
   SECTION TITLE
========================================================== */

.section-title {
    max-width: 800px;

    font-size: clamp(38px, 4vw, 58px);

    letter-spacing: -0.02em;
}


/* ==========================================================
   SECTION INTRO
========================================================== */

.section-intro {
    max-width: 700px;
    margin-top: 20px;

    font-size: 17px;
    line-height: 1.8;
}