/* ============================================================
   Piazza Studio — Dark Mode „Tiefgrün" (html.ps-dark)
   ------------------------------------------------------------
   Token-Override: die --ps--*-ROLLE bleibt, nur die Raw-Schicht
   wird getauscht. Scope = html.ps-dark (gesetzt in app.jsx aus
   users.ui_preferences.appearance). Im Light Mode komplett inert.
   Website-Vorschauen (iframe/canvas/frames) bleiben bewusst hell,
   die Sidebar (--ps--bg-inverse) und der Code-Editor unverändert.
   ============================================================ */
html.ps-dark {
  color-scheme: dark;
  color: var(--ps--fg);

  /* ---- Dark-Rohwerte („Tiefgrün", aus den Editor-Tokens abgeleitet) ---- */
  --dm-bg:            #0e1713;
  --dm-surface:       #15211b;
  --dm-raised:        #1c2b23;
  --dm-soft:          #1a2921;
  --dm-head:          #121c17;
  --dm-border:        #233529;
  --dm-border-strong: #2f4638;
  --dm-fg:            #e4ede8;
  --dm-fg-soft:       #c2d1c9;
  --dm-fg-muted:      #8aa094;
  --dm-fg-subtle:     #5f7569;

  /* ---- Neutral-Rampe invertiert (0 = Kartenfläche … 50 = Seitengrund) ---- */
  --ps--neutral-0:   var(--dm-surface);
  --ps--neutral-50:  var(--dm-bg);
  --ps--neutral-100: var(--dm-soft);
  --ps--neutral-200: var(--dm-border);
  --ps--neutral-300: var(--dm-border-strong);
  --ps--neutral-400: var(--dm-fg-subtle);
  --ps--neutral-500: var(--dm-fg-muted);
  --ps--neutral-600: var(--dm-fg-soft);
  --ps--neutral-700: var(--dm-fg);
  --ps--neutral-800: #eaf2ee;
  --ps--neutral-900: #f5f9f7;

  /* ---- Marke fürs Dunkle aufgehellt ---- */
  --ps--brand:        #17a377;
  --ps--brand-hover:  #1db786;
  --ps--brand-soft:   rgba(23,163,119,0.16);
  --ps--primary-press: #0d8a63;

  /* ---- Semantische Tokens nachziehen ---- */
  --ps--bg:            var(--dm-surface);
  --ps--bg-soft:       var(--dm-soft);
  --ps--fg:            var(--dm-fg);
  --ps--fg-muted:      var(--dm-fg-muted);
  --ps--fg-subtle:     var(--dm-fg-subtle);
  --ps--border:        var(--dm-border);
  --ps--border-strong: var(--dm-border-strong);
  --ps--workspace:     var(--dm-bg);
  --ps--focus-ring:    rgba(23,163,119,0.35);

  /* Status aufgehellt — remappt success/warning/danger; color-mix-Klassen
     (Pills/Tags/Badges) ziehen automatisch mit. */
  --ps--success: #4fd48f;
  --ps--warning: #f0a552;
  --ps--danger:  #f0736e;

  /* Statustext und Tint-Fläche fürs Dunkle (PS-64). Die hellen *-fg-Werte
     (#15803d, #b45309, #b91c1c) sind für weißen Grund gewählt und auf
     #15211b praktisch unlesbar — die Statusangabe wäre also gerade dann
     verschwunden, wenn sie zählt.
     Gemessen gegen die drei dunklen Flächen (surface / bg / raised):
       success #6fdca4 → 9,84 · 10,82 · 8,77
       warning #f5bd7a → 9,83 · 10,81 · 8,77
       danger  #f5938f → 7,47 ·  8,22 · 6,66
     Alle deutlich über AA, auch auf der hellsten Fläche (raised). Bewusst
     heller als der Signalton daneben: der Punkt darf leuchten, die
     Beschriftung soll lesbar sein.
     Die Tint-Flächen als rgba auf den Signalton — ein fester Hex-Wert
     würde auf raised/surface/head unterschiedlich falsch wirken. */
  --ps--success-fg:   #6fdca4;
  --ps--success-soft: rgba(79,212,143,0.14);
  --ps--warning-fg:   #f5bd7a;
  --ps--warning-soft: rgba(240,165,82,0.14);
  --ps--danger-fg:    #f5938f;
  --ps--danger-soft:  rgba(240,115,110,0.14);

  --ps--cms-soft: rgba(124,92,255,0.18);

  /* ---- Schatten schwarzbasiert (statt marken-getönt) ---- */
  --ps--shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --ps--shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
  --ps--shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3);
  --ps--shadow-lg: 0 12px 32px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.35);
  --ps--shadow-xl: 0 24px 64px rgba(0,0,0,0.6);
}

/* ---- Literal-Overrides (nur, was der neutral-0-Lift nicht abdeckt) ---- */
html.ps-dark .ps-top { border-bottom-color: var(--dm-border); }
html.ps-dark .ps-row { border-bottom-color: var(--dm-border); }
html.ps-dark .ps-row:hover { background: var(--dm-soft); }
html.ps-dark .ps-col-prev { border-color: var(--dm-border); box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
html.ps-dark .ps-table__head { background: var(--dm-head); }

/* „Raised“-Flächen (heller als surface): Popover, aktives Segment */
html.ps-dark .ps-popover { background: var(--dm-raised); box-shadow: 0 14px 36px rgba(0,0,0,0.6); }
html.ps-dark .ps-segctl__btn.is-active { background: var(--dm-raised); color: var(--dm-fg); }

/* Buttons */
html.ps-dark .ps-btn { color: var(--dm-fg-soft); }
html.ps-dark .ps-btn--primary { color: #fff; }
html.ps-dark .ps-top__export { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }

/* Aktiver Ordner-Chip: primary statt bg-inverse (sonst dark-on-dark) */
html.ps-dark .ps-chip.is-active { background: var(--ps--primary); border-color: var(--ps--primary); color: #fff; }
html.ps-dark .ps-chip--add { background: transparent; }

/* Avatare / Platzhalter */
html.ps-dark .ps-account__avatar { background-color: var(--ps--primary); }
html.ps-dark .ps-pm__avatar { background: var(--dm-raised); }
html.ps-dark .ps-pm__ph { border-color: var(--dm-border-strong); color: var(--dm-fg-subtle); }

/* Logo-Kachel der KI-Anbieter: die Markenfarbe bleibt (sie gehört dem Anbieter),
   wird aber gegen den dunklen Vordergrund angehoben — dieselbe color-mix-Mechanik
   wie bei .ps-badge-dyn. Ohne das verschwände der schwarze xAI-Akzent (#1a1a1a)
   vollständig, und der Anbieter wäre nicht mehr zu erkennen. */
html.ps-dark .ps-ai__logoTile {
  background: color-mix(in srgb, var(--sp-hex, var(--ps--fg-muted)) 22%, transparent);
  color: color-mix(in srgb, var(--sp-hex, var(--ps--fg-muted)) 62%, var(--dm-fg));
}

/* KPI-Wert im Dark neutral (Handoff-treu); Icon behält Statusfarbe via --ps-kpi-accent */
html.ps-dark .ps-kpi__value { color: var(--dm-fg); }

/* NEOS-Tag exakt wie Handoff (heller als der Brand-Ton) */
html.ps-dark .ps-tag--neos { background: rgba(23,163,119,0.18); color: #3ecf9f; }
html.ps-dark .ps-tag--static { background: var(--dm-soft); color: var(--dm-fg-muted); }

/* ---- Website-Vorschauen bleiben hell ---- */
html.ps-dark .bd-iframe { background: #ffffff; }
html.ps-dark .bd-preview { box-shadow: 0 4px 18px rgba(0,0,0,0.5); }
html.ps-dark .bd-itemdd__panel { background: var(--dm-surface); }
html.ps-dark .cc-visual__stage > * { background: #ffffff; }
html.ps-dark .cp-frame { background: #ffffff; }
html.ps-dark .cp-frame--soft { background: #f1f3f3; }
html.ps-dark .cp-frame--dark { background: #373737; }

/* ---- Werkstatt / Komponenten (nur Literal-Lights + „raised“) ---- */
html.ps-dark .cc-workshop__head { background: var(--dm-surface); }
html.ps-dark .cc-wshead__toggle button.is-active { background: var(--dm-raised); color: var(--dm-fg); }
/* --cc-insp-divider steht hier NICHT mehr: er liest seit PS-88 im hellen Modus
   var(--ps--border), und das ist im Dunkeln schon --dm-border. Eine Überschreibung
   wäre eine Dopplung desselben Werts — und eine Dopplung, die man beim nächsten
   Ändern der Rolle vergisst. Die anderen zwei bleiben, sie tragen eigene Töne. */
html.ps-dark .cc-inspector { --cc-insp-chip-active-border: #2f5a48; --cc-insp-pencil: #4d9c82; }
/* Nur der HOVER braucht hier eine eigene dunkle Fläche. `.is-active` gehört zur
   projektweiten Auswahl-Regel (shell.css, „Auswahl-Zustand“); die ist aus
   --ps--primary gegen `transparent` gemischt und trägt in beiden Modi — ein
   Override hier würde sie still auseinanderziehen. */
html.ps-dark .cp-subnav__item:hover:not(.is-active) { background: var(--dm-raised); }
html.ps-dark .cp-story__actionBtn { background: var(--dm-surface); }
html.ps-dark .cp-vswitch.is-off .cp-vswitch__track { background: var(--dm-border-strong); }
html.ps-dark .cp-vp-switch__btn.is-active { box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
html.ps-dark .cp-top__btn { background: var(--dm-surface); color: var(--dm-fg-soft); }
html.ps-dark .cp-top__btn--primary { background: var(--ps--primary); border-color: var(--ps--primary); color: #fff; }
html.ps-dark .ps-select__btn { background: var(--dm-surface); }
/* Gesperrt: die Zeile darueber ist spezifischer als `.ps-select__btn:disabled`
   in shell.css und wuerde die gesperrte Flaeche im Dunkelmodus wieder
   ueberschreiben — deshalb hier noch einmal. Gleiches gilt fuer die
   Nur-Lese-Zeile, die eine eigene Flaeche traegt. */
html.ps-dark .ps-select__btn:disabled,
html.ps-dark .ps-select__btn:disabled:hover {
  background: var(--dm-raised); border-color: var(--dm-border); color: var(--dm-fg-soft);
}
html.ps-dark .ps-set__readonly {
  background: var(--dm-raised); border-color: var(--dm-border); color: var(--dm-fg);
}
html.ps-dark .bd-menu__iconBtn { background: var(--dm-raised); border-color: var(--dm-border-strong); }

/* ---- Hilfe-Bereich & Tour-Engine (pre-Dark-Mode-Literale in shell.css) ----
   .ps-help__*/.ps-tour__*/.ps-kbd tragen #2b3630-Text und schwarze
   Alpha-Rahmen, die es vor Dark Mode noch nicht als Token gab. Light bleibt
   in shell.css unverändert — hier nur der Dark-Zweig. */
html.ps-dark .ps-kbd { color: var(--dm-fg); border-color: var(--dm-border); }
html.ps-dark .ps-help__segBtn:not(.is-active) { color: var(--dm-fg); }
html.ps-dark .ps-help__itemT { color: var(--dm-fg); }
html.ps-dark .ps-help__cardT { color: var(--dm-fg); }
html.ps-dark .ps-tour__body { color: var(--dm-fg); }

html.ps-dark .ps-help__seg,
html.ps-dark .ps-help__filter,
html.ps-dark .ps-help__search,
html.ps-dark .ps-help__tile,
html.ps-dark .ps-help__card,
html.ps-dark .ps-help__relLink { border-color: var(--dm-border); }
html.ps-dark .ps-help__table th,
html.ps-dark .ps-help__table td { border-bottom-color: var(--dm-border); }

/* Hover-Akzente bleiben markenfarbig — die neutrale Border-Override
   oben hat wegen des zusätzlichen html-Elements höhere Spezifität als
   die :hover-Regeln in shell.css und würde sie sonst verdecken. */
html.ps-dark .ps-help__tile:hover { border-color: var(--ps--primary); }
html.ps-dark .ps-help__card:hover { border-color: color-mix(in srgb, var(--ps--primary) 35%, transparent); }
html.ps-dark .ps-help__relLink:hover { border-color: color-mix(in srgb, var(--ps--primary) 45%, transparent); }

/* Warn-Hinweis: kräftigerer Tint im Dunkeln, gleicher Rahmenakzent */
html.ps-dark .ps-help__note--warn {
  border-left-color: var(--ps--warning);
  background: color-mix(in srgb, var(--ps--warning) 12%, transparent);
}

/* ---- Website-Basistypografie-Leak in die Studio-Chrome ----
   colors_and_type.css setzt `color: var(--mp-fg)` HART auf body/p/.mp-body/
   h1–h4/.mp-display; --mp-fg = #1d3557 (Navy) wird im Dark nicht remappt → jeder
   bare Chrome-Text/-Titel (Story-/Tool-Seitentitel, Geppetto, Inspektor-Hinweise,
   Hilfe …) ist unlesbar. Lösung: --mp-fg zeigt IN DER CHROME auf die Studio-
   Textfarbe — das fixt alle geleakten Regeln auf einmal und lässt die explizite
   --ps--fg-muted/-subtle-Hierarchie unberührt (die nutzt --ps--*, nicht --mp-fg).
   Website-Vorschauen bekommen den echten Website-Wert zurück. */
html.ps-dark { --mp-fg: var(--ps--fg); }
html.ps-dark :where(.cp-frame, .cp-story__content, .cc-visual__stage) {
  --mp-fg: var(--mp-dark-surface);
}

/* ---- Inline-Code (`code`, `.mp-code`) ----
   Dieselbe Fehlerklasse wie der Typografie-Leak darüber: gestylt wird
   Inline-Code in der WEBSITE-Schicht (design-system/colors_and_type.css,
   `code, .mp-code`) mit --mp-bg-soft / --mp-border. Diese Schicht lässt der
   Dunkelmodus bewusst unangetastet, damit Website-Vorschauen hell bleiben.
   Folge in der Studio-Oberfläche: die Kastenfläche blieb HELL, während die
   Schrift per Vererbung (z. B. aus .ps-card__sub) das blasse --ps--neutral-500
   bekam — nachgerechnet ~2,5:1 statt der geforderten 4,5:1. Auf einer dunklen
   Karte war der `authorized_keys`-Kasten im Deploy-Ziel kaum zu erkennen.

   Fläche, Rahmen UND Schriftfarbe deshalb explizit auf die --ps--Schicht. Die
   Schriftfarbe ist der Punkt: sie zu erben war die halbe Ursache, und was geerbt
   wird, hängt am Umfeld (Kartentext, Überschrift, Hinweiszeile).

   Ausgenommen sind wie oben die Website-Render-Flächen im selben Dokument; der
   Builder-Canvas ist ein eigenes iframe-Dokument ohne dieses Stylesheet. */
html.ps-dark code,
html.ps-dark .mp-code {
  background: var(--ps--bg-soft);
  border-color: var(--ps--border);
  color: var(--ps--fg);
}
html.ps-dark :where(.cp-frame, .cp-story__content, .cc-visual__stage) code,
html.ps-dark :where(.cp-frame, .cp-story__content, .cc-visual__stage) .mp-code {
  background: var(--mp-bg-soft);
  border-color: var(--mp-border);
  color: inherit;
}
/* Die Info-Chips des Code-Editors tragen ihre Farbe bewusst selbst (violettes
   Token auf eigener Pille, shell.css). Dort würde die Regel oben einen zweiten
   Kasten hineinlegen und das Violett gegen Fließtextfarbe tauschen. */
html.ps-dark .cc-editor__chip code {
  background: none;
  border: 0;
  color: inherit;
}