/* =====================================================================
   tokens.css — Design-Tokens (CSS Custom Properties)
   ---------------------------------------------------------------------
   Single Source of Truth für Farben des Webportals (Theme "blau").

   REGELN (wichtig für "Design unverändert"):
   - Jedes Token hat GENAU EINEN konkreten Farbwert. Es werden NIE zwei
     unterschiedliche Farbwerte unter einem Token zusammengefasst.
   - Exakt-äquivalente Schreibweisen (#fff == #ffffff, #000 == #000000)
     teilen sich EIN Token — das ist der einzige erlaubte "Merge".
   - Die Default-Werte hier = die aktuellen "blau"-Basiswerte (Status quo).
     Themes (ballywulff/pink/schwarz) überschreiben Tokens über
     [data-theme="..."] (siehe themes-*.css, Folge-Schritt).

   ZWEI EBENEN:
   1) Primitive  (--c-*)     : rohe Palette, wertbenannt, neutral.
   2) Semantisch (--color-*) : Rollen, zeigen auf Primitive. Hier hängt
                               sich das Theming ein.

   Diese Datei ist additiv: sie definiert nur :root-Variablen und kann
   für sich genommen nichts am Rendering ändern.
   Stand: 2026-05-24 (Fundament, Kern-Set der häufigen Farben).
   ===================================================================== */

