/* The user's accessibility font, applied in every design. Neutral: it names no design's typeface of its own.
   A design supplies --font-body / --font-display (Clay: core/designs/clay/type.css, Minimal: core/minimal/base.css,
   a world: its shell.css); the data-font rules below replace them when the person chose OpenDyslexic, Lexend,
   Comic Neue, Atkinson Hyperlegible or Andika, and right-to-left text keeps Vazirmatn. */

/* Low-specificity fallback so a design that defines nothing still has a readable face. */
:where(:root) {
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);
}

[data-font="opendyslexic"] {
  --font-body: 'OpenDyslexic', sans-serif;
  --font-display: 'OpenDyslexic', sans-serif;
}
[data-font="lexend"] {
  --font-body: 'Lexend', sans-serif;
  --font-display: 'Lexend', sans-serif;
}
[data-font="comic_neue"] {
  --font-body: 'Comic Neue', cursive;
  --font-display: 'Comic Neue', cursive;
}
[data-font="atkinson"] {
  --font-body: 'Atkinson Hyperlegible', sans-serif;
  --font-display: 'Atkinson Hyperlegible', sans-serif;
}
[data-font="andika"] {
  --font-body: 'Andika', sans-serif;
  --font-display: 'Andika', sans-serif;
}

/* RTL Font Defaults - MUST come after font preferences to override them */
[dir="rtl"], [dir="rtl"][data-font] {
  --font-body: 'Vazirmatn', tahoma, sans-serif;
  --font-display: 'Vazirmatn', tahoma, cursive;
}

@supports (font-variation-settings: normal) {
  [dir="rtl"], [dir="rtl"][data-font] {
    --font-body: 'Vazirmatn', tahoma, sans-serif;
  }
}

/* Apply the font variables globally */
body {
  font-family: var(--font-body) !important;
}

/* Override all common text elements - EXCLUDING icon fonts */
body h1:not(.material-symbols-outlined):not(.material-icons),
body h2:not(.material-symbols-outlined):not(.material-icons),
body h3:not(.material-symbols-outlined):not(.material-icons),
body h4:not(.material-symbols-outlined):not(.material-icons),
body h5:not(.material-symbols-outlined):not(.material-icons),
body h6:not(.material-symbols-outlined):not(.material-icons),
body p:not(.material-symbols-outlined):not(.material-icons),
body div:not(.material-symbols-outlined):not(.material-icons),
body a:not(.material-symbols-outlined):not(.material-icons),
body li:not(.material-symbols-outlined):not(.material-icons),
body td:not(.material-symbols-outlined):not(.material-icons),
body th:not(.material-symbols-outlined):not(.material-icons),
body label:not(.material-symbols-outlined):not(.material-icons),
body input:not(.material-symbols-outlined):not(.material-icons),
body textarea:not(.material-symbols-outlined):not(.material-icons),
body select:not(.material-symbols-outlined):not(.material-icons),
body option:not(.material-symbols-outlined):not(.material-icons) {
  font-family: var(--font-body) !important;
}

/* Override buttons specifically */
body button:not(.material-symbols-outlined):not(.material-icons),
body .btn:not(.material-symbols-outlined):not(.material-icons),
body [type="button"]:not(.material-symbols-outlined):not(.material-icons),
body [type="submit"]:not(.material-symbols-outlined):not(.material-icons),
body [type="reset"]:not(.material-symbols-outlined):not(.material-icons),
body .clay-btn:not(.material-symbols-outlined):not(.material-icons),
body .button:not(.material-symbols-outlined):not(.material-icons) {
  font-family: var(--font-body) !important;
}

/* Preserve Material Icons font - these MUST use their own font */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
}
.material-icons {
  font-family: 'Material Icons' !important;
}

/* Font utility classes */
.font-body {
  font-family: var(--font-body) !important;
}
.font-display {
  font-family: var(--font-display) !important;
}

/* For non-default fonts, use the selected font for everything */
[data-font="opendyslexic"] .font-display,
[data-font="lexend"] .font-display,
[data-font="comic_neue"] .font-display,
[data-font="atkinson"] .font-display,
[data-font="andika"] .font-display {
  font-family: var(--font-display) !important;
}

/* RTL Override for font-display */
[dir="rtl"] .font-display, [dir="rtl"][data-font] .font-display {
  font-family: var(--font-display) !important;
}