/* The layer order is restated in every SDK stylesheet, because the first declaration the browser sees is
   the one that counts and stylesheet load order varies by page. Consumer CSS stays unlayered and so
   always wins. */
@layer rspond.reset, rspond.vendor, rspond.document, rspond.component, rspond.theme, rspond.look;

@layer rspond.look {
    /* The caption naming a value: a form field's label, a detail view's key. Typography only, and the same in every
       place a value is named, so a reader who has learned what a field label looks like reads every caption in it as
       the name of the thing beside it. Muted and medium weight so the value, not the caption, is what the eye lands on. */

    .rspond-label-base-field {
        font-size: var(--rspond-font-size-default);
        font-weight: 500;
        color: var(--rspond-components-text-muted);
    }
}