/* ============================================================================
   VDM – Schemata "Papier" (hell) und "Tinte" (dunkel): Typografie, Radien,
   Aktionsflaechen
   ----------------------------------------------------------------------------
   Formensprache aus dem Fuhrpark-Zielbild vom 2026-09-02
   (docs/ui/fuhrpark-mockup/LEITIDEEN.md, Abschnitt "Ohne Vorlage"; Entscheidung in
   docs/Migration/03_fuhrpark/zielbild.md, "Zielbild Oberflaeche"):

     Space Grotesk   Text und Ueberschriften — ruhige Groteske mit Charakter
     JetBrains Mono  Zahlen, Kennzeichen, Uhrzeiten, Codes — Tabellenziffern

   Papierton statt Weiss, Tinte statt Grau, Linien statt Kaesten, Radien 3 px,
   keine Schatten. Farbe nur mit Bedeutung: Rot ueberfaellig/defekt, Bernstein
   bald, Gruen in Ordnung, Blau im Einsatz. Der Akzent traegt wenig (Heute-Linie,
   aktueller Schritt, Links).

   Es gibt zwei Paletten: "papier" reitet auf dem hellen Standardschema,
   "tinte" auf dem Schema "Metall" (wie Stahl: dort greifen die rund 2.700
   variablenbasierten Dunkelregeln der Seiten-Stylesheets). Die Farbwerte stehen
   in vdm-styles.css; hier steht, was in beiden Paletten gleich ist.

   Wird in App.razor NACH vdm-styles.css eingebunden. Schriften ueber Google
   Fonts (wie beim Schema Stahl); faellt das aus, greifen die Ersatzstapel.
   ============================================================================ */

/* ---------- Aktionsflaechen: "Tinte" als eigener Token ----------
   Knoepfe, Auswahlleisten und gefuellte Schalter tragen im Zielbild nicht den
   Akzent, sondern Tinte auf Papier. Damit die Fuhrpark-Seiten das schreiben
   koennen, ohne je Schema zu unterscheiden, gibt es zwei Tokens mit einem
   Standard fuer ALLE Schemata (Tinte = kraeftiger Text, darauf = Grund) und
   Ueberschreibungen je Palette. Spaeter kann der Anwender --vdm-ink aus einer
   kuratierten Liste waehlen; die Kandidaten muessen weisse Schrift tragen. */
