/* app/static/css/base/typography.css */
/* Базовая типографика приложения */

/* ==========================================================================
   1. ОСНОВНЫЕ НАСТРОЙКИ
   ========================================================================== */

html {
    font-size: 16px;
    line-height: var(--app-line-height-normal);
}

body {
    font-family: var(--app-font-family-sans);
    color: var(--app-color-text-primary);
    background-color: var(--app-color-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   2. ЗАГОЛОВКИ
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: var(--app-line-height-tight);
    margin-top: 0;
    color: var(--app-color-heading);
}

h1 {
    font-size: var(--app-font-size-4xl);
    margin-bottom: var(--app-spacing-xl);
    font-weight: 800;
    letter-spacing: -0.025em;
}

h2 {
    font-size: var(--app-font-size-3xl);
    margin-bottom: var(--app-spacing-lg);
    border-bottom: 2px solid var(--app-color-border);
    padding-bottom: var(--app-spacing-sm);
    padding-top: var(--app-spacing-md);
}

h3 {
    font-size: var(--app-font-size-2xl);
    margin-bottom: var(--app-spacing-md);
}

h4 {
    font-size: var(--app-font-size-xl);
    margin-bottom: var(--app-spacing-sm);
}

h5 {
    font-size: var(--app-font-size-lg);
    margin-bottom: var(--app-spacing-sm);
}

h6 {
    font-size: var(--app-font-size-xs);
    margin-bottom: var(--app-spacing-xs);
    text-transform: uppercase;
    color: var(--app-color-text-secondary);
}

/* ==========================================================================
   3. ОСНОВНОЙ ТЕКСТ
   ========================================================================== */

p {
    margin-bottom: var(--app-spacing-md);
    line-height: var(--app-line-height-normal);
}

/* ==========================================================================
   4. ССЫЛКИ
   ========================================================================== */

a {
    color: var(--app-color-link);
    text-decoration: none;
    transition: color var(--app-transition-fast) ease;
}

a:hover,
a:focus {
    color: color-mix(in srgb, var(--app-color-primary) 60%, black);
    text-decoration: none;
}

/* Ссылка второстепенная (secondary) */
a.link-secondary,
.link-secondary {
    color: var(--app-color-secondary);
    font-size: var(--app-font-size-sm);
    display: inline-block;
    margin-top: var(--app-spacing-sm);
    text-decoration: none;
    transition: color var(--app-transition-fast) ease;
}

a.link-secondary:hover,
.link-secondary:hover,
a.link-secondary:focus,
.link-secondary:focus {
    color: color-mix(in srgb, var(--app-color-primary) 60%, black);
    /*text-decoration: none;*/
}

/* Ссылка маленькая (small) */
a.link-sm,
.link-sm {
    font-size: var(--app-font-size-xs);
}

/* Ссылка без отступа сверху */
a.link-no-margin,
.link-no-margin {
    margin-top: 0;
}

a.link-with-icon i,
.link-with-icon i {
    font-size: 0.875em;
}

/* Адаптация для темной темы */
[data-theme="dark"] a.link-secondary,
[data-theme="dark"] .link-secondary {
    color: color-mix(in srgb, var(--app-color-secondary) 80%, white);
}

[data-theme="dark"] a.link-secondary:hover,
[data-theme="dark"] .link-secondary:hover {
    color: var(--app-color-primary);
}

/* ==========================================================================
   5. СПИСКИ
   ========================================================================== */

ul, ol {
    margin-bottom: var(--app-spacing-md);
    padding-left: var(--app-spacing-lg);
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    margin-bottom: var(--app-spacing-xs);
    line-height: var(--app-line-height-normal);
}

/* ==========================================================================
   6. ЦИТАТЫ
   ========================================================================== */

blockquote {
    margin: var(--app-spacing-lg) 0;
    padding: var(--app-spacing-md) var(--app-spacing-lg);
    border-left: 4px solid var(--app-color-primary);
    background-color: var(--app-color-bg-secondary);
    font-style: italic;
    color: var(--app-color-text-secondary);
    border-radius: var(--app-radius-md);
    font-size: var(--app-font-size-sm);
}

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

/* Вариант для выносок (без фона и границы) */
blockquote.pullquote {
    background-color: transparent;
    font-size: var(--app-font-size-sm);
    font-style: italic;
    padding: var(--app-spacing-lg);
    margin: var(--app-spacing-xl) 0;
}

/* Вариант для важных цитат */
blockquote.important {
    border-left: 4px solid var(--app-color-danger);
    background-color: color-mix(in srgb, var(--app-color-danger) 10%, transparent);
    font-size: var(--app-font-size-sm);
}

/* Подпись к цитате (универсальный стиль для cite и footer) */
blockquote cite,
blockquote footer {
    display: block;
    margin-top: var(--app-spacing-sm);
    font-size: var(--app-font-size-sm);
    color: var(--app-color-text-muted);
    font-style: normal;
    text-align: right;
}

blockquote cite::before,
blockquote footer::before {
    content: "— ";
}

/* Особый стиль для подписи в выносках */
blockquote.pullquote cite,
blockquote.pullquote footer {
    text-align: center;
    margin-top: var(--app-spacing-md);
    font-size: var(--app-font-size-sm);
}

/* ==========================================================================
   7. РАЗДЕЛИТЕЛИ
   ========================================================================== */

hr {
    border: none;
    height: 1px;
    background-color: var(--app-color-border);
    margin: var(--app-spacing-xl) 0;
}

.app-divider {
    border: none;
    height: 1px;
    background-color: var(--app-color-border);
    margin: var(--app-spacing-lg) 0;
}

.app-divider-light {
    background-color: var(--app-color-border-light);
    height: 1px;
}

.app-divider-thick {
    height: 3px;
    background-color: var(--app-color-border);
}

.app-text-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: var(--app-spacing-lg) 0;
    color: var(--app-color-text-secondary);
}

