/* ============================================================================
   VDM - Persoenliche Anzeige: Schriftbild
   ----------------------------------------------------------------------------
   Gewaehlt unter "Mein Konto" > Darstellung, gesetzt von vdm-anzeige.js als
   Attribut data-vdm-font am <html>-Element. Ohne Attribut gilt die Typografie des
   jeweiligen Schemas unveraendert ("Standard").

   Wird in App.razor NACH allen Schema-Stylesheets eingebunden: Stahl und Papier
   setzen --vdm-font-body/-display/-mono auf html[data-vdm-palette...] mit gleicher
   Spezifitaet, hier gewinnt die spaetere Regel.

   Die Schriften kommen ueber Google Fonts (App.razor). Faellt das aus, greifen die
   Ersatzstapel und die Oberflaeche bleibt benutzbar.

   Schriftgroesse: nicht hier, sondern ueber den SizeManager (--global-size).
   ========================================================================== */

/* Klar: Inter, neutral und gut lesbar; Zahlen mit Tabellenziffern */
html[data-vdm-font="klar"] {
    --vdm-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --vdm-font-body: var(--vdm-font-family);
    --vdm-font-display: var(--vdm-font-family);
    --vdm-font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
    font-feature-settings: "tnum" 1, "cv11" 1;
}

html[data-vdm-font="plex"] {
    --vdm-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --vdm-font-body: var(--vdm-font-family);
    --vdm-font-display: var(--vdm-font-family);
    --vdm-font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
}

/* Segoe: die Windows-Systemschrift (Segoe UI Variable), ruhig und gut lesbar. Nur auf Windows 11 mit Variable-Schrift vorhanden,
   sonst greift Segoe UI bzw. die Systemschrift; es wird nichts geladen. Zahlen mit Tabellenziffern. */
html[data-vdm-font="segoe"] {
    --vdm-font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --vdm-font-body: var(--vdm-font-family);
    --vdm-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --vdm-font-mono: "Cascadia Mono", Consolas, "IBM Plex Mono", monospace;
    font-feature-settings: "tnum" 1;
}

/* Schmal: schmale Ueberschriften (Betriebsbeschilderung), ruhiger Fliesstext */
html[data-vdm-font="schmal"] {
    --vdm-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --vdm-font-body: var(--vdm-font-family);
    --vdm-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --vdm-font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
}

html[data-vdm-font="grotesk"] {
    --vdm-font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --vdm-font-body: var(--vdm-font-family);
    --vdm-font-display: var(--vdm-font-family);
    --vdm-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

/* Mono: durchgehend Festbreite, Terminal-Anmutung */
html[data-vdm-font="mono"] {
    --vdm-font-family: "JetBrains Mono", "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
    --vdm-font-body: var(--vdm-font-family);
    --vdm-font-display: var(--vdm-font-family);
    --vdm-font-mono: var(--vdm-font-family);
}

/* Fliesstext und Steuerelemente: --vdm-font-family wirkt ueber site.css auf body, Buttons,
   Eingaben und DevExpress-Steuerelemente. Die Schemata Stahl/Papier setzen den Fliesstext
   ueber --vdm-font-body und die Ueberschriften ueber --vdm-font-display - beides hier nachziehen. */
html[data-vdm-font] body {
    font-family: var(--vdm-font-body);
}

html[data-vdm-font] h1,
html[data-vdm-font] h2,
html[data-vdm-font] h3,
html[data-vdm-font] .page-title,
html[data-vdm-font] .entity-page-title {
    font-family: var(--vdm-font-display);
}

html[data-vdm-font] code,
html[data-vdm-font] kbd,
html[data-vdm-font] .vdm-kennzahl,
html[data-vdm-font] .vdm-code {
    font-family: var(--vdm-font-mono);
}