@import url("np-ui-komponenten.css");
@import url("np-touchziele.css");
@import url("np-ui-formulare.css");
/* @import steht bewusst zuerst: CSS verlangt das. Die Komponenten
 * nutzen die Tokens nur per var(), deshalb ist die Ladereihenfolge
 * gleichgueltig - die Definition unten greift trotzdem. */

/* NordPrax · gemeinsames UI-Paket (np-ui) · Stufe 1 des Auftrags vom 30.07.2026
 *
 * EIN Paket für Anmeldung, Hub, Verwaltung und alle 30 Eigenentwicklungen.
 * Werkzeuge KONFIGURIEREN diese Komponenten - sie bauen sie nicht nach.
 * Tokenwerte wörtlich aus der verbindlichen Vorgabe (Datei 14/17, Validierung
 * 2026-07-30: dunkel Text/Seite 15,2:1 · hell 17,3:1).
 *
 * Reihenfolge der Themes ist Absicht: dunkel ist Standard, data-theme gewinnt
 * in beide Richtungen, die Systemabfrage gilt NUR ohne Attribut. Die Falle
 * `html:not([data-theme=dark])` außerhalb einer media query hat am 30.07.
 * "Datei"/"Vorschau" unbedienbar wirken lassen - nie wiederholen.
 */

:root,
:root[data-theme="dark"] {
  --np-page: #0d171d;
  --np-surface: #142129;
  --np-surface-raised: #17272e;
  --np-input: #0f1a20;
  --np-text: #e5ecef;
  --np-text-muted: #aab8be;
  --np-border: #344852;
  --np-border-strong: #5d747e;
  --np-navy: #102d3e;
  --np-primary: #4fc0b6;
  --np-primary-ink: #09151c;
  --np-danger: #ffb3b0;
  --np-danger-bg: #4a2427;
  --np-ok: #9ce0ba;
  --np-ok-bg: #173d2d;
  --np-warn: #ffd792;
  --np-warn-bg: #4a361c;
  --np-shadow-surface: 0 7px 20px rgba(0, 0, 0, .32);
  --np-shadow-strong: 0 14px 36px rgba(0, 0, 0, .48);
  --np-focus: 0 0 0 3px rgba(79, 192, 182, .34);
}

:root[data-theme="light"] {
  --np-page: #eef2f3;
  --np-surface: #ffffff;
  --np-surface-raised: #f7f9fa;
  --np-input: #ffffff;
  --np-text: #101c23;
  --np-text-muted: #4f6069;
  --np-border: #bcc9ce;
  --np-border-strong: #7f9099;
  --np-navy: #0b2939;
  --np-primary: #006f69;
  --np-primary-ink: #ffffff;
  --np-danger: #a63d3b;
  --np-danger-bg: #fbe7e6;
  --np-ok: #16704b;
  --np-ok-bg: #dff4e8;
  --np-warn: #9a5e0b;
  --np-warn-bg: #fff0d9;
  --np-shadow-surface: 0 6px 18px rgba(16, 28, 35, .13);
  --np-shadow-strong: 0 16px 38px rgba(16, 28, 35, .22);
  --np-focus: 0 0 0 3px rgba(0, 111, 105, .25);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --np-page: #eef2f3;
    --np-surface: #ffffff;
    --np-surface-raised: #f7f9fa;
    --np-input: #ffffff;
    --np-text: #101c23;
    --np-text-muted: #4f6069;
    --np-border: #bcc9ce;
    --np-border-strong: #7f9099;
    --np-navy: #0b2939;
    --np-primary: #006f69;
    --np-primary-ink: #ffffff;
    --np-danger: #a63d3b;
    --np-danger-bg: #fbe7e6;
    --np-ok: #16704b;
    --np-ok-bg: #dff4e8;
    --np-warn: #9a5e0b;
    --np-warn-bg: #fff0d9;
    --np-shadow-surface: 0 6px 18px rgba(16, 28, 35, .13);
    --np-shadow-strong: 0 16px 38px rgba(16, 28, 35, .22);
    --np-focus: 0 0 0 3px rgba(0, 111, 105, .25);
  }
}