.app-text-divider::before,
.app-text-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--app-color-border-light);
}

.app-text-divider::before {
    margin-right: var(--app-spacing-md);
}

.app-text-divider::after {
    margin-left: var(--app-spacing-md);
}

/* Вертикальные разделители */
.app-vr {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background-color: var(--app-color-border);
    margin: 0 var(--app-spacing-md);
}

/* Размеры вертикальных разделителей */
.app-vr-sm {
    margin: 0 var(--app-spacing-xs);
    height: 0.75em;
}

.app-vr-md {
    margin: 0 var(--app-spacing-md);
    height: 1em;
}

.app-vr-lg {
    margin: 0 var(--app-spacing-lg);
    height: 1.5em;
}

.app-vr-tall {
    height: 100%;
    min-height: 2em;
}

/* Варианты цвета вертикальных разделителей */
.app-vr-primary {
    background-color: var(--app-color-primary);
    opacity: 0.5;
}

.app-vr-secondary {
    background-color: var(--app-color-secondary);
}

.app-vr-success {
    background-color: var(--app-color-success);
    opacity: 0.5;
}

.app-vr-danger {
    background-color: var(--app-color-danger);
    opacity: 0.5;
}

.app-vr-warning {
    background-color: var(--app-color-warning);
    opacity: 0.5;
}

.app-vr-info {
    background-color: var(--app-color-info);
    opacity: 0.5;
}

/* Вертикальный разделитель для flex/grid контейнеров */
.app-divider-vertical {
    width: 1px;
    height: auto;
    align-self: stretch;
    background-color: var(--app-color-border);
    margin: 0 var(--app-spacing-lg);
}

/* Вертикальный разделитель с текстом (для панелей навигации и т.д.) */
.app-divider-vertical-with-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--app-color-text-muted);
    font-size: var(--app-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 var(--app-spacing-lg);
}

.app-divider-vertical-with-text::before {
    content: '';
    width: 1px;
    flex-grow: 1;
    background-color: var(--app-color-border);
    margin-bottom: var(--app-spacing-xs);
}

.app-divider-vertical-with-text::after {
    content: '';
    width: 1px;
    flex-grow: 1;
    background-color: var(--app-color-border);
    margin-top: var(--app-spacing-xs);
}

/* Тонкий вертикальный разделитель */
.app-divider-vertical-light {
    width: 1px;
    height: 100%;
    background-color: var(--app-color-border-light);
}

/* Толстый вертикальный разделитель */
.app-divider-vertical-thick {
    width: 3px;
    height: 100%;
    background-color: var(--app-color-border);
}

/* Пунктирный вертикальный разделитель */
.app-divider-vertical-dashed {
    width: 1px;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 4px,
        var(--app-color-border) 4px,
        var(--app-color-border) 8px
    );
}

/* Разделитель для боковых панелей */
.app-sidebar-divider {
    width: 1px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--app-color-border) 20%,
        var(--app-color-border) 80%,
        transparent
    );
}

[data-theme="dark"] {
    .app-vr {
        background-color: var(--app-color-border);
        opacity: 0.3;
    }

    .app-divider-vertical {
        background-color: var(--app-color-border);
    }

    .app-divider-vertical-light {
        background-color: var(--app-color-border-light);
    }

    .app-divider-vertical-dashed {
        background: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 4px,
            var(--app-color-border-light) 4px,
            var(--app-color-border-light) 8px
        );
    }
}

/* ==========================================================================
   8. ТЕКСТОВЫЕ ЭЛЕМЕНТЫ
   ========================================================================== */

strong, b {
    font-weight: 700;
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--app-font-size-xs);
}

sub, sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   9. ОПРЕДЕЛЕНИЯ
   ========================================================================== */

dl {
    margin-bottom: var(--app-spacing-md);
}

dt {
    font-weight: 700;
    color: var(--app-color-text-primary);
    margin-top: var(--app-spacing-sm);
}

dd {
    margin-left: var(--app-spacing-lg);
    margin-bottom: var(--app-spacing-sm);
    color: var(--app-color-text-secondary);
}

/* ==========================================================================
   10. ВЫРАВНИВАНИЕ
   ========================================================================== */

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

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

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

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

