@CHARSET "UTF-8";

/*
 * Dunkle Darstellung - nachgebaut nach zedal-portal, css/darstellung/dunkel.css.
 *
 * Setzt nur Custom Properties aus synqony_brand.css. Sie greifen, wenn <html>
 * data-darstellung traegt (js/darstellung.js, eingebunden ueber
 * SynqonyDarstellung::kopf()): "system" folgt prefers-color-scheme, "dunkel"
 * gilt immer, "hell" und kein Attribut lassen die Seite hell. Beide Bloecke
 * tragen dieselben Werte (tests/design/DunkleDarstellungTest.php).
 *
 * Die Flaechen sind Grafit wie im Rahmen des neuen Portal-Designs
 * (display_view.css dort, Abschnitt "Verlauf als Rahmen"): die Flaeche
 * --syn-surface, darunter eine Stufe tiefer die Felder und der Seitengrund
 * (--syn-bg), eine Stufe hoeher die gedeckten Unterflaechen (--syn-bg-muted).
 * Werte, deren Namen es im Portal gibt, sind dort abgelesen und muessen mit ihm
 * gleich bleiben.
 *
 * Der Rahmen (--syn-frame) laeuft dunkel wie die Balken im Portal ab 10% aus
 * Navy, endet aber in Abstufung 2 statt im Mint hinter der Flaeche - dieselbe
 * Anmutung, und weisse Schrift haelt an jeder Stelle 4,76:1.
 *
 * Eigene Tokens dieses Projekts:
 *   --syn-field-disabled   gesperrte Felder, wie die gedeckten Unterflaechen
 *   --syn-ui-icon-filter   kehrt die dunkelgrauen jQuery-UI-Zeichen um
 *
 * Unveraendert bleiben wie im Portal die Markenflaechen: Mint, Navy,
 * Abstufung 2, der Verlauf der Dialogtitel und die Schrift darauf.
 */
@media (prefers-color-scheme: dark) {
    html:root[data-darstellung="system"] {
        color-scheme: dark;
        --syn-bg: #0f1318;
        --syn-bg-muted: #1b2129;
        --syn-surface: #161b22;
        --syn-field-disabled: #1b2129;
        --syn-success-bg: #0f2e25;
        --syn-row-hover: #222a33;
        --syn-primary-soft: #0d3440;
        --syn-primary-ink: #6fe6cf;
        --syn-frame: linear-gradient(135deg, var(--syn-secondary) 10%, var(--syn-tab-active) 100%);
        --syn-frame-edge: rgba(255, 255, 255, .09);
        --syn-frame-shadow: 0 8px 32px rgba(0, 0, 0, .35);
        --syn-text: #e6ecf2;
        --syn-text-secondary: #c4cdd8;
        --syn-text-muted: #a3afbe;
        --syn-text-brand: #e6ecf2;
        --syn-placeholder: #8793a1;
        --syn-link: #3fdcbc;
        --syn-link-hover: #ffffff;
        --syn-border: #2a323c;
        --syn-line-strong: #3a4450;
        --syn-line-field: #7f96a0;
        --syn-field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a3afbe' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
        --syn-danger-bg: #3b1a1a;
        --syn-tooltip-bg: #222a33;
        --syn-tooltip-border: var(--syn-line-strong);
        --syn-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
        --syn-ui-icon-filter: invert(1);
    }
}

html:root[data-darstellung="dunkel"] {
    color-scheme: dark;
    --syn-bg: #0f1318;
    --syn-bg-muted: #1b2129;
    --syn-surface: #161b22;
    --syn-field-disabled: #1b2129;
    --syn-success-bg: #0f2e25;
    --syn-row-hover: #222a33;
    --syn-primary-soft: #0d3440;
    --syn-primary-ink: #6fe6cf;
    --syn-frame: linear-gradient(135deg, var(--syn-secondary) 10%, var(--syn-tab-active) 100%);
    --syn-frame-edge: rgba(255, 255, 255, .09);
    --syn-frame-shadow: 0 8px 32px rgba(0, 0, 0, .35);
    --syn-text: #e6ecf2;
    --syn-text-secondary: #c4cdd8;
    --syn-text-muted: #a3afbe;
    --syn-text-brand: #e6ecf2;
    --syn-placeholder: #8793a1;
    --syn-link: #3fdcbc;
    --syn-link-hover: #ffffff;
    --syn-border: #2a323c;
    --syn-line-strong: #3a4450;
    --syn-line-field: #7f96a0;
    --syn-field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a3afbe' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    --syn-danger-bg: #3b1a1a;
    --syn-tooltip-bg: #222a33;
    --syn-tooltip-border: var(--syn-line-strong);
    --syn-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    --syn-ui-icon-filter: invert(1);
}