/* /var/www/pavel-gorin.local/public/css/typography.css */
/**
* ЕДИНАЯ СИСТЕМА ТИПОГРАФИКИ — весь текст на сайте
* ВСЕ РАЗМЕРЫ ТОЛЬКО ИЗ variables.css
* АДАПТИВНЫЕ ШРИФТЫ через CSS-переменные
*/

/* === БАЗОВАЯ ТИПОГРАФИКА === */
body {
    font-family: var(--font-family-primary);
    color: var(--color-text-dim);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
}

/* === ЗАГОЛОВКИ (все уровни) === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-extrabold);
}

h1 {
    color: var(--color-white);
    font-size: var(--h1-font-size);
    text-align: center;
    margin-bottom: var(--margin-3xl);
}

h2 {
    color: var(--color-white);
    text-align: center;
    margin-bottom: var(--margin-3xl);
    font-size: var(--h2-font-size);
    /* Небольшое свечение снизу */
    text-shadow: 0 3px 13px rgba(38, 90, 223, 0.55);
}

h3 {
    color: var(--color-primary-light);
    margin-bottom: var(--margin-xl);
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-semibold);
}

h4 {
    color: var(--color-primary-xl);
    font-size: var(--h4-font-size);
    margin-bottom: var(--margin-lg);
    font-weight: var(--font-weight-semibold);
}

h5 {
    color: var(--color-text);
    font-size: var(--h5-font-size);
    margin-bottom: var(--margin-md);
    font-weight: var(--font-weight-medium);
}

h6 {
    color: var(--color-text-muted);
    font-size: var(--h6-font-size);
    margin-bottom: var(--margin-sm);
    font-weight: var(--font-weight-normal);
}

/* === ПАРАГРАФЫ === */
p {
    color: var(--color-text-dim);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--margin-xl);
    font-size: var(--font-size-lg);
}

/* === СПИСКИ === */
ul, ol {
    margin-bottom: var(--margin-xl);
    padding-left: var(--space-xl);
}

li {
    color: var(--color-text-dim);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
    margin-bottom: var(--margin-sm);
}

/* === ЛИД-ТЕКСТ === */
.lead-text {
    color: var(--color-text-dim);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-normal);
    margin-bottom: var(--margin-3xl);
    font-weight: var(--font-weight-normal);
}

/* === ЦИТАТЫ === */
blockquote, .exp-quote {
    font-style: italic;
    color: var(--color-text-dim);
    margin: var(--margin-xl) 0;
    padding-left: var(--space-lg);
    border-left: 3px solid var(--color-primary);
}

/* === СНОСКИ === */
.footnote, small, .text-muted {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--margin-md);
    font-style: italic;
}

/* === ССЫЛКИ === */
a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition: var(--transition-std);
}

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

/* === СПИСОК С МАРКЕРАМИ (стилизованный) === */
.styled-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.styled-list li {
    padding-left: var(--space-4xl);
    position: relative;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
    margin-bottom: var(--margin-sm);
}

.styled-list li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    text-shadow: 0 0 8px rgba(42, 87, 199, 0.8);
}

/* === ТАБЛИЦА ПОРТФОЛИО === */
.portfolio-table thead th {
    color: var(--color-primary-light);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
}

.portfolio-table .project-title {
    color: var(--color-primary-light);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
}

.portfolio-table tbody p {
    color: var(--color-text-dim);
    line-height: var(--line-height-normal);
    font-size: var(--font-size-sm);
    margin: 0;
}

.portfolio-table .tech-badge {
    font-size: var(--font-size-xs);
    color: var(--color-primary-light);
}

/* === КОНТАКТЫ === */
.contact-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
}

