/* =========================================================================
   MARKE — Ebene 1. Die einzige Datei, die von Kunde zu Kunde wechselt.

   Hier stehen ROHE Farbwerte und sonst nichts. Kein Bauteil greift je
   direkt hierauf zu: basis.css und komponenten.css kennen ausschliesslich
   die semantischen Tokens aus tokens.css, und tokens.css bildet sie auf
   die Werte hier ab.

   Diese Trennung ist der Grund, warum ein neuer Kunde nicht bedeutet,
   dreitausend Zeilen CSS durchzusehen. Er bedeutet: diese Datei
   austauschen.

   WER HIER ETWAS AENDERT, PRUEFT DEN KONTRAST

       node tools/abnahme-pruefen.mjs      Abschnitt 9, rechnet die Paare
       _vorschau-fokus.html                rechnet jede Textstelle im Browser

   Die zweite Pruefung ist die wichtigere: Sie sieht die Kombinationen, die
   tatsaechlich auf der Seite vorkommen, nicht die, die jemand
   aufgeschrieben hat.

   ---------------------------------------------------------------------
   MAGARD — Maler- und Stuckateur-Meisterbetrieb, Idar-Oberstein

   Alle Werte sind aus den Original-Werbemitteln GEMESSEN, nicht
   geschaetzt. Vorlage 2 ist die aktuelle Anzeige und damit massgeblich;
   die alte Visitenkarte (Vorlage 1) ist abfotografiert und hat einen
   Warmstich — daraus wurde bewusst nichts uebernommen.
   ========================================================================= */

:root {

  /* -----------------------------------------------------------------------
     PRIMAERAKZENT — die Signalfarbe fuer alles Anklickbare

     Bei Magard das Gelb aus dem Firmenschild. Es ist bewusst NICHT die
     Farbe fuer Text auf hellem Grund: Gelb auf Weiss erreicht 1,75 : 1.
     Dafuer gibt es --marke-primaer-text, dieselbe Farbe so weit
     abgedunkelt, dass sie als Text traegt.
     --------------------------------------------------------------------- */

  --marke-primaer:        #FEB705;  /* gemessen Vorlage 2                  */
  --marke-primaer-dunkel: #E5A400;  /* Hover und Aktiv, abgeleitet         */
  --marke-primaer-text:   #8A6A00;  /* dieselbe Farbe als Text auf Weiss   */

  /* -----------------------------------------------------------------------
     AUSZEICHNUNG — nur auf dunklem Grund

     Zweite Ebene neben dem Primaerakzent: Kennzeichnungszeilen,
     Haarlinien, Rahmenkanten. Bei Magard das Gold aus Vorlage 3.

     Diese Farbe darf auf hellem Grund NICHT vorkommen. Wer sie ersetzt,
     waehlt einen Wert, der auf der dunklen Flaeche mindestens 4,5 : 1
     erreicht und auf Weiss durchfaellt — das ist kein Widerspruch,
     sondern die Definition dieser Ebene.
     --------------------------------------------------------------------- */

  --marke-akzent:         #C9B177;  /* gemessen Vorlage 3                  */

  /* -----------------------------------------------------------------------
     NEUTRALE SKALA

     Von hell nach dunkel durchnummeriert wie eine Grauskala. Die Nummern
     sind absichtlich grob gestuft: Wer eine Zwischenstufe braucht, hat
     meistens ein Layoutproblem und kein Farbproblem.

     --neutral-600 auf --neutral-050 liegt mit 4,85 : 1 knapp ueber der
     Grenze von 4,5. Dieses Grau darf nicht weiter aufgehellt werden.
     --neutral-500 ist der hellste Wert, der als Rahmen noch 3 : 1 auf
     Weiss erreicht.
     --------------------------------------------------------------------- */

  --neutral-000: #FFFFFF;
  --neutral-050: #F4F4F4;  /* Sektionshintergrund im Wechsel               */
  --neutral-200: #D9D9D9;  /* dekorative Trennlinien                       */
  --neutral-500: #767676;  /* Formularrahmen, 3 : 1 auf Weiss              */
  --neutral-600: #6B6B6B;  /* Sekundaertext, 4,85 : 1 auf --neutral-050    */
  --neutral-800: #2E2E2E;  /* Fliesstext, sekundaere Knoepfe               */
  --neutral-900: #111111;  /* dunkle Sektionen, Fusszeile                  */

  /* -----------------------------------------------------------------------
     LOGO

     Drei Flaechen des 3D-„M", gemessen aus Vorlage 2. Ein Kunde ohne
     dreidimensionales Logo braucht nur --marke-logo-front; die beiden
     Seitenflaechen bleiben dann ungenutzt und stoeren nicht.
     --------------------------------------------------------------------- */

  --marke-logo-front:    #181D21;
  --marke-logo-seite-1:  #E0E0E0;
  --marke-logo-seite-2:  #B4B4B4;
}