/* ============================================================
   typography.css — Heading scale, body text, utilities
   Matches font sizing and weight system.
   ============================================================ */

/* ── Heading Scale ── */
.h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    /* 36–56px */
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: clamp(1.75rem, 3vw, 3rem);
    /* 28–48px */
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    /* 20–26px */
    line-height: var(--lh-snug);
    color: var(--color-text-primary);
}

.h4 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--text-xl);
    line-height: var(--lh-snug);
}

/* ── Body Text Sizes ── */
.p-large {
    font-size: var(--text-lg);
    /* 18px */
    line-height: var(--lh-normal);
}

.p-medium {
    font-size: var(--text-base);
    /* 16px */
    line-height: var(--lh-normal);
}

.p-small {
    font-size: var(--text-sm);
    /* 14px */
    line-height: var(--lh-normal);
}

/* ── Emphasize (the Greenly underline-wave effect) ── */
/* Greenly uses an SVG wavy underline on italic/em tags inside headings */
.emphasize em,
h1 em,
h2 em {
    position: relative;
    font-style: normal;
    font-weight: inherit;
    display: inline-block;
}

.emphasize em::after,
h1 em::after,
h2 em::after {
    content: '';
    position: absolute;
    bottom: -0.2em;
    left: 0;
    right: 0;
    width: 100%;
    height: 0.35em;
    z-index: -1;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='184' height='10' viewBox='0 0 184 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 8C37.2143 4.86313 124.314 -0.469554 183 3.29469' stroke='%232fce65' stroke-width='3'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 100% auto;
}

/* ── Text Color Utilities ── */
.text-brand {
    color: var(--color-brand);
}

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

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

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

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

/* ── Text Alignment ── */
.text-center {
    text-align: center;
}

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

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

/* ── Font Weight Utilities ── */
.font-regular {
    font-weight: var(--fw-regular);
}

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

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

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

/* ── Misc Utilities ── */
.whitespace-nowrap {
    white-space: nowrap;
}

.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}