/* Roles of text that the interface needs and the theme does not provide in a
   legible form.

   `sf-text-muted` is the supporting text of a screen: a description, a help
   line, the label of a filter, the caption under a number. It replaces the
   theme's `text-muted`, which is a light grey that gives 2.03:1 on white and
   cannot be read at any size — the name invited exactly the use it does not
   support, which is how it ended up on hundreds of lines of copy.

   It carries `!important` because that is what it replaces: the theme declares
   its own text utilities that way, so without it a screen that already had an
   `!important` colour would keep the grey. */

.sf-text-muted {
    color: var(--sf-text-muted) !important;
}

/* The large secondary mark of an empty state: the glyph that heads "there is
   nothing here yet". It is a big element and not running copy, so it takes the
   neutral of the palette, which clears the 3:1 of an interface element without
   competing with the message underneath it.

   It replaces `text-muted-50`, which is written in seven screens and declared
   in no stylesheet at all: those glyphs were falling through to the theme's
   `i { color: #B5B5C3 }`, which gives 2.03:1. */

.sf-text-muted-50 {
    color: var(--sf-neutral-500) !important;
}