html {
    --vdm-ink: var(--vdm-text-strong, #0f172a);
    --vdm-on-ink: var(--vdm-surface-app, #ffffff);
}

html[data-vdm-palette="papier"],
html[data-vdm-palette="tinte"] {
    --vdm-font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --vdm-font-body: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --vdm-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
    /* site.css setzt die Schrift auf body, Knoepfe und Eingaben mit !important ueber
       --vdm-font-family. Statt dagegen anzukaempfen, wird die Variable hier umgebogen:
       so greift dieselbe Regel und traegt Space Grotesk. (Stahl hat diese Bruecke nicht
       und faellt deshalb dort auf Inter zurueck - eigener Befund, hier nicht geaendert.) */
    --vdm-font-family: var(--vdm-font-body);

    --vdm-radius-card: 3px;
    --vdm-radius-sm: 3px;
    /* Kaum Schatten: die Flaeche wird durch die Haarlinie begrenzt, nicht durch Tiefe. */
    --vdm-shadow-card: none;
    --vdm-focus-ring: var(--primary-50);
}

/* ---------- Fliesstext ---------- */
html[data-vdm-palette="papier"] body,
html[data-vdm-palette="tinte"] body {
    font-family: var(--vdm-font-body);
    font-size: 0.93333rem;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Ueberschriften: eng, kraeftig, ohne Versalien ---------- */
html[data-vdm-palette="papier"] h1,
html[data-vdm-palette="tinte"] h1,
html[data-vdm-palette="papier"] h2,
html[data-vdm-palette="tinte"] h2,
html[data-vdm-palette="papier"] h3,
html[data-vdm-palette="tinte"] h3,
html[data-vdm-palette="papier"] .page-title,
html[data-vdm-palette="tinte"] .page-title,
html[data-vdm-palette="papier"] .entity-page-title,
html[data-vdm-palette="tinte"] .entity-page-title {
    font-family: var(--vdm-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

html[data-vdm-palette="papier"] h1,
html[data-vdm-palette="tinte"] h1,
html[data-vdm-palette="papier"] .page-title,
html[data-vdm-palette="tinte"] .page-title {
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.1;
}

/* ---------- Zahlen: Tabellenziffern, Mono in Grids ---------- */
html[data-vdm-palette="papier"] table,
html[data-vdm-palette="tinte"] table,
html[data-vdm-palette="papier"] .dxbl-grid,
html[data-vdm-palette="tinte"] .dxbl-grid,
html[data-vdm-palette="papier"] input[type="number"],
html[data-vdm-palette="tinte"] input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* Kopfzeilen von Tabellen als ruhige Beschriftung: klein, Versalien, gesperrt */
html[data-vdm-palette="papier"] th,
html[data-vdm-palette="tinte"] th,
html[data-vdm-palette="papier"] .dxbl-grid-header-content,
html[data-vdm-palette="tinte"] .dxbl-grid-header-content {
    font-family: var(--vdm-font-body);
    font-size: 0.73333rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- Kennzeichen, Codes, Kennzahlen, Uhrzeiten ---------- */
html[data-vdm-palette="papier"] code,
html[data-vdm-palette="tinte"] code,
html[data-vdm-palette="papier"] kbd,
html[data-vdm-palette="tinte"] kbd,
html[data-vdm-palette="papier"] .vdm-kennzahl,
html[data-vdm-palette="tinte"] .vdm-kennzahl,
html[data-vdm-palette="papier"] .vdm-code,
html[data-vdm-palette="tinte"] .vdm-code,
html[data-vdm-palette="papier"] .vdm-mono,
html[data-vdm-palette="tinte"] .vdm-mono,
html[data-vdm-palette="papier"] .vdm-kennzeichen,
html[data-vdm-palette="tinte"] .vdm-kennzeichen {
    font-family: var(--vdm-font-mono);
    font-variant-numeric: tabular-nums;
}

html[data-vdm-palette="papier"] .vdm-kennzeichen,
html[data-vdm-palette="tinte"] .vdm-kennzeichen {
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---------- Fokus ---------- */
html[data-vdm-palette="papier"] :focus-visible,
html[data-vdm-palette="tinte"] :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Inhaltslinks auf den Akzent der Palette ---------- */
/* Ausgenommen: Kennzeichen-Links und Knopf-Links der neuen Fuhrparkuebersicht (fpn-*) -
   das Kennzeichen ist Tinte, der Knopf traegt seine eigene Farbe. Ebenso Knopf-Links des
   Eventplaners (evp-knopf); gleiche Ausnahme in vdm-metal/-darkteal/-stahl.css. */
html[data-vdm-palette="papier"] a:not(.btn):not(.dxbl-btn):not(.nav-link):not(.vdm-launcher-tile):not(.vdm-brand):not([class*="tab"]):not(.evp-knopf):not([class*="fpn-"]),
html[data-vdm-palette="tinte"] a:not(.btn):not(.dxbl-btn):not(.nav-link):not(.vdm-launcher-tile):not(.vdm-brand):not([class*="tab"]):not(.evp-knopf):not([class*="fpn-"]) {
    color: var(--accent);
}

/* ---------- Primaerknoepfe der Anwendung: Tinte statt Akzent ----------
   Betrifft nur die eigene Klasse vdm-btn-primary, nicht jeden DevExpress-Knopf:
   Formularflaechen bleiben, wie sie sind; die Hauptaktion wird zur Tintenflaeche. */
html[data-vdm-palette="papier"] .vdm-btn-primary.dxbl-btn,
html[data-vdm-palette="tinte"] .vdm-btn-primary.dxbl-btn {
    background: var(--vdm-ink);
    border-color: var(--vdm-ink);
    color: var(--vdm-on-ink);
    border-radius: var(--vdm-radius-sm);
    box-shadow: none;
}

/* ============================================================================
   Menueleiste als Tinte (Entscheidung 03.09.2026).
   Die Leiste hat eigene Tokens (--vdm-nav-*, MainLayout.razor.css). Bei Papier
   soll sie nicht Stahl-Marine bleiben, sondern Tinte auf Papier: schwarz, wie im
   Mockup. Sie haengt an --vdm-ink, damit eine spaeter waehlbare Tintenfarbe die
   Leiste, den Hauptknopf und die Route gemeinsam einfaerbt. Muster wie die
   darkteal/metal-Ueberschreibungen in vdm-styles.css.
   ========================================================================== */
html[data-vdm-palette="papier"] .vdm-topbar-host,
.vdm-style-papier .vdm-topbar-host {
    --vdm-nav-bg: var(--vdm-ink, #16181d);
    --vdm-nav-bg-hover: color-mix(in srgb, var(--vdm-ink, #16181d) 82%, #ffffff);
    --vdm-nav-text: var(--vdm-on-ink, #f4f1ea);
    --vdm-nav-muted: color-mix(in srgb, var(--vdm-on-ink, #f4f1ea) 66%, var(--vdm-ink, #16181d));
    --vdm-nav-accent: #6d94e6;
}

/* Tinte: die Leiste liegt eine Stufe unter dem Papiergrund, nicht auf der Tinte
   (die ist dort hell). Sonst waere die Leiste heller als die Seite. */
html[data-vdm-palette="tinte"] .vdm-topbar-host,
.vdm-style-tinte .vdm-topbar-host {
    --vdm-nav-bg: #0f1114;
    --vdm-nav-bg-hover: #23262c;
    --vdm-nav-text: #ecebe6;
    --vdm-nav-muted: #9a9ea6;
    --vdm-nav-accent: #6d94e6;
}