/* ==========================================================
   GARSOLVE TYPOGRAPHY
   File: typography.css
   ========================================================== */


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

   body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
}


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

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
}


h1 {
    font-size: clamp(
        3rem,
        6vw,
        5.75rem
    );

    line-height: var(--line-height-tight);

    font-weight: var(--font-weight-bold);

    letter-spacing: -0.045em;
}


h2 {
    font-size: clamp(
        2.25rem,
        4vw,
        4rem
    );

    line-height: 1.12;

    font-weight: var(--font-weight-semibold);

    letter-spacing: -0.04em;
}


h3 {
    font-size: clamp(
        1.35rem,
        2vw,
        1.75rem
    );

    line-height: var(--line-height-snug);

    font-weight: var(--font-weight-semibold);
}


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

    line-height: var(--line-height-snug);
}


h5 {
    font-size: var(--text-lg);

    line-height: var(--line-height-snug);
}


h6 {
    font-size: var(--text-base);

    line-height: var(--line-height-snug);
}


/* ==========================================================
   PARAGRAPHS
   ========================================================== */

p {
    font-size: var(--text-base);

    line-height: var(--line-height-relaxed);

    color: var(--color-text-secondary);
}


.lead {
    font-size: clamp(
        1.05rem,
        1.5vw,
        1.25rem
    );

    line-height: 1.75;

    color: var(--color-text-secondary);
}


.small-text {
    font-size: var(--text-sm);

    line-height: var(--line-height-normal);
}


.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    margin-bottom: var(--space-5);

    color: var(--color-primary-light);

    font-size: var(--text-xs);

    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.18em;

    line-height: 1.2;

    text-transform: uppercase;
}


.eyebrow::before {
    content: "";

    width: 22px;

    height: 1px;

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


/* ==========================================================
   GRADIENT TEXT
   ========================================================== */

.text-gradient {
    background:
        var(--gradient-text);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;
}


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

a {
    color: inherit;
}


.link {
    color: var(--color-primary-light);

    transition:
        color var(--transition-base);
}


.link:hover {
    color: var(--color-accent-light);
}


/* ==========================================================
   CODE / MONOSPACE
   ========================================================== */

code,
pre,
kbd {
    font-family: var(--font-mono);
}


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

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


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


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


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


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


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


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


.font-light {
    font-weight: var(--font-weight-light);
}


.font-medium {
    font-weight: var(--font-weight-medium);
}


.font-semibold {
    font-weight: var(--font-weight-semibold);
}


.font-bold {
    font-weight: var(--font-weight-bold);
}