/* Typography — Manrope loaded via Google Fonts in HTML */

.zx-display {
    font-size: var(--z-text-display);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.055em;
    color: var(--z-white);
}

.zx-heading-xl {
    font-size: var(--z-text-5xl);
    font-weight: 300;
    line-height: 1.0;
    letter-spacing: -0.04em;
    color: var(--z-white);
}

.zx-heading-lg {
    font-size: var(--z-text-4xl);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--z-white);
}

.zx-heading-md {
    font-size: var(--z-text-3xl);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--z-white);
}

.zx-heading-sm {
    font-size: var(--z-text-2xl);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--z-white);
}

.zx-body-lg {
    font-size: var(--z-text-lg);
    font-weight: 400;
    line-height: 1.7;
    color: var(--z-text-muted);
}

.zx-body {
    font-size: var(--z-text-base);
    font-weight: 400;
    line-height: 1.7;
    color: var(--z-text-muted);
}

.zx-body-sm {
    font-size: var(--z-text-sm);
    font-weight: 400;
    line-height: 1.6;
    color: var(--z-text-subtle);
}

.zx-eyebrow {
    font-size: var(--z-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--z-text-muted);
    display: flex;
    align-items: center;
    gap: 16px;
}

.zx-eyebrow::before {
    content: '';
    width: 40px;
    height: 1px;
    background-color: var(--z-text-subtle);
}

.zx-accent {
    color: var(--z-primary);
}

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

.zx-text-subtle {
    color: var(--z-text-subtle);
}