/* Central typography tokens — LTR uses Inter; RTL (Arabic) uses Cairo. */

:root {
  --cr-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cr-font-arabic: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[dir="rtl"] {
  --cr-font-sans: var(--cr-font-arabic);
  --bs-font-sans-serif: var(--cr-font-arabic);
  --bs-body-font-family: var(--cr-font-arabic);
  --bs-btn-font-family: var(--cr-font-arabic);
}

html[dir="rtl"] body {
  font-family: var(--cr-font-arabic);
}

html[dir="rtl"] .office-app {
  --od-font: var(--cr-font-arabic);
}

html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .btn,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .modal,
html[dir="rtl"] .modal-content,
html[dir="rtl"] .alert,
html[dir="rtl"] .tooltip,
html[dir="rtl"] .pagination,
html[dir="rtl"] .table,
html[dir="rtl"] .card,
html[dir="rtl"] .navbar,
html[dir="rtl"] .accordion,
html[dir="rtl"] .invalid-feedback,
html[dir="rtl"] .valid-feedback,
html[dir="rtl"] .form-text,
html[dir="rtl"] .popover,
html[dir="rtl"] .toast,
html[dir="rtl"] .list-group,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .badge,
html[dir="rtl"] .nav,
html[dir="rtl"] .offcanvas {
  font-family: inherit;
}

/* ── RTL text alignment (Arabic) ───────────────────────── */

html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] .form-label,
html[dir="rtl"] label:not(.btn):not(.form-check-label),
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] textarea,
html[dir="rtl"] .form-text,
html[dir="rtl"] .invalid-feedback,
html[dir="rtl"] .valid-feedback,
html[dir="rtl"] .accordion-body,
html[dir="rtl"] .accordion-button,
html[dir="rtl"] .dropdown-item,
html[dir="rtl"] .dropdown-header,
html[dir="rtl"] .modal-title,
html[dir="rtl"] .modal-body,
html[dir="rtl"] .alert,
html[dir="rtl"] .card-body,
html[dir="rtl"] .card-header,
html[dir="rtl"] .card-title,
html[dir="rtl"] .card-text,
html[dir="rtl"] .list-group-item,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .offcanvas-title,
html[dir="rtl"] .offcanvas-body,
html[dir="rtl"] .toast-body,
html[dir="rtl"] .popover-body,
html[dir="rtl"] .table th,
html[dir="rtl"] .table td,
html[dir="rtl"] .page-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .content-title {
  text-align: right;
}