/* ============================================================
   maniac developers GmbH — Design-Tokens
   Gültig für: Schnittstellen-UI (maniacSeller u. a.) und Handbücher
   Version: 1.0.0   Stand: 2026-10-22
   ------------------------------------------------------------
   Präfix --ms- = "maniac system".
   Light ist die Basis, Dark überschreibt nur Werte.
   Komponenten greifen ausschließlich auf Tokens zu, nie auf Hex.
   ============================================================ */

/* Handbuch: Schriften lokal (assets/fonts/, @font-face in style.css) statt Google-Fonts-Import. Sonst unverändert aus maniac-design-guide. */

:root {
  color-scheme: light;

  /* --- Marke: modusunabhängig, nur für Logo, Signets, Druck --- */
  --ms-brand-navy:  #152C3D;
  --ms-brand-blue:  #248DFF;
  --ms-brand-green: #00AA00;

  /* --- Flächen (Light) --- */
  --ms-bg:          #F5F7FA;   /* Seitengrund                       */
  --ms-surface:     #FFFFFF;   /* Karte, Panel, Topbar              */
  --ms-surface-2:   #EDF1F6;   /* Kachel in der Karte, Tabellenkopf */
  --ms-surface-3:   #E2EBF5;   /* Zeile aktiv / ausgewählt          */

  /* --- Linien (Light) --- */
  --ms-border:        #D5DEE7; /* Standard-Trennlinie               */
  --ms-border-strong: #B6C4D1; /* Eingabefeld, Fokusrahmen-Umfeld   */

  /* --- Text (Light) --- */
  --ms-text:        #152C3D;   /* 13,4:1 auf --ms-bg                */
  --ms-text-muted:  #5A7080;   /*  4,8:1 auf --ms-bg                */
  --ms-text-faint:  #7D909E;   /* nur ≥ 18px oder nicht-tragend     */
  --ms-text-invert: #FFFFFF;

  /* --- Interaktion (Light) --- */
  --ms-accent:        #0A62C9; /* Link, Tab aktiv, Fokus — 5,8:1    */
  --ms-accent-weak:   #E8F1FD;
  --ms-accent-visual: #248DFF; /* Icons, Linien, Flächen ≥ 3:1      */
  --ms-focus:         #0A62C9;

  /* --- Aktion: gefüllter Primärbutton --- */
  --ms-action:       #008A00;  /* weiße Schrift → 4,5:1             */
  --ms-action-hover: #007200;

  /* --- Status (Light) --- */
  --ms-success-ink: #0D7A23; --ms-success-bg: #E6F4E9; --ms-success-line: #BFE0C6;
  --ms-warn-ink:    #8A5A10; --ms-warn-bg:    #FDF2E0; --ms-warn-line:    #EFD7AC;
  --ms-danger-ink:  #B3271B; --ms-danger-bg:  #FDECEA; --ms-danger-line:  #F2C4BE;
  --ms-info-ink:    #0A62C9; --ms-info-bg:    #E8F1FD; --ms-info-line:    #C2DBF8;

  /* --- Erhebung --- */
  --ms-shadow-card: 0 1px 2px rgba(21, 44, 61, .06), 0 1px 8px rgba(21, 44, 61, .05);
  --ms-shadow-pop:  0 8px 24px rgba(21, 44, 61, .14);

  /* --- Schrift --- */
  --ms-font-head: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --ms-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ms-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Oberfläche: kompakt, viele Daten pro Bildschirm */
  --ms-ui-xs:   12px;
  --ms-ui-sm:   13px;
  --ms-ui-base: 15px;
  --ms-ui-lg:   17px;
  --ms-ui-h3:   19px;
  --ms-ui-h2:   23px;
  --ms-ui-h1:   30px;

  /* Handbuch: lesen, nicht bedienen */
  --ms-doc-sm:   15px;
  --ms-doc-base: 17px;
  --ms-doc-h4:   19px;
  --ms-doc-h3:   23px;
  --ms-doc-h2:   29px;
  --ms-doc-h1:   40px;

  --ms-lh-tight: 1.15;  /* Überschriften      */
  --ms-lh-ui:    1.45;  /* Oberflächentext    */
  --ms-lh-doc:   1.65;  /* Handbuch-Lauftext  */
  --ms-measure:  68ch;  /* max. Zeilenlänge   */

  /* --- Raster: Vielfache von 4 --- */
  --ms-1: 4px;  --ms-2: 8px;  --ms-3: 12px; --ms-4: 16px;
  --ms-5: 24px; --ms-6: 32px; --ms-7: 48px; --ms-8: 64px;

  /* --- Radien --- */
  --ms-r-control: 4px;   /* Button, Eingabefeld, Badge-Rechteck */
  --ms-r-card:    8px;   /* Karte, Panel, Dialog                */
  --ms-r-pill:    999px; /* Status-Pille, Zähler                */

  --ms-focus-ring: 0 0 0 2px var(--ms-bg), 0 0 0 4px var(--ms-focus);
}