:root {

  /* ---------------------------------------------------------------
     1) PRIMITIVE — Neutrale (Weiß/Schwarz/Grau)
     --------------------------------------------------------------- */
  --c-white:        #fff;       /* == #ffffff */
  --c-black:        #000;       /* == #000000 */

  --c-gray-f3:      #f3f3f3;    /* hr, dezente Flächen */
  --c-gray-efef:    #efefef;
  --c-gray-edee:    #edeeef;
  --c-gray-eee:     #eee;
  --c-gray-ddd:     #ddd;
  --c-gray-d6:      #d6d9da;
  --c-gray-ccc:     #ccc;
  --c-gray-c0:      #c0c0c0;
  --c-gray-b4:      #b4b4b4;
  --c-gray-b0:      #b0b0b0;
  --c-gray-a3:      #a3a3a3;
  --c-gray-99:      #999;       /* == #999999 */
  --c-gray-8f:      #8f8f8f;
  --c-gray-69:      #696969;    /* Standard-Linkfarbe */
  --c-gray-66:      #666;
  --c-gray-55:      #555;       /* body-Textfarbe */
  --c-gray-3c:      #3c3c3c;
  --c-gray-33:      #333;
  --c-gray-21:      #212121;

  /* ---------------------------------------------------------------
     1) PRIMITIVE — Marken-Teal (Header/Navigation "blau")
     --------------------------------------------------------------- */
  --c-teal-2c85:    #2c8597;    /* Header-Grundfarbe */
  --c-teal-1760:    #17606f;    /* Header-Verlauf oben */
  --c-teal-1e6b:    #1e6b7c;    /* Header-Rand */
  --c-teal-2374:    #237485;    /* Akzent-Rand */
  --c-teal-5c9b:    #5c9ba7;
  --c-teal-72a8:    #72a8b2;    /* == #72A8B2, Logo/Icons */
  --c-teal-809b:    #809ba1;
  --c-teal-96ad:    #96adb1;
  --c-teal-99ae:    #99aeb3;
  --c-teal-a1cb:    #a1cbd3;

  /* ---------------------------------------------------------------
     1) PRIMITIVE — Grün (Erfolg/Akzent)
     --------------------------------------------------------------- */
  --c-green-008:    #008000;    /* sehr häufig (Status/positiv) */
  --c-green-6f8e:   #6f8e21;
  --c-green-6a8a:   #6a8a1f;
  --c-green-a9c2:   #a9c233;
  --c-green-cadb:   #cadb77;
  --c-green-10b9:   #10b981;    /* neuere Seiten (Emerald) */

  /* ---------------------------------------------------------------
     1) PRIMITIVE — Rot/Orange (Warnung/Fehler)
     --------------------------------------------------------------- */
  --c-red-e738:     #e7380c;    /* Alarm/Fehler */
  --c-red-c41c:     #c41c00;
  --c-orange-ff63:  #ff633c;
  --c-orange-ff6a:  #ff6a37;
  --c-orange-ff99:  #ff9977;

  /* ---------------------------------------------------------------
     1) PRIMITIVE — Gelb
     --------------------------------------------------------------- */
  --c-yellow-ffcb:  #ffcb00;
  --c-yellow-ffcc:  #ffffcc;    /* Meldungs-Hintergrund */

  /* ---------------------------------------------------------------
     1) PRIMITIVE — Pink/Magenta (Marker + Theme "pink")
     --------------------------------------------------------------- */
  --c-pink-fc62:    #fc62fe;    /* sehr häufig in Theme-Kontext */
  --c-purple-a617:  #a617b2;

  /* ---------------------------------------------------------------
     1) PRIMITIVE — Neutrale aus neueren Seiten (Tailwind-Palette)
     --------------------------------------------------------------- */
  --c-slate-6b72:   #6b7280;
  --c-slate-1118:   #111827;
  --c-slate-e5e7:   #e5e7eb;
  --c-slate-d1d5:   #d1d5db;

  /* ---------------------------------------------------------------
     2) SEMANTISCH — Rollen (zeigen auf Primitive).
        Hier hängt sich das Theming ein. Werte = aktueller "blau"-Stand.
     --------------------------------------------------------------- */

  /* Flächen / Text (Werte aus colors.css belegt) */
  --color-surface:           var(--c-white);       /* body background #FFF */
  --color-text:              var(--c-gray-55);      /* body color #555 */
  --color-text-muted:        var(--c-gray-99);
  --color-border:            var(--c-gray-c0);
  --color-divider:           var(--c-gray-f3);

  /* Links */
  --color-link:              var(--c-gray-69);      /* a:link #696969 */

  /* Header / Navigation (Marken-Teal) */
  --color-header-bg:         var(--c-teal-2c85);
  --color-header-bg-from:    var(--c-teal-1760);
  --color-header-bg-to:      var(--c-teal-2c85);
  --color-header-border:     var(--c-teal-1e6b);
  --color-header-fg:         var(--c-teal-72a8);

  /* Status */
  --color-success:           var(--c-green-008);
  --color-success-accent:    var(--c-green-6f8e);
  --color-danger:            var(--c-red-e738);
  --color-danger-from:       var(--c-orange-ff63);
  --color-danger-to:         var(--c-red-e738);
  --color-warning-bg:        var(--c-yellow-ffcc);
  --color-warning-accent:    var(--c-yellow-ffcb);

  /* Marker */
  --color-marker-pink:       var(--c-pink-fc62);

  /* ---------------------------------------------------------------
     RADIUS — Skala an den tatsächlich häufigsten Werten (value-exact;
     wird per radius-tokenize.php auf exakte Treffer angewandt).
     --------------------------------------------------------------- */
  --radius-xs:     4px;
  --radius-sm:     5px;
  --radius-md:     6px;
  --radius-lg:     10px;
  --radius-xl:     12px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ---------------------------------------------------------------
     SPACING — Skala (4px-Basis) als VORWÄRTS-KONVENTION für neuen Code.
     Bewusst NICHT flächig retrofittet (Margin/Padding sind zu viele/variabel
     für wertgleiches Tokenisieren mit Mehrwert). Neue Komponenten nutzen diese.
     --------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
}

/* HINWEIS (kein Code, nur Doku):
   - Long-tail-Farben (1–2x verwendet, ~317 Stück) sind bewusst NOCH
     nicht tokenisiert; sie werden datei-/iterationsweise ergänzt, wenn
     die zugehörigen Dateien migriert werden.
   - Semantische Tokens werden beim Migrieren der jeweiligen Datei gegen
     den dort tatsächlich verwendeten Wert geprüft (kein Raten). */