/* ============================================================================
 * PROVIMEDIA ERP · THEMA "PRODUKT"
 * ----------------------------------------------------------------------------
 * Die eigene Produkt-Optik. Diese Datei aendert AUSSCHLIESSLICH Werte — keine
 * einzige Regel, kein Selektor auf ein Bauteil. Das ist die Bedingung, unter der
 * ein Thema ein Thema bleibt: wer spaeter eine Kundenmarke will, schreibt eine
 * Werteliste und kein zweites Stylesheet.
 *
 * SIE GILT NUR, wenn am <html> data-theme="produkt" steht. Solange der Umbau
 * laeuft, ist das eine bewusste Wahl je Nutzer (Profilmenue), nicht der Standard
 * — niemand soll ueber eine halbfertige Oberflaeche stolpern.
 *
 * ----------------------------------------------------------------------------
 * WORIN SIE SICH VOM BISHERIGEN UNTERSCHEIDET, und warum:
 *
 * 1. GRUND: gruenstichiges Weiss statt Creme. Creme/Beige ist im bindenden
 *    Design-Gesetz namentlich als Standard-Look gefuehrt ("das neue
 *    Blau-Violett"). Der Gruenstich bindet den Grund an die Marke, statt eine
 *    Mode zu tragen.
 * 2. TINTE: gruen-schwarz statt neutralem Schwarz. Dieselbe Familie wie das
 *    Band und der Akzent — eine Welt, nicht drei.
 * 3. BAND: gruen-schwarz. Das Gesetz benennt das kuehle Blau-Anthrazit als den
 *    Standardgrund jedes dunklen Produkts; ein gewaehlter Ton ist das Gegenteil.
 * 4. SCHRIFT: KEINE eigene. Das Thema erbt Plus Jakarta Sans (Titel, Kennzahlen,
 *    Wortmarke) und Inter (Oberflaeche) aus tokens.css. Eine Display-Schrift mit
 *    Charakter (Bluu Next) lief einen Tag als Vorgabe und wurde am 21.09.2026
 *    vom Eigentuemer als "nicht gut lesbar" zurueckgenommen — Lesbarkeit geht
 *    in einem Werkzeug, das den ganzen Tag offen ist, vor Charakter.
 *
 * JEDER FARBWERT IST GEMESSEN, nicht geschaetzt. Die Zahlen stehen an den
 * Tokens; Schranken: 4,5:1 fuer Text, 3:1 fuer die Grenze eines Bedienelements.
 * ========================================================================== */

:root[data-theme="produkt"] {
    /* --- Flaechen, von hinten nach vorne ---------------------------------- */
    --ds-grund:            #F4F6F3;   /* gruenstichiges Weiss statt Creme */
    --ds-flaeche:          #FFFFFF;
    --ds-flaeche-2:        #FAFBF9;   /* Kopfzeilen, Streifen */
    --ds-flaeche-3:        #EBEFEA;   /* Vertiefungen, Rinnen */
    --ds-band:             #12201B;   /* gruen-schwarz, weisser Text 16,82:1 */

    /* --- Schrift: drei Stufen, jede auf JEDER Flaeche lesbar --------------- */
    --ds-text:             #101815;   /* 15,53 bis 18,05:1 */
    --ds-text-leise:       #4E5C55;   /*  6,05 bis  7,03:1 */
    --ds-text-leiser:      #616F68;   /*  4,54 bis  5,27:1 — auch auf flaeche-3 */
    --ds-text-auf-band:    #BEC4C1;   /*  9,50:1 auf dem Band */
    --ds-text-auf-band-leise: #828C88; /* 4,85:1 — knapp ueber der Schranke */
    --ds-text-auf-fuellung: #FFFFFF;

    /* --- Kanten ----------------------------------------------------------- */
    --ds-kante:            #DDE4DC;   /* dekorative Trennung, bewusst leise */
    --ds-kante-leise:      #E8ECE7;
    --ds-kante-stark:      #C6D0C4;
    --ds-kante-auf-band:   rgba(255, 255, 255, 0.08);
    /* Die Grenze eines BEDIENELEMENTS ist etwas anderes als eine Trennung:
       3,02 bis 3,51:1, also ueber der Schranke von WCAG 1.4.11 auf jeder
       Flaeche. Genau hier lag der Bestandsdefekt — Felder mit 1,00:1. */
    --ds-kante-bedienelement: #7F8C83;

    /* --- Akzent ----------------------------------------------------------- */
    --ds-akzent:           #1C6B5A;   /* weisse Schrift darauf 6,36:1 */
    --ds-akzent-tief:      #14564A;   /* 8,54:1 */
    --ds-akzent-zart:      #E3EEEA;   /* Tint-Flaeche, kein Vollton */
    --ds-akzent-auf-band:  #57C2A5;   /* 7,74:1 auf dem Band */
    --ds-akzent-rgb:       28, 107, 90;
    --ds-akzent-auf-band-rgb: 87, 194, 165;
    --ds-schleier-auf-band: rgba(255, 255, 255, 0.07);

    /* --- Bedeutung: entsaettigt, tonal, nie ein Signalton ------------------ */
    --ds-warnung:          #8A5C13;  --ds-warnung-zart:  #F3ECDD;  --ds-warnung-tief: #6E4A0F;
    --ds-gefahr:           #AD3F36;  --ds-gefahr-zart:   #F4E5E3;  --ds-gefahr-tief:  #8E332C;
    --ds-hinweis:          #4E5C55;  --ds-hinweis-zart:  #ECEFEB;  --ds-hinweis-tief: #3E4A44;
    --ds-warnung-rgb:      138, 92, 19;
    --ds-gefahr-rgb:       173, 63, 54;
    --ds-hinweis-rgb:      78, 92, 85;

    /* --- DIE KERBE: die einzige eigene Silhouette dieses Produkts ---------- */
    /* Ein Balken, der oben und unten auf 45 Grad angeschraegt ist. Er markiert
       genau EINEN Zustand — "hier bist du" — und sonst nichts: aktiver
       Menuepunkt, aktiver Reiter, gewaehlte Zeile. Eine Form, die man wiederholt
       sieht, wird zur Handschrift; zehn Formen werden zu keiner.
       Das Design-Gesetz nennt die eigene Geometrie das staerkste Einzelsignal
       fuer Handarbeit — ein gerader Balken ist ein Vorgabewert, dieser nicht.
       Die 10 px Anschraegung sind die Haelfte der halben Zeilenhoehe: schraeg
       genug, um gesehen zu werden, flach genug, um nicht zum Pfeil zu werden. */
    --ds-aktiv-silhouette: polygon(0 0, 100% 10px, 100% calc(100% - 10px), 0 100%);
    --ds-aktiv-breite: 4px;

    /* --- Tiefe: knapp, gerichtet, in der Tinte getoent --------------------- */
    --ds-tiefe-ruhe:    0 1px 2px rgba(16, 24, 21, 0.05);
    --ds-tiefe-leicht:  0 2px 8px rgba(16, 24, 21, 0.07);
    --ds-tiefe-schwebt: 0 6px 20px rgba(16, 24, 21, 0.09);
}