/* ============================================================
   RS Glas — COLORS
   Kühles Cyan-Akzent auf tiefem Navy und hellen Grautönen.
   Base-Werte + semantische Aliase.
   ============================================================ */
:root {
  /* ── Marke / Akzent ── */
  --rs-cyan:        #00c8f0;   /* Primär-Akzent: Buttons, Linien, Hover  */
  --rs-cyan-600:    #00b3d4;   /* Akzent gedrückt / dunkler Hover        */
  --rs-cyan-700:    #0099bb;   /* Akzent tief                            */
  --rs-cyan-800:    #007b94;   /* Label-/Overline-Cyan auf Hell          */
  --rs-orange:      #ff9900;   /* Konfigurator / Aufmaß-CTA (Pille)      */
  --rs-orange-600:  #e68a00;   /* Orange Hover                           */
  --rs-orange-mess: #ef7b00;   /* Maß-Pfeil "Höhe" im Konfigurator       */
  --rs-whatsapp:    #25d366;   /* WhatsApp-Grün                          */

  /* ── Navy / Tinte ── */
  --rs-ink:         #1a1f2e;   /* Primär-Text & dunkle Flächen           */
  --rs-ink-900:     #0e1118;   /* theme-color / sehr tief                */
  --rs-ink-950:     #0a0c10;   /* Floating-Pill Hintergrund              */
  --rs-ink-panel:   #242a3a;   /* Karte auf dunklem Band                 */
  --rs-ink-panel-2: #2b3145;   /* Karte Hover auf dunklem Band           */
  --rs-ink-line:    #252933;   /* Trennlinie auf dunklem Band            */
  --rs-slate:       #3a3f4a;   /* Nav-Links                              */

  /* ── Neutralgrau ── */
  --rs-white:       #ffffff;
  --rs-gray-50:     #f7f9fb;   /* card2 / Zebrafläche                     */
  --rs-gray-100:    #f2f4f7;   /* Seiten-Hintergrund                     */
  --rs-gray-200:    #e8ebf0;   /* bg2 / feine Border auf Hell            */
  --rs-gray-300:    #d4d8e0;   /* Border kräftig                         */
  --rs-gray-400:    #9ca3af;   /* Text schwach / Placeholder             */
  --rs-gray-500:    #6b7280;   /* Fließtext gedämpft                     */
  --rs-gray-600:    #4b5563;   /* Fließtext                              */
  --rs-gray-700:    #374151;   /* Fließtext kräftig (Legal)              */

  /* ── Semantisch (Status) ── */
  --rs-success:     #166534;
  --rs-success-bg:  #f0fdf4;
  --rs-success-bd:  #bbf7d0;
  --rs-error:       #ef4444;

  /* ============================================================
     SEMANTISCHE ALIASE — hiermit bauen
     ============================================================ */
  --bg-page:        var(--rs-gray-100);
  --bg-subtle:      var(--rs-gray-200);
  --surface-card:   var(--rs-white);
  --surface-card-2: var(--rs-gray-50);
  --surface-dark:   var(--rs-ink);

  --text-strong:    var(--rs-ink);      /* Überschriften                */
  --text-body:      var(--rs-gray-500); /* Fließtext                    */
  --text-body-2:    var(--rs-gray-700); /* Fließtext kräftig            */
  --text-muted:     var(--rs-gray-400); /* Hinweise / Placeholder       */
  --text-on-dark:   #f0f2f5;
  --text-on-dark-muted: var(--rs-gray-400);

  --accent:         var(--rs-cyan);
  --accent-ink:     var(--rs-ink);      /* Text auf Cyan                */
  --label:          var(--rs-cyan-800); /* Overline auf Hell            */
  --label-on-dark:  var(--rs-cyan);

  --border:         var(--rs-gray-200);
  --border-strong:  var(--rs-gray-300);
  --border-dark:    var(--rs-ink-line);

  --link:           var(--rs-cyan-800);
  --link-hover:     var(--rs-cyan);
}