/* KLIXY interface typography. Shared by Desk, website and standalone apps.
   Only font families change; icon fonts and code/monospace content stay native. */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/assets/klixy_sales/fonts/Cairo-Variable.woff2") format("woff2");
}

:root {
  --klixy-cairo-font: "Cairo", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  /* Cover the existing Desk themes, Frappe UI, Tailwind and Ionic controls. */
  --klixy-font: var(--klixy-cairo-font) !important;
  --ka-font: var(--klixy-cairo-font) !important;
  --kh-font: var(--klixy-cairo-font) !important;
  --font-stack: var(--klixy-cairo-font) !important;
  --font-family-sans-serif: var(--klixy-cairo-font) !important;
  --default-font-family: var(--klixy-cairo-font) !important;
  --heading-font-family: var(--klixy-cairo-font) !important;
  --font-sans: var(--klixy-cairo-font) !important;
  --font-numeric: var(--klixy-cairo-font) !important;
  --ion-font-family: var(--klixy-cairo-font) !important;
  --ion-default-font: var(--klixy-cairo-font) !important;
}

html,
html body,
html .font-sans,
html .font-numeric,
html .font-\[Newsreader\],
html [data-sonner-toaster][data-sonner-toaster],
html #mail-boot,
html .chart-container text,
html .frappe-chart text {
  font-family: var(--klixy-cairo-font) !important;
}

/* Target text controls and headings explicitly; never apply a universal font
   selector, which would replace icon glyphs and editor/code font choices. */
html :is(button, input, textarea, select, optgroup, option,
  h1, h2, h3, h4, h5, h6, .form-control, .ql-editor):not(
  .font-mono, .text-monospace, .fa, .fas, .far, .fab, .fal, .fad,
  .octicon, .octicons, .material-icons, .material-symbols-outlined,
  [class^="fa-"], [class*=" fa-"]
):not(:where(.font-mono *, .text-monospace *, pre *, code *,
  .CodeMirror *, .ace_editor *, .monaco-editor *)) {
  font-family: var(--klixy-cairo-font) !important;
}

/* Careers uses explicit display-serif accents; these are interface text too. */
html body.klixy-careers .careers-orbit-word,
html body.klixy-careers .careers-join-card h2 em,
html body.klixy-careers .careers-section-heading h2 em {
  font-family: var(--klixy-cairo-font) !important;
}

/* The older site theme also marks every textarea/input !important. Preserve
   controls explicitly presented as code instead of inheriting its UI font. */
html :is(input, textarea, button, select):is(.font-mono, .text-monospace) {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace) !important;
}
html :is(.CodeMirror, .ace_editor, .monaco-editor) :is(input, textarea) {
  font-family: inherit !important;
}