/* =====================================================================
   DEINE DATEI.
   =====================================================================

   Hier steht deine Gestaltung: die warmen Farben und das Logo. Diese Datei
   fasse ich nie an. Sie wird als letzte geladen und gewinnt gegen alles
   davor – damit kann ein Update deine Anpassungen nicht überschreiben.

   Die Werte stammen aus deiner eigenen ui.css. Ich habe sie nur hierher
   umgezogen, damit sie einen sicheren Platz haben, und drei Dinge ergänzt,
   die dort fehlten und Nebenwirkungen hatten – siehe unten.

   Ändern: Farbcode überschreiben. Im Codespace erscheint neben jedem Wert
   ein kleines Quadrat; klick es an, dann öffnet sich ein Farbwähler.
   ===================================================================== */

/* ----------------------------------------------------------- Ein Licht

   Deine Fassung hatte keinen Dunkelmodus mehr, und das ist konsequent:
   Dein Logo steht auf cremefarbenem Grund, auf schwarzem Untergrund sähe
   es aus wie ein aufgeklebter heller Zettel. Also bleibt es hell – aber
   ausgesprochen, nicht aus Versehen.

   color-scheme sagt dem Gerät Bescheid, damit es nicht seinerseits
   Bildlaufleisten und Eingabefelder dunkel einfärbt und die Seite halb
   umkippt. Fehlt diese Zeile, sieht die App nachts anders aus als tags. */

:root { color-scheme: light; }

/* ------------------------------------------------------------- Farben */

:root {
  --paper:     #F7F3EE;   /* Hintergrund hinter der App */
  --surface:   #FFFDFC;   /* Liste, Eingabefelder, Karten */
  --surface-2: #F1E9E3;   /* Kopfzeile und Reiterleiste */

  --ink:       #211C1A;   /* Überschriften, der dunkle Ergebnisblock */
  --ink-2:     #4A413D;   /* Fließtext */
  --muted:     #7A6D67;   /* Beschriftungen, Nebensächliches */
  --hair:      #DDD2CB;   /* die feinen Trennlinien */

  --accent:      #8F1D2C; /* Links und Knöpfe – das Rot aus deinem Logo */
  --accent-soft: #F0DADD;

  --warn:      #D76F54;   /* Warnungen */
  --warn-soft: #F7DED6;

  /* Tierarten – gleiche Helligkeit, nur der Farbton unterscheidet */
  --sp-nutztier:  #71875F;
  --sp-pferd:     #C77448;
  --sp-gefluegel: #4F879C;
  --sp-kleintier: #7A6FB2;
  --sp-heimtier:  #B8637E;
}

/* Dieselben Werte noch einmal für die beiden Fälle, in denen das Gerät
   sonst auf Dunkel umschalten würde. So bleibt es bei einem Aussehen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #F7F3EE;
    --surface:   #FFFDFC;
    --surface-2: #F1E9E3;
    --ink:       #211C1A;
    --ink-2:     #4A413D;
    --muted:     #7A6D67;
    --hair:      #DDD2CB;
    --accent:      #8F1D2C;
    --accent-soft: #F0DADD;
    --warn:      #D76F54;
    --warn-soft: #F7DED6;
    --sp-nutztier:  #71875F;
    --sp-pferd:     #C77448;
    --sp-gefluegel: #4F879C;
    --sp-kleintier: #7A6FB2;
    --sp-heimtier:  #B8637E;
  }
}
:root[data-theme="dark"] {
  --paper:     #F7F3EE;
  --surface:   #FFFDFC;
  --surface-2: #F1E9E3;
  --ink:       #211C1A;
  --ink-2:     #4A413D;
  --muted:     #7A6D67;
  --hair:      #DDD2CB;
  --accent:      #8F1D2C;
  --accent-soft: #F0DADD;
  --warn:      #D76F54;
  --warn-soft: #F7DED6;
  --sp-nutztier:  #71875F;
  --sp-pferd:     #C77448;
  --sp-gefluegel: #4F879C;
  --sp-kleintier: #7A6FB2;
  --sp-heimtier:  #B8637E;
}

/* --------------------------------------------------------------- Logo

   Der Tierkreis aus deinem Logo, ohne den Schriftzug: Bei 28 Pixeln wäre
   "VETLEX · VETERINARY COMPANION" nur noch ein grauer Strich, und daneben
   steht der Name ja ohnehin ausgeschrieben.

   Die Datei liegt in web/icons/logo.png. Willst du ein anderes Bild, tausch
   einfach die Datei aus – am Code ist dafür nichts zu ändern. */

.applogo {
  height: 28px;
  width: 28px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 9px;
}

/* Der Name daneben: geschrieben wie ein Name, nicht in Versalien. */
.appname {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}