/* Dark: Systemeinstellung, sofern nicht ausdrücklich Light gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ms-bg:        #111D26;
    --ms-surface:   #172631;
    --ms-surface-2: #1F303C;
    --ms-surface-3: #16304A;
    --ms-border:        #2A3F4D;
    --ms-border-strong: #3C5464;
    --ms-text:        #E6EEF2;
    --ms-text-muted:  #93A6B3;
    --ms-text-faint:  #728796;
    --ms-text-invert: #FFFFFF;
    --ms-accent:        #248DFF;
    --ms-accent-weak:   #16304A;
    --ms-accent-visual: #248DFF;
    --ms-focus:         #248DFF;
    --ms-action:       #008A00;
    --ms-action-hover: #00A000;
    --ms-success-ink: #4FBF5E; --ms-success-bg: #12301C; --ms-success-line: #1C4A28;
    --ms-warn-ink:    #F2AE5C; --ms-warn-bg:    #3A2A14; --ms-warn-line:    #5A431F;
    --ms-danger-ink:  #FF8B7E; --ms-danger-bg:  #3A1815; --ms-danger-line:  #5C2721;
    --ms-info-ink:    #248DFF; --ms-info-bg:    #16304A; --ms-info-line:    #22496E;
    --ms-shadow-card: none;
    --ms-shadow-pop:  0 8px 24px rgba(0, 0, 0, .5);
  }
}

/* Dark: ausdrücklich gewählt */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ms-bg:        #111D26;
  --ms-surface:   #172631;
  --ms-surface-2: #1F303C;
  --ms-surface-3: #16304A;
  --ms-border:        #2A3F4D;
  --ms-border-strong: #3C5464;
  --ms-text:        #E6EEF2;
  --ms-text-muted:  #93A6B3;
  --ms-text-faint:  #728796;
  --ms-text-invert: #FFFFFF;
  --ms-accent:        #248DFF;
  --ms-accent-weak:   #16304A;
  --ms-accent-visual: #248DFF;
  --ms-focus:         #248DFF;
  --ms-action:       #008A00;
  --ms-action-hover: #00A000;
  --ms-success-ink: #4FBF5E; --ms-success-bg: #12301C; --ms-success-line: #1C4A28;
  --ms-warn-ink:    #F2AE5C; --ms-warn-bg:    #3A2A14; --ms-warn-line:    #5A431F;
  --ms-danger-ink:  #FF8B7E; --ms-danger-bg:  #3A1815; --ms-danger-line:  #5C2721;
  --ms-info-ink:    #248DFF; --ms-info-bg:    #16304A; --ms-info-line:    #22496E;
  --ms-shadow-card: none;
  --ms-shadow-pop:  0 8px 24px rgba(0, 0, 0, .5);
}

/* ============================================================
   Basis
   ============================================================ */

body {
  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-text);
  font-family: var(--ms-font-body);
  font-size: var(--ms-ui-base);
  line-height: var(--ms-lh-ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .ms-h {
  font-family: var(--ms-font-head);
  font-weight: 600;
  line-height: var(--ms-lh-tight);
  text-wrap: balance;
  margin: 0;
}

:where(a) { color: var(--ms-accent); text-underline-offset: 2px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ms-focus-ring);
  border-radius: var(--ms-r-control);
}

.ms-num { font-variant-numeric: tabular-nums; }
.ms-code { font-family: var(--ms-font-mono); font-size: .92em; }

/* ============================================================
   Komponenten
   ============================================================ */

.ms-topbar {
  display: flex; align-items: center; gap: var(--ms-5);
  height: 52px; padding-inline: var(--ms-4);
  background: var(--ms-surface);
  border-bottom: 1px solid var(--ms-border);
}
.ms-lockup { display: flex; align-items: baseline; gap: var(--ms-2); }
.ms-lockup svg, .ms-lockup img { width: 26px; height: 26px; align-self: center; }
.ms-lockup b {
  font-family: var(--ms-font-head); font-weight: 600;
  font-size: var(--ms-ui-lg); letter-spacing: .01em;
}
.ms-lockup span { font-family: var(--ms-font-head); color: var(--ms-text-muted); }

