/* ===========================================
   ТИПОГРАФИКА
   Шкала из DESIGN.md. Заголовки — всегда Oswald в капсе («постерная»
   эстетика), тело — Manrope. Цвет заголовков всегда бордовый.
   =========================================== */

.display-xl,
.headline-lg,
.headline-md,
h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-primary-container);
}

.display-xl {
    font-size: var(--text-display-xl);
    line-height: var(--text-display-xl-lh);
    letter-spacing: var(--text-display-xl-ls);
    /* Заголовок из одного длинного слова («НАБЕРЕЖНАЯ») не должен рваться
       посреди слова, как в исходном макете Stitch. */
    overflow-wrap: break-word;
    hyphens: none;
}

.headline-lg {
    font-size: var(--text-headline-lg);
    line-height: var(--text-headline-lg-lh);
    letter-spacing: var(--text-headline-lg-ls);
}

.headline-md {
    font-size: var(--text-headline-md);
    line-height: var(--text-headline-md-lh);
}

.body-lg {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    line-height: var(--text-body-lg-lh);
    color: var(--color-on-surface-variant);
}

.body-md {
    font-family: var(--font-body);
    font-size: var(--text-body-md);
    line-height: var(--text-body-md-lh);
    color: var(--color-on-surface-variant);
}

/* Мелкая метка капсом с разрядкой — «elegant utility» из DESIGN.md */
.label-caps {
    font-family: var(--font-body);
    font-size: var(--text-label-caps);
    line-height: var(--text-label-caps-lh);
    letter-spacing: var(--text-label-caps-ls);
    font-weight: 600;
    text-transform: uppercase;
}

.label-sm {
    font-family: var(--font-body);
    font-size: var(--text-label-sm);
    line-height: var(--text-label-sm-lh);
    font-weight: 500;
    text-transform: uppercase;
}

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

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

/* Короткая черта под заголовком секции — повторяющийся приём из макета */
.rule-accent {
    width: 48px;
    height: 2px;
    background: var(--color-secondary);
    border: 0;
}