/* ==========================================================================
   11. АДАПТИВНОСТЬ
   ========================================================================== */

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    h1 {
        font-size: var(--app-font-size-3xl);
        margin-bottom: var(--app-spacing-lg);
    }

    h2 {
        font-size: var(--app-font-size-2xl);
        margin-bottom: var(--app-spacing-md);
    }

    h3 {
        font-size: var(--app-font-size-xl);
    }

    h4 {
        font-size: var(--app-font-size-lg);
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    h1 {
        font-size: var(--app-font-size-2xl);
    }

    h2 {
        font-size: var(--app-font-size-xl);
    }

    h3 {
        font-size: var(--app-font-size-lg);
    }
}

@media (max-width: 768px) {
    blockquote {
        padding: var(--app-spacing-sm) var(--app-spacing-md);
        margin: var(--app-spacing-md) 0;
    }

    blockquote.pullquote {
        padding: var(--app-spacing-md);
        font-size: var(--app-font-size-base);
    }
}

@media (max-width: 480px) {
    blockquote {
        padding: var(--app-spacing-xs) var(--app-spacing-sm);
        font-size: var(--app-font-size-sm);
    }
}

@media (max-width: 768px) {
    .app-vr {
        margin: 0 var(--app-spacing-sm);
    }

    .app-divider-vertical,
    .app-divider-vertical-with-text {
        display: none; /* Скрываем вертикальные разделители на мобильных */
    }

    /* Альтернатива - превращаем вертикальные разделители в горизонтальные на мобильных */
    .app-vr-responsive {
        width: 100%;
        height: 1px;
        margin: var(--app-spacing-md) 0;
    }
}

/* ==========================================================================
   12. ТЕКСТОВЫЕ УТИЛИТЫ
   ========================================================================== */

/* Размеры шрифта */
.app-text-xs { font-size: var(--app-font-size-xs) !important; }
.app-text-sm { font-size: var(--app-font-size-sm) !important; }
.app-text-base { font-size: var(--app-font-size-base) !important; }
.app-text-lg { font-size: var(--app-font-size-lg) !important; }
.app-text-xl { font-size: var(--app-font-size-xl) !important; }
.app-text-2xl { font-size: var(--app-font-size-2xl) !important; }
.app-text-3xl { font-size: var(--app-font-size-3xl) !important; }
.app-text-4xl { font-size: var(--app-font-size-4xl) !important; }

/* Цвета текста */
.app-text-primary { color: var(--app-color-text-light) !important; }
.app-text-secondary { color: var(--app-color-secondary) !important; }
.app-text-success { color: var(--app-color-success) !important; }
.app-text-danger { color: var(--app-color-danger) !important; }
.app-text-warning { color: var(--app-color-warning) !important; }
.app-text-info { color: var(--app-color-info) !important; }
.app-text-light { color: var(--app-color-text-light) !important; }
.app-text-dark { color: var(--app-color-text-dark) !important; }
.app-text-muted { color: var(--app-color-text-muted) !important; }
.app-text-body { color: var(--app-color-text-primary) !important; }

/* Начертание */
.app-font-light { font-weight: 300 !important; }
.app-font-normal { font-weight: 400 !important; }
.app-font-medium { font-weight: 500 !important; }
.app-font-semibold { font-weight: 600 !important; }
.app-font-bold { font-weight: 700 !important; }

/* Выравнивание текста */
.app-text-left { text-align: left !important; }
.app-text-center { text-align: center !important; }
.app-text-right { text-align: right !important; }
.app-text-justify { text-align: justify !important; }

/* Преобразование текста */
.app-text-uppercase { text-transform: uppercase !important; }
.app-text-lowercase { text-transform: lowercase !important; }
.app-text-capitalize { text-transform: capitalize !important; }

/* Обрезка текста */
.app-text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.app-text-break {
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Межстрочный интервал */
.app-leading-tight { line-height: var(--app-line-height-tight) !important; }
.app-leading-normal { line-height: var(--app-line-height-normal) !important; }
.app-leading-relaxed { line-height: var(--app-line-height-relaxed) !important; }

/* Стили текста */
.app-text-italic { font-style: italic !important; }
.app-text-underline { text-decoration: underline !important; }
.app-text-strikethrough { text-decoration: line-through !important; }
.app-text-nowrap { white-space: nowrap !important; }

/* Шрифты */
.app-font-monospace { font-family: monospace !important; }

/* Типографические утилиты */
.app-text-balance { text-wrap: balance !important; }
.app-text-pretty { text-wrap: pretty !important; }
.app-text-decoration-skip-ink { text-decoration-skip-ink: auto !important; }
.app-hyphens-auto { hyphens: auto !important; }
.app-hyphens-none { hyphens: none !important; }

/* Прозрачный текст */
.app-text-transparent {
    color: transparent !important;
}
.app-text-muted-20 {
    color: color-mix(in srgb, var(--app-color-text-primary) 20%, transparent) !important;
}
.app-text-muted-40 {
    color: color-mix(in srgb, var(--app-color-text-primary) 40%, transparent) !important;
}
.app-text-muted-60 {
    color: color-mix(in srgb, var(--app-color-text-primary) 60%, transparent) !important;
}