/* ServiceNext – Gestaltungs-Tokens (Stand 30.10.2026, aus docs/screens/design-system.dc.html).
   Einzige Stelle für Farben, Schrift, Abstände und Radien. Seiten verwenden nur diese Variablen. */
/* Schriften: IBM Plex Sans und Mono (SIL Open Font License 1.1, crates/servicenext/static/fonts/OFL.txt),
   von der Anwendung selbst ausgeliefert (WP16), keine fremden Quellen. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/IBMPlexSans-Italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/IBMPlexSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }

:root {
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --color-ground: #F5F6F8;
  --color-surface: #FFFFFF;
  --color-line: #DDE1E6;
  --color-line-strong: #C6CDD5;
  --color-input-border: #8A96A3;
  --color-text: #16202B;
  --color-text-muted: #4A5563;
  --color-text-subtle: #5F6B7A;
  --color-accent: #0F5FA6;
  --color-accent-strong: #0A4A82;
  --color-accent-soft: #E6F0FA;
  --color-topbar: #16202B;
  --color-warning: #93370D;
  --color-warning-soft: #FEF0E1;
  --color-danger: #B42318;
  --color-danger-soft: #FDECEA;
  --color-success: #2E6B3A;
  --color-success-soft: #E7F4EA;
  --color-note: #FFF7E0;          /* interne Notiz */
  --color-note-line: #F3D58A;
  --color-note-text: #7A4A00;
  --color-ai-line: #8FB3D9;       /* KI-Vorschlag, gestrichelt */
  --color-bar-off: #C9D0D9;       /* Prioritätsbalken inaktiv */
  --color-ground-alt: #F9FAFB;    /* Tabellenkopf, Feldgruppen */
  --color-line-soft: #EEF0F3;     /* Trennlinien in Listen */
  --color-track: #EEF1F5;         /* Fortschrittsbalken, Hintergrund */

  /* Dunkle Kopfzeile der Agentenansicht (WP7, Werte aus agent-home.dc.html) */
  --color-topbar-text: #FFFFFF;
  --color-topbar-muted: #C4CCD6;
  --color-topbar-field: #26323F;
  --color-topbar-line: #4A5866;
  --color-topbar-mark: #7FB8EE;   /* Zeichen, Profil */
  --color-topbar-action: #2A74C2; /* Schaltfläche „Neu“; Entwurf #2F7FD1 hatte mit Weiß nur 4,1:1 */
  --color-badge: #F79009;         /* Zähler der Glocke */
  --color-badge-text: #16202B;

  --priority-critical-fg: #B42318; --priority-critical-bg: #FDECEA;
  --priority-high-fg: #93370D;     --priority-high-bg: #FEF0E1;
  --priority-medium-fg: #344054;   --priority-medium-bg: #EEF1F5;
  --priority-low-fg: #475467;      --priority-low-bg: #FFFFFF;

  --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-portal: 16px;
  --text-h3: 16px; --text-h2: 22px; --text-h1: 30px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px;
  --target-min: 44px;
}

/* Dunkel: erster Vorschlag, Kontraste mit echten Seiten prüfen [to be confirmed] */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ground: #0F161E; --color-surface: #17212B; --color-line: #2A3642; --color-line-strong: #3A4754;
    --color-input-border: #5B6876; --color-text: #E6EAEF; --color-text-muted: #A4AFBB; --color-text-subtle: #8D99A6;
    --color-accent: #6AAEF0; --color-accent-strong: #9CCAF5; --color-accent-soft: #163552; --color-topbar: #0B1117;
    --color-warning: #F5A25D; --color-danger: #F28B82; --color-success: #7CC48D;
    --color-ground-alt: #1B2631; --color-line-soft: #24303B; --color-track: #24303B; --color-topbar-field: #1C2732;
    /* WP7: helle Flächen für das dunkle Design, damit Text darauf lesbar bleibt [to be confirmed] */
    --color-danger-soft: #3A1D1B; --color-warning-soft: #3A2A17; --color-success-soft: #1A3322;
    --color-note: #332B14; --color-note-line: #7A6420; --color-note-text: #F3D58A; --color-bar-off: #3A4754;
    --priority-critical-fg: #F28B82; --priority-critical-bg: #3A1D1B;
    --priority-high-fg: #F5A25D;     --priority-high-bg: #3A2A17;
    --priority-medium-fg: #C4CCD6;   --priority-medium-bg: #24303B;
    --priority-low-fg: #A4AFBB;      --priority-low-bg: #17212B;
  }
}
:root[data-theme="dark"] {
  --color-ground: #0F161E; --color-surface: #17212B; --color-line: #2A3642; --color-line-strong: #3A4754;
  --color-input-border: #5B6876; --color-text: #E6EAEF; --color-text-muted: #A4AFBB; --color-text-subtle: #8D99A6;
  --color-accent: #6AAEF0; --color-accent-strong: #9CCAF5; --color-accent-soft: #163552; --color-topbar: #0B1117;
  --color-warning: #F5A25D; --color-danger: #F28B82; --color-success: #7CC48D;
  --color-ground-alt: #1B2631; --color-line-soft: #24303B; --color-track: #24303B; --color-topbar-field: #1C2732;
  /* WP7: helle Flächen für das dunkle Design, damit Text darauf lesbar bleibt [to be confirmed] */
  --color-danger-soft: #3A1D1B; --color-warning-soft: #3A2A17; --color-success-soft: #1A3322;
  --color-note: #332B14; --color-note-line: #7A6420; --color-note-text: #F3D58A; --color-bar-off: #3A4754;
  --priority-critical-fg: #F28B82; --priority-critical-bg: #3A1D1B;
  --priority-high-fg: #F5A25D;     --priority-high-bg: #3A2A17;
  --priority-medium-fg: #C4CCD6;   --priority-medium-bg: #24303B;
  --priority-low-fg: #A4AFBB;      --priority-low-bg: #17212B;
}