:root {
    --fs-caption: .8rem;
    --fs-small:   .875rem;
    --fs-body:    1rem;
    --fs-read:    1.125rem;
    --fs-lead:    1.25rem;
    --fs-h4:      1.5rem;
    --fs-h3:      1.75rem;
    --fs-h2:      2rem;
    --fs-h1:      2.5rem;

    --measure: 36em;
}

html[lang^="ar"] {
    --fs-caption: .875rem;
    --fs-small:   .95rem;
    --fs-body:    1.05rem;
    --fs-read:    1.25rem;
    --fs-lead:    1.375rem;
    --fs-h4:      1.625rem;
    --fs-h3:      1.875rem;
    --fs-h2:      2.125rem;
    --fs-h1:      2.5rem;
}

html[lang^="ar"] body { font-size: var(--fs-read); line-height: 1.9; }

html[lang^="ar"] h1, html[lang^="ar"] .h1 { font-size: var(--fs-h1); line-height: 1.3; }
html[lang^="ar"] h2, html[lang^="ar"] .h2 { font-size: var(--fs-h2); line-height: 1.4; }
html[lang^="ar"] h3, html[lang^="ar"] .h3 { font-size: var(--fs-h3); line-height: 1.45; }
html[lang^="ar"] h4, html[lang^="ar"] .h4 { font-size: var(--fs-h4); line-height: 1.5; }
html[lang^="ar"] h5, html[lang^="ar"] .h5 { font-size: var(--fs-lead); line-height: 1.6; }
html[lang^="ar"] h6, html[lang^="ar"] .h6 { font-size: var(--fs-body); line-height: 1.6; }

html[lang^="ar"] .btn,
html[lang^="ar"] .form-control,
html[lang^="ar"] .form-select,
html[lang^="ar"] .dropdown-item,
html[lang^="ar"] .nav-link { font-size: var(--fs-body); }
html[lang^="ar"] .navbar-dark .navbar-nav .nav-link { font-size: var(--fs-lead); }
html[lang^="ar"] .btn-sm { font-size: var(--fs-small); }
html[lang^="ar"] .btn-lg { font-size: var(--fs-lead); }
html[lang^="ar"] .form-label,
html[lang^="ar"] small, html[lang^="ar"] .small { font-size: var(--fs-small); }

html[lang^="ar"] .card-header { font-size: var(--fs-h4); }
html[lang^="ar"] .nav-tabs .nav-link { font-size: var(--fs-body); }
html[lang^="ar"] .table { font-size: var(--fs-body); }
html[lang^="ar"] .badge { font-size: var(--fs-caption); }
html[lang^="ar"] .breadcrumb,
html[lang^="ar"] footer,
html[lang^="ar"] .tooltip.tip .tooltip-inner { font-size: var(--fs-small); }

html[lang^="en"] body { font-size: var(--fs-body); line-height: 1.5; }

html[lang^="en"] h1, html[lang^="en"] .h1 { font-size: var(--fs-h1); line-height: 1.15; }
html[lang^="en"] h2, html[lang^="en"] .h2 { font-size: var(--fs-h2); line-height: 1.2; }
html[lang^="en"] h3, html[lang^="en"] .h3 { font-size: var(--fs-h3); line-height: 1.25; }
html[lang^="en"] h4, html[lang^="en"] .h4 { font-size: var(--fs-h4); line-height: 1.3; }
html[lang^="en"] h5, html[lang^="en"] .h5 { font-size: var(--fs-lead); line-height: 1.4; }
html[lang^="en"] h6, html[lang^="en"] .h6 { font-size: var(--fs-body); line-height: 1.4; }

html[lang^="en"] .btn,
html[lang^="en"] .form-control,
html[lang^="en"] .form-select,
html[lang^="en"] .dropdown-item,
html[lang^="en"] .nav-link { font-size: var(--fs-body); }
html[lang^="en"] .navbar-dark .navbar-nav .nav-link { font-size: var(--fs-lead); }
html[lang^="en"] .btn-sm { font-size: var(--fs-small); }
html[lang^="en"] .btn-lg { font-size: var(--fs-lead); }
html[lang^="en"] .form-label,
html[lang^="en"] small, html[lang^="en"] .small { font-size: var(--fs-small); }

html[lang^="en"] .card-header { font-size: var(--fs-h4); }
html[lang^="en"] .nav-tabs .nav-link { font-size: var(--fs-body); }
html[lang^="en"] .table { font-size: var(--fs-body); }
html[lang^="en"] .w-group { font-size: var(--fs-lead); }
html[lang^="en"] .breadcrumb,
html[lang^="en"] footer,
html[lang^="en"] .tooltip.tip .tooltip-inner { font-size: var(--fs-small); }