/*
 * Typography — Luxury editorial style
 * Cormorant Garamond for display, Raleway for body
 */

/* ═══════════════════════════════════════════════════════════
   DISPLAY HEADINGS — Dramatic, elegant
═══════════════════════════════════════════════════════════ */

.display-1 {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--weight-light);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.display-2 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--weight-light);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.display-3 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-light);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

/* ═══════════════════════════════════════════════════════════
   HEADINGS
═══════════════════════════════════════════════════════════ */

h1, .h1 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-light);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-lg);
}

h2, .h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-normal);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-md);
}

h3, .h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-normal);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-sm);
}

h4, .h4 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════
   BODY TEXT
═══════════════════════════════════════════════════════════ */

p {
    margin-bottom: var(--space-md);
}

p:last-child {
    margin-bottom: 0;
}

.lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
}

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

.tiny {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

/* ═══════════════════════════════════════════════════════════
   SPECIAL TEXT STYLES
═══════════════════════════════════════════════════════════ */

/* Капс для лейблов и навигации */
.caps {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

/* Элегантные подписи */
.caption {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    letter-spacing: var(--tracking-wide);
}

/* Цитаты */
blockquote, .quote {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: italic;
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
    padding-left: var(--space-xl);
    border-left: 2px solid var(--color-gold);
}

/* ═══════════════════════════════════════════════════════════
   LINKS
═══════════════════════════════════════════════════════════ */

.link {
    position: relative;
    color: var(--color-ink);
    transition: color var(--transition-fast);
}

.link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-normal);
}

.link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.link-gold {
    color: var(--color-gold);
}

.link-gold:hover {
    color: var(--color-gold-dark);
}

/* ═══════════════════════════════════════════════════════════
   TEXT ALIGNMENT & COLOR
═══════════════════════════════════════════════════════════ */

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

.text-ink { color: var(--color-ink); }
.text-soft { color: var(--color-ink-soft); }
.text-muted { color: var(--color-ink-muted); }
.text-gold { color: var(--color-gold); }
.text-white { color: var(--color-surface); }

/* ═══════════════════════════════════════════════════════════
   PROSE — For long-form content
═══════════════════════════════════════════════════════════ */

.prose {
    max-width: var(--container-text);
}

.prose h2 {
    margin-top: var(--space-2xl);
}

.prose h3 {
    margin-top: var(--space-xl);
}

.prose ul, .prose ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.prose ul {
    list-style-type: disc;
}

.prose ol {
    list-style-type: decimal;
}

.prose li {
    margin-bottom: var(--space-xs);
}

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

.prose a {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: var(--color-gold-dark);
}