.contact-link {
    color: var(--color-primary-light);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

.contact-link:hover {
    color: var(--color-white);
    text-shadow: 0 0 15px rgba(149, 196, 150, 0.6);
}

/* === ФОРМА КОНТАКТОВ === */
.contact-form-title {
    color: var(--color-primary-light);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    margin-bottom: var(--margin-2xl);
}

.form-status {
    font-size: var(--font-size-sm);
}

/* === БЛОК ОПЫТ === */
.exp-years {
    font-size: var(--font-size-sm);
    font-weight: normal;
    color: var(--color-text-muted);
}

.exp-insight p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    margin-bottom: var(--margin-sm);
}

/* === HERO БЛОК (компактный список) === */
.compact-title {
    color: var(--color-primary-light);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
}

.compact-item {
    color: var(--color-text-dim);
    font-size: var(--font-size-sm);
    text-align: left;
    line-height: var(--line-height-tight);
    margin-bottom: var(--margin-md);
}

.compact-footer {
    color: var(--color-primary-light);
    font-size: var(--font-size-xs);
    font-style: italic;
    text-align: left;
}

/* === МОДАЛЬНЫЕ ОКНА === */
.modal-title {
    color: var(--color-primary-light);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
}

.modal-close {
    font-size: var(--font-size-md);
    color: var(--color-primary-light);
}

.modal-close:hover {
    color: var(--color-white);
}

/* === ЧАТ === */
#chatModal .modal-title span {
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.message {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.message-user {
    color: var(--color-white);
}

.message-bot {
    color: var(--color-text);
}

.message-meta {
    font-size: var(--font-size-xs);
    opacity: 0.6;
}

.chat-input {
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.chat-input::placeholder {
    color: rgba(149, 196, 250, 0.4);
    font-size: var(--font-size-sm);
}

.chat-input:disabled {
    color: rgba(149, 196, 250, 0.4);
}

.send-btn {
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.status-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-online {
    color: var(--color-primary-light);
}

.status-offline {
    color: rgba(149, 196, 250, 0.5);
}

.status-connecting {
    color: rgba(149, 196, 250, 0.7);
}

.typing-indicator {
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-style: italic;
}

/* === АУДИО ПЛЕЕР === */
.time-container {
    color: var(--color-primary-light);
    font-size: var(--font-size-xs);
}

.control-btn {
    color: var(--color-primary-light);
}

.control-btn i {
    font-size: var(--font-size-xl);
}

.control-btn.play-pause i {
    font-size: var(--font-size-3xl);
}

.playlist-selector-select {
    color: var(--color-primary-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.playlist-error {
    color: var(--color-error);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.playlist-item-title {
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.playlist-item-artist {
    color: rgba(149, 196, 250, 0.7);
    font-size: var(--font-size-xs);
}

.playlist-item-duration {
    color: var(--color-primary-light);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.playlist-item-number {
    color: var(--color-primary-light);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

/* === ГОЛОСОВОЙ РЕКОРДЕР === */
.voice-status-text {
    color: var(--color-text-dim);
    font-size: var(--font-size-sm);
}

.voice-record-btn,
.voice-stop-btn {
    color: var(--color-primary-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.timer-seconds {
    color: var(--color-primary-light);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

.voice-text-result {
    color: var(--color-text-dim);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    font-family: var(--font-family-mono);
}

.voice-error {
    color: var(--color-error);
}

/* === АВТОРИЗАЦИЯ === */
.input-group-text {
    color: var(--color-text);
    font-size: var(--font-size-md);
}

.form-control {
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.form-control::placeholder {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.form-control:focus {
    color: var(--color-white);
}

.btn-login {
    color: var(--color-white);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.forgot-password,
.back-to-login {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.success-message {
    color: var(--color-success);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* === БУРГЕР МЕНЮ === */
.side-menu-logo {
    color: var(--color-primary-light);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.side-menu-link {
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

.side-menu-link i {
    color: var(--color-primary-light);
    font-size: var(--font-size-xl);
}

.side-menu-copyright {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* === ФУТЕР === */
.footer-menu-link {
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
}

.footer-menu-link.home-icon i {
    font-size: var(--font-size-xl);
}

/* === УВЕЛИЧЕНИЕ ТЕКСТА НА БОЛЬШИХ ЭКРАНАХ (1200px+) === */
@media (min-width: 1200px) {
    /* Основной текст */
    body {
        font-size: var(--font-size-lg);
    }
    
    /* Параграфы */
    p {
        font-size: var(--font-size-xl);
    }
    
    /* Списки */
    li {
        font-size: var(--font-size-xl);
    }
    
    /* Лид-текст */
    .lead-text {
        font-size: var(--font-size-3xl);
    }
    
    /* Стилизованные списки */
    .styled-list li {
        font-size: var(--font-size-xl);
    }
    
    /* Блок опыта — текст в цитатах */
    .exp-quote {
        font-size: var(--font-size-lg);
    }
    
    /* Блок опыта — инсайты */
    .exp-insight p {
        font-size: var(--font-size-md);
    }
    
    /* Контакты — ссылки */
    .contact-link {
        font-size: var(--font-size-xl);
    }
    
    /* Hero блок — компактные элементы */
    .compact-item {
        font-size: var(--font-size-md);
    }
    
    .compact-title {
        font-size: var(--font-size-sm);
    }
    
    .compact-footer {
        font-size: var(--font-size-sm);
    }
    
    /* Форма обратной связи */
    .contact-form-title {
        font-size: var(--font-size-3xl);
    }
    
    /* Модальные окна */
    .modal-title {
        font-size: var(--font-size-lg);
    }
    
    /* Чат */
    .message {
        font-size: var(--font-size-md);
    }
    
    .chat-input {
        font-size: var(--font-size-md);
    }
    
    /* Плеер */
    .playlist-item-title {
        font-size: var(--font-size-md);
    }
    
    /* Таблица портфолио */
    .portfolio-table thead th {
        font-size: var(--font-size-lg);
    }
    
    .portfolio-table .project-title {
        font-size: var(--font-size-xl);
    }
    
    .portfolio-table tbody p {
        font-size: var(--font-size-md);
    }
    
    .portfolio-table .tech-badge {
        font-size: var(--font-size-sm);
    }
    
    /* Футер */
    .footer-menu-link {
        font-size: var(--font-size-md);
    }
}

/* === ДОПОЛНИТЕЛЬНОЕ УВЕЛИЧЕНИЕ ДЛЯ ОЧЕНЬ БОЛЬШИХ ЭКРАНОВ (1600px+) === */
@media (min-width: 1600px) {
    body {
        font-size: var(--font-size-xl);
    }
    
    p {
        font-size: var(--font-size-2xl);
    }
    
    li {
        font-size: var(--font-size-2xl);
    }
    
    .lead-text {
        font-size: var(--font-size-4xl);
    }
    
    .contact-link {
        font-size: var(--font-size-2xl);
    }
    
    .compact-item {
        font-size: var(--font-size-lg);
    }
    
    .portfolio-table .project-title {
        font-size: var(--font-size-2xl);
    }
    
    .portfolio-table tbody p {
        font-size: var(--font-size-lg);
    }
}

/* === АДАПТИВНЫЕ КОРРЕКТИРОВКИ (только для очень маленьких экранов) === */
@media (max-width: 576px) {
    /* Корректировка межбуквенного интервала для мобильных */
    h1, h2, h3, h4 {
        letter-spacing: -0.3px;
    }
    
    /* Уменьшаем отступы у параграфов на мобильных */
    p {
        margin-bottom: calc(var(--margin-xl) * 0.8);
    }
    
    /* Компактные списки */
    ul, ol {
        padding-left: var(--space-lg);
    }
    
    /* Убираем лишние отступы в модалках на телефонах */
    .modal-title {
        letter-spacing: 0.5px;
    }
    
    /* Меньший размер для бейджей статуса */
    .status-badge {
        font-size: 8px;
    }
}