/* 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;
}

/* A direction of travel said in words and colour: a score that got worse, one
   that got better. They replace the theme's `text-danger` and `text-success`,
   which are the same two roles written with the theme's own values — the ones
   that never went through this project's contrast check, and that DESIGN.md
   keeps out of text for that reason.

   The state colours of the palette give 5.61:1 and 5.87:1 on white, so they
   clear AA as running copy. The arrow beside each of them is what says the
   direction to somebody who does not separate the two colours. */

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

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

/* The error of a block that has no single field to hang from: the certificate
   of a connection with Microsoft Entra ID is produced by a button, chosen from
   a dialog or uploaded, so what is missing is said next to those actions.

   It cannot be the theme's `invalid-feedback`, which stays hidden unless a
   control marked `is-invalid` precedes it. Marking the controls is what this
   avoids: it would paint both options of a choice red while the chosen one is
   valid. Size and weight match the theme's own field error so the two read the
   same. */

.sf-field-error {
    color: var(--sf-danger);
    font-size: 0.9rem;
    font-weight: 400;
}