/* Typography scale - compact, desktop-like.
   Font family is selected from html[lang] so every control inherits it. */
html[lang="ar"] {
    --app-font-family: var(--font-arabic);
}

html[lang="en"] {
    --app-font-family: var(--font-english);
}

html,
html body {
    font-family: var(--app-font-family);
}

body {
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
    background: var(--color-background-app);
}

button,
input,
textarea,
select,
optgroup,
option,
.menu,
.toast,
.app-modal,
.app-field__label,
.app-field__error {
    font-family: inherit;
}

.page-title {
    font-size: var(--font-size-page-title);
    font-weight: 600;
    color: var(--color-text-primary);
}

.section-title {
    font-size: var(--font-size-section-title);
    font-weight: 600;
    color: var(--color-text-primary);
}

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

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