/* Element Web — Persian font (Vazirmatn RD v33.003, SIL OFL 1.1, https://github.com/rastikerdar/vazirmatn).
 * Docs: docs/01-element/02-stack.md. Injected by nginx (templates/nginx/conf.d/element.conf).
 * Keep this file plain CSS, no @import. */

/* 1) Full Vazirmatn — message bodies and the composers render every glyph (Latin too)
 *    with it, as they have since 2026-04. Real weights instead of synthetic bold. */
@font-face { font-family: 'Vazirmatn'; src: url('/custom/fonts/Vazirmatn.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/custom/fonts/Vazirmatn-RD-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/custom/fonts/Vazirmatn-RD-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/custom/fonts/Vazirmatn-RD-Bold.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; }

/* 2) "Vazirmatn FA" — same files, but only for Arabic-script code points (Persian letters,
 *    digits ۰-۹, ، ؛ ؟, ZWNJ/ZWJ, presentation forms). Put first in every font stack, so
 *    Persian text anywhere in the UI gets Vazirmatn while Latin UI text stays Inter. */
@font-face { font-family: 'Vazirmatn FA'; src: url('/custom/fonts/Vazirmatn.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Vazirmatn FA'; src: url('/custom/fonts/Vazirmatn-RD-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Vazirmatn FA'; src: url('/custom/fonts/Vazirmatn-RD-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Vazirmatn FA'; src: url('/custom/fonts/Vazirmatn-RD-Bold.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }

/* 3) Global: Element/Compound components set `font: var(--cpd-font-...)`, which resolves
 *    through these two tokens — so prefixing them reaches every input, button, dialog,
 *    room name, thread summary, search box… The rest is Element 1.12's own stack. */
:root, [class^="cpd-theme"], [class*=" cpd-theme"] {
  --cpd-font-family-sans: 'Vazirmatn FA', "Inter", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji" !important;
  --cpd-font-family-mono: 'Vazirmatn FA', "Inconsolata", ui-monospace, monospace !important;
}
/* Code: Element hard-codes a "Fira Code" stack (not the token) with !important inside
 * `@layer app-web`. A layered !important beats any unlayered one, and for !important the
 * EARLIEST layer wins — so this rule goes into Element's first layer, compound-tokens.
 * Latin code keeps Fira Code; only Arabic-script glyphs switch to Vazirmatn. */
@layer compound-tokens {
  code, pre {
    font-family: 'Vazirmatn FA', "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji" !important;
  }
}

/* 4) Message bodies + composers: full Vazirmatn, so what you type looks like what you send. */
body, .mx_MatrixChat, .mx_RoomView, .mx_EventTile_body, .mx_BasicMessageComposer_input {
  font-family: 'Vazirmatn', 'Tahoma', 'Arial', sans-serif !important;
}

/* Improve Persian readability */
.mx_MessageBody {
  direction: rtl;
  text-align: right;
}

/* Composer typing direction */
.mx_BasicMessageComposer_input {
  direction: rtl;
  text-align: right;
}