/* ============================================================================
   ЛесОптТорг — Типография
   typography.css

   Единая иерархия заголовков и текста. Подключается ПОСЛЕ tokens.css.
   Пресет A — «спокойный» (h1: 32px, h2: 24px, h3: 20px).

   Чтобы поменять размеры — правь tokens.css (--h1-size, --h2-size и т.д.)
============================================================================ */


/* ─────────── База ─────────── */

body {
    font-family: var(--font-base);
    font-size: var(--text-base);
    line-height: var(--line-base);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ─────────── Заголовки ─────────── */

h1, .h1 {
    font-family: var(--font-display);
    font-size: var(--h1-size);
    font-weight: var(--weight-semibold);
    line-height: var(--line-tight);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-md);
}

h2, .h2 {
    font-family: var(--font-display);
    font-size: var(--h2-size);
    font-weight: var(--weight-semibold);
    line-height: var(--line-base);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-md);
}

h3, .h3 {
    font-family: var(--font-display);
    font-size: var(--h3-size);
    font-weight: var(--weight-medium);
    line-height: var(--line-base);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-sm);
}

h4, .h4 {
    font-family: var(--font-display);
    font-size: var(--h4-size);
    font-weight: var(--weight-medium);
    line-height: var(--line-base);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-sm);
}

@media (max-width: 768px) {
    h1, .h1 { font-size: var(--h1-size-mobile); }
    h2, .h2 { font-size: var(--h2-size-mobile); }
    h3, .h3 { font-size: var(--h3-size-mobile); }
}


/* ─────────── Параграфы ─────────── */

p {
    font-size: var(--text-base);
    line-height: var(--line-base);
    color: var(--color-text);
    margin: 0 0 var(--space-md);
}

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

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


/* ─────────── Списки ─────────── */

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

ul li, ol li {
    line-height: var(--line-base);
    margin-bottom: var(--space-xs);
}


/* ─────────── Ссылки ─────────── */

a {
    color: var(--color-brand);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-brand-dark);
    text-decoration: underline;
}

a:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible {
    outline: 2px solid rgba(0, 173, 93, 0.5);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ─────────── Текстовые акценты ─────────── */

strong, b {
    font-weight: var(--weight-semibold);
}

em, i {
    font-style: italic;
}

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

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

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