/* Motyw: klasyczny – prostokątne bloki, białe tło, czerwone plusy
   Kolory motywu ustawiasz tylko tutaj, w zmiennych poniżej. */
:root {
  --theme-main-line: #888888;       /* kolor głównej linii – ramka bloku */
  --theme-bg: #ffffff;          /* tło obszaru drzewa */
  --theme-block: #ffffff;       /* tło bloku osoby */
  --theme-border: #888888;      /* ramka bloku i kreski w bloku */
  --theme-text: #000000;        /* tekst w bloku */
}

#viewport { background: var(--theme-bg); }

.person {
  border: 1px solid var(--theme-border);
  background: var(--theme-block);
  color: var(--theme-text);
}
.person .photo,
.person .date { border-right-color: var(--theme-border); }
.person .name { border-bottom-color: var(--theme-border); }

/* plus jako grafika z katalogu motywu */
.plus,
.plus:hover {
  font-size: 0;
  background: url(plus.svg) center / 18px 18px no-repeat;
}

/* karta postaci: panel szczegółów */
.card-details { background: #fff; border: 1px solid var(--theme-border); border-radius: 0; color: var(--theme-text); }

/* [x] zamykający kartę postaci */
dialog.person-card { --card-x-bg: #fff; --card-x-fg: #000; --card-x-border: #888; --card-x-radius: 0; --card-x-shadow: none; }