.ms-nav { display: flex; gap: var(--ms-5); }
.ms-nav a {
  color: var(--ms-text-muted); text-decoration: none;
  padding-block: var(--ms-3); border-bottom: 2px solid transparent;
}
.ms-nav a[aria-current] { color: var(--ms-text); border-bottom-color: var(--ms-accent-visual); }

.ms-btn {
  font: inherit; font-weight: 500;
  padding: var(--ms-2) var(--ms-4);
  border-radius: var(--ms-r-control);
  border: 1px solid transparent; cursor: pointer;
}
.ms-btn--primary { background: var(--ms-action); color: #FFF; }
.ms-btn--primary:hover { background: var(--ms-action-hover); }
.ms-btn--secondary {
  background: var(--ms-surface); color: var(--ms-text);
  border-color: var(--ms-border-strong);
}
.ms-btn--quiet { background: none; color: var(--ms-accent); }

.ms-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card);
  padding: var(--ms-5);
  box-shadow: var(--ms-shadow-card);
}

.ms-pill {
  display: inline-flex; align-items: center; gap: var(--ms-1);
  padding: 2px var(--ms-2);
  border-radius: var(--ms-r-pill);
  font-size: var(--ms-ui-xs); font-weight: 500;
  border: 1px solid transparent;
}
.ms-pill--success { background: var(--ms-success-bg); color: var(--ms-success-ink); border-color: var(--ms-success-line); }
.ms-pill--warn    { background: var(--ms-warn-bg);    color: var(--ms-warn-ink);    border-color: var(--ms-warn-line); }
.ms-pill--danger  { background: var(--ms-danger-bg);  color: var(--ms-danger-ink);  border-color: var(--ms-danger-line); }
.ms-pill--info    { background: var(--ms-info-bg);    color: var(--ms-info-ink);    border-color: var(--ms-info-line); }

.ms-note {
  border-left: 3px solid var(--ms-info-ink);
  background: var(--ms-info-bg);
  padding: var(--ms-4) var(--ms-5);
  border-radius: 0 var(--ms-r-card) var(--ms-r-card) 0;
}
.ms-note--warn   { border-left-color: var(--ms-warn-ink);   background: var(--ms-warn-bg); }
.ms-note--danger { border-left-color: var(--ms-danger-ink); background: var(--ms-danger-bg); }

.ms-table { width: 100%; border-collapse: collapse; font-size: var(--ms-ui-sm); }
.ms-table th {
  text-align: left; font-weight: 500; color: var(--ms-text-muted);
  background: var(--ms-surface-2);
  padding: var(--ms-2) var(--ms-3);
  border-bottom: 1px solid var(--ms-border);
}
.ms-table td { padding: var(--ms-3); border-bottom: 1px solid var(--ms-border); }
.ms-table tbody tr[aria-selected="true"] { background: var(--ms-surface-3); }

/* Handbuch-Lauftext */
.ms-doc {
  font-size: var(--ms-doc-base);
  line-height: var(--ms-lh-doc);
  max-width: var(--ms-measure);
}
.ms-doc h1 { font-size: var(--ms-doc-h1); margin-block: var(--ms-7) var(--ms-4); }
.ms-doc h2 { font-size: var(--ms-doc-h2); margin-block: var(--ms-6) var(--ms-3); }
.ms-doc h3 { font-size: var(--ms-doc-h3); margin-block: var(--ms-5) var(--ms-2); }
.ms-doc p  { margin-block: 0 var(--ms-4); }
.ms-doc figure { margin: var(--ms-5) 0; }
.ms-doc figure img {
  max-width: 100%; border: 1px solid var(--ms-border); border-radius: var(--ms-r-card);
}
.ms-doc figcaption {
  font-size: var(--ms-doc-sm); color: var(--ms-text-muted); margin-top: var(--ms-2);
}
/* Programmbeschriftung im Fließtext: „Klicken Sie auf <span class=ms-label>Abrufen</span>“ */
.ms-label { font-weight: 600; color: var(--ms-text); }
/* Pfad durch Menüs: Versand › Belege wählen */
.ms-path { font-weight: 500; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}