/* Farbpaletten A/B/C (Layout Schritt 1). A = heutige Farben aus partsynq-skin/skin.css (keine Überschreibung).
 * B „ruhig“ und C „grün“ setzen nur --psk-*-Farbwerte auf <html data-palette>; hell/dunkel folgt weiter
 * data-theme bzw. prefers-color-scheme wie in skin.css. Jede Palette setzt hell und dunkel dieselben Variablen,
 * damit im Dunkelmodus kein heller Wert stehen bleibt. Entfernen dieser Datei = heutige Farben. */
html[data-palette='b'] {
  --psk-bg: #f6f7f4;
  --psk-surface: #ffffff;
  --psk-surface-2: #f1f3ef;
  --psk-surface-3: #eceee9;
  --psk-primary: #1f3a5f;
  --psk-primary-hover: #2a4a75;
  --psk-primary-fg: #fbfcfd;
  --psk-accent: #0f766e;
  --psk-accent-solid: #0f766e;
  --psk-accent-subtle: #e6f4f2;
  --psk-accent-subtle-fg: #0b5e57;
  --psk-accent-border: #99d2cb;
  --psk-focus: #0f766e;
}
html[data-palette='b'][data-theme='dark'] {
  --psk-bg: #0e1518;
  --psk-surface: #152026;
  --psk-surface-2: #1b2a31;
  --psk-surface-3: #23343c;
  --psk-primary: #2b6496;
  --psk-primary-hover: #245581;
  --psk-primary-fg: #ffffff;
  --psk-accent: #5cc8b9;
  --psk-accent-solid: #0f766e;
  --psk-accent-subtle: #0f2c2a;
  --psk-accent-subtle-fg: #8fe3d7;
  --psk-accent-border: #1d5c55;
  --psk-focus: #5cc8b9;
}
html[data-palette='c'] {
  --psk-bg: #f8faf8;
  --psk-surface: #ffffff;
  --psk-surface-2: #f1f5f1;
  --psk-surface-3: #e9efe9;
  --psk-primary: #1b4332;
  --psk-primary-hover: #24563f;
  --psk-primary-fg: #f7fbf8;
  --psk-accent: #2d6a4f;
  --psk-accent-solid: #2d6a4f;
  --psk-accent-subtle: #e8f3ec;
  --psk-accent-subtle-fg: #1f5139;
  --psk-accent-border: #a7d3b7;
  --psk-focus: #2d6a4f;
}
html[data-palette='c'][data-theme='dark'] {
  --psk-bg: #0e1511;
  --psk-surface: #15201a;
  --psk-surface-2: #1b2a21;
  --psk-surface-3: #233529;
  --psk-primary: #2b6e50;
  --psk-primary-hover: #255f45;
  --psk-primary-fg: #ffffff;
  --psk-accent: #74d19f;
  --psk-accent-solid: #2d6a4f;
  --psk-accent-subtle: #11291c;
  --psk-accent-subtle-fg: #a6e6c3;
  --psk-accent-border: #2a5c40;
  --psk-focus: #74d19f;
}
/* „Automatisch“ (kein data-theme) bei dunkler Systemeinstellung: dieselben Werte wie data-theme='dark'. */
@media (prefers-color-scheme: dark) {
  html[data-palette='b']:not([data-theme]) {
    --psk-bg: #0e1518;
    --psk-surface: #152026;
    --psk-surface-2: #1b2a31;
    --psk-surface-3: #23343c;
    --psk-primary: #2b6496;
    --psk-primary-hover: #245581;
    --psk-primary-fg: #ffffff;
    --psk-accent: #5cc8b9;
    --psk-accent-solid: #0f766e;
    --psk-accent-subtle: #0f2c2a;
    --psk-accent-subtle-fg: #8fe3d7;
    --psk-accent-border: #1d5c55;
    --psk-focus: #5cc8b9;
  }
  html[data-palette='c']:not([data-theme]) {
    --psk-bg: #0e1511;
    --psk-surface: #15201a;
    --psk-surface-2: #1b2a21;
    --psk-surface-3: #233529;
    --psk-primary: #2b6e50;
    --psk-primary-hover: #255f45;
    --psk-primary-fg: #ffffff;
    --psk-accent: #74d19f;
    --psk-accent-solid: #2d6a4f;
    --psk-accent-subtle: #11291c;
    --psk-accent-subtle-fg: #a6e6c3;
    --psk-accent-border: #2a5c40;
    --psk-focus: #74d19f;
  }
}

/* Umschalter neben „Darstellung“ (#appearance-toggle): gleiche Größe, eigene Klasse (nicht .appearance-toggle,
 * das am Telefon fest positioniert wird). Am Telefon (seller-mobile) steht er im „Mehr“-Blatt. */
.palette-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 10px;border:1px solid var(--psk-border-strong,#b9bdc5);border-radius:9px;background:var(--psk-surface,#fff);color:var(--psk-fg,#12161c);font:inherit;font-size:12px;font-weight:800;cursor:pointer;order:2;white-space:nowrap}
.palette-toggle:hover{background:var(--psk-surface-2,#f4f6f8)}
.palette-toggle:focus-visible{outline:3px solid var(--psk-focus,#2275e8);outline-offset:2px}
.palette-toggle i{display:inline-block;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--psk-primary) 50%,var(--psk-accent-solid) 50%);border:1px solid var(--psk-border)}
@media (max-width:1000px){.palette-toggle b{display:none}}
