/* ==========================================================
   TYPOGRAPHY.CSS
   Типографика проекта
   ========================================================== */

html{
    font-size:16px;
}

body{
    font-family:var(--font-family);
    font-size:var(--font-size-base);
    font-weight:var(--font-normal);
    line-height:var(--line-height);
    color:var(--color-text);
    background:var(--color-background);
}



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

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--color-secondary);
    font-weight:var(--font-bold);
    line-height:1.2;
    margin-bottom:var(--space-5);
}

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

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

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

h4{
    font-size:var(--font-size-xl);
}

h5{
    font-size:var(--font-size-lg);
}

h6{
    font-size:var(--font-size-base);
}



/* ==========================================================
   Абзацы
   ========================================================== */

p{
    margin-bottom:var(--space-5);
    color:var(--color-text-light);
}

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



/* ==========================================================
   Списки
   ========================================================== */

ul,
ol{
    margin-bottom:var(--space-5);
}

li{
    margin-bottom:var(--space-2);
    color:var(--color-text);
}



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

a{
    color:var(--color-primary);
    transition:color var(--transition);
}

a:hover{
    color:var(--color-primary-hover);
}



/* ==========================================================
   Выделение текста
   ========================================================== */

strong{
    font-weight:var(--font-bold);
    color:var(--color-secondary);
}

em{
    font-style:italic;
}

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



/* ==========================================================
   Цитаты
   ========================================================== */

blockquote{
    margin:var(--space-8) 0;
    padding:var(--space-6);
    border-left:4px solid var(--color-primary);
    background:var(--color-surface);
    border-radius:var(--radius-md);
    color:var(--color-text);
    box-shadow:var(--shadow-sm);
}



/* ==========================================================
   Код
   ========================================================== */

code,
pre{
    font-family:
        Consolas,
        "Courier New",
        monospace;
}

code{
    padding:2px 6px;
    border-radius:var(--radius-sm);
    background:#eef2ff;
    color:var(--color-primary);
}

pre{
    overflow:auto;
    padding:var(--space-5);
    border-radius:var(--radius-md);
    background:#0f172a;
    color:#fff;
}



/* ==========================================================
   Таблицы
   ========================================================== */

table{
    width:100%;
    margin:var(--space-6) 0;
}

th,
td{
    padding:12px;
    border:1px solid var(--color-border);
    text-align:left;
}

th{
    background:var(--color-background);
    color:var(--color-secondary);
    font-weight:var(--font-semibold);
}



/* ==========================================================
   Горизонтальная линия
   ========================================================== */

hr{
    margin:var(--space-10) 0;
    border-top:1px solid var(--color-border);
}



/* ==========================================================
   Общие текстовые классы
   ========================================================== */

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

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

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

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

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

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

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

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



/* ==========================================================
   Заголовки секций
   ========================================================== */

.section-header{
    max-width:760px;
    margin:0 auto var(--space-12);
    text-align:center;
}

.section-header h2{
    margin-bottom:var(--space-4);
}

.section-header p{
    font-size:var(--font-size-lg);
    color:var(--color-text-light);
}



/* ==========================================================
   Адаптивная типографика
   ========================================================== */

@media (max-width:992px){

    h1{
        font-size:2.5rem;
    }

    h2{
        font-size:2rem;
    }

    h3{
        font-size:1.5rem;
    }

}

@media (max-width:768px){

    html{
        font-size:15px;
    }

    h1{
        font-size:2rem;
    }

    h2{
        font-size:1.75rem;
    }

    h3{
        font-size:1.35rem;
    }

    .section-header{
        margin-bottom:var(--space-8);
    }

}

@media (max-width:480px){

    html{
        font-size:14px;
    }

    h1{
        font-size:1.8rem;
    }

    h2{
        font-size:1.5rem;
    }

}