/* ───────────────────────── Base ─────────────────────────
 * The fonts apply to every theme, the high-contrast ones included; colours only to the Raya themes.
 *
 * English pages: Inter for Latin text, Yekan Bakh for any Persian in it.
 * Persian pages: Inter for Latin letters only («InterLetters»); digits, punctuation, spaces and Persian text in
 * YekanBakhFaNum, so numbers read as Persian digits like in the design system.
 * What people type or copy (inputs, code) keeps Latin digits: Inter, then Yekan Bakh.
 */
body[data-themes] {
	--ds-font-sans: "Inter", "YekanBakh", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
	--ds-font-fa: "InterLetters", "YekanBakhFaNum", "YekanBakh", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
	--ds-font-input: "Inter", "YekanBakh", ui-sans-serif, system-ui, sans-serif;
	--ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--font-face: var(--ds-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body[data-themes]:lang(fa) {
	--font-face: var(--ds-font-fa);
}

body[data-themes] :is(input, textarea, select) {
	font-family: var(--ds-font-input);
}
/* File names are data, not UI text: Latin digits («mp4», not «mp۴»). The name is inside a button, which sets
   font-family: var(--font-face) itself, so the variable is redefined too. */
body[data-themes] :is(.files-list__row-name, .file-picker__name-container, .files-list__row-name-text, .file-preview .name-container, .file-preview__name, .recommendation .file-name, .files-list__breadcrumbs .vue-crumb, .app-files .app-sidebar-header__mainname) {
	--font-face: var(--ds-font-input);
	font-family: var(--ds-font-input);
}
body[data-themes] :is(code, kbd, samp, pre) {
	font-family: var(--ds-font-mono);
}

body[data-themes] :is(h1, h2, h3, h4, h5, h6) {
	letter-spacing: -0.01em;
}

/* ───────── Raya themes only ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) ::selection {
	background-color: color-mix(in srgb, var(--ds-primary) 22%, transparent);
	color: inherit;
}

/* Scrollbars: thin, no track, a soft thumb that firms up while the pointer is over the area (design system) */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) {
	--ds-scrollbar-thumb: color-mix(in srgb, var(--ds-muted-foreground) 30%, transparent);
	--ds-scrollbar-thumb-hover: color-mix(in srgb, var(--ds-muted-foreground) 55%, transparent);
}
@supports (scrollbar-color: auto) {
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) * {
		scrollbar-width: thin;
		scrollbar-color: var(--ds-scrollbar-thumb) transparent;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) *:hover {
		scrollbar-color: var(--ds-scrollbar-thumb-hover) transparent;
	}
}