/* Единая типографическая основа интерфейса Echo Distribution. */
:root {
    --font-family-base: "Onest", "Segoe UI", Arial, sans-serif;
    --font-size-body: 15px;
    --line-height-body: 1.5;
    --font-size-caption: 12px;
    --line-height-caption: 1.4;
    --line-height-heading: 1.25;

    /* Компактная иерархия заголовков интерфейса. */
    --font-size-page-title: 30px;
    --line-height-page-title: 1.2;
    --font-weight-page-title: 700;

    --font-size-section-title: 23px;
    --line-height-section-title: 1.25;
    --font-weight-section-title: 600;

    --font-size-card-title: 19px;
    --line-height-card-title: 1.3;
    --font-weight-card-title: 600;

    --font-size-small-heading: 17px;
    --line-height-small-heading: 1.35;
    --font-weight-small-heading: 600;
}

html,
body,
button,
input,
select,
textarea,
option,
optgroup,
table,
th,
td,
.font-sans,
.font-mono {
    font-family: var(--font-family-base);
}

body {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
.btn,
[role="button"] {
    line-height: 1.2;
}

button > :is(svg, .app-icon),
.btn > :is(svg, .app-icon),
[role="button"] > :is(svg, .app-icon) {
    display: block;
    flex: 0 0 auto;
}

input,
textarea,
select,
.form-input,
.form-select {
    line-height: 1.4;
}

.form-label,
.text-xs,
.text-caption {
    line-height: var(--line-height-caption);
}

h1,
h1[class*="text-"],
h1[class*="font-"],
.page-title,
.dashboard-title {
    font-size: var(--font-size-page-title);
    font-weight: var(--font-weight-page-title);
    line-height: var(--line-height-page-title);
    letter-spacing: -0.01em;
}

h2,
h2[class*="text-"],
h2[class*="font-"],
.section-title {
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-section-title);
    line-height: var(--line-height-section-title);
    letter-spacing: -0.008em;
}

h3,
h3[class*="text-"],
h3[class*="font-"],
.card-title {
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-card-title);
    line-height: var(--line-height-card-title);
    letter-spacing: -0.005em;
}

h4,
h5,
h6,
.small-section-title {
    font-size: var(--font-size-small-heading);
    font-weight: var(--font-weight-small-heading);
    line-height: var(--line-height-small-heading);
}

/* Шапки страниц рассчитаны на новую, более компактную типографику. */
.page-header {
    padding: 24px 28px;
    margin-bottom: 28px;
}

.page-header .page-title {
    margin: 0;
}

.page-header :is(.page-subtitle, .page-title + p) {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
}

@media (max-width: 640px) {
    :root {
        --font-size-body: 14px;
        --font-size-page-title: 26px;
        --font-size-section-title: 21px;
        --font-size-card-title: 18px;
        --font-size-small-heading: 16px;
    }

    .page-header {
        padding: 20px;
        margin-bottom: 24px;
    }
}