/* 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.theme {
    /* ===== Traffic light ===== */

    /* Paint only, and the theme's to decide: a TrafficLight is an icon view over a themed glyph, so the shape and
       the size come from the icon and the colour comes from here. The theme's icon map is what puts these classes
       on the element -- GreenLightIcon resolves to rspond-lucide-light plus rspond-light-green -- so a theme that
       names a colour class and does not paint it leaves every light the colour of ordinary text, which is the one
       reading a status light must never give. The status tokens are reused rather than restated because a light
       and a banner reporting the same condition should not disagree about what green is. */
    .rspond-light-green {
        color: var(--rspond-status-success);
    }

    .rspond-light-yellow {
        color: var(--rspond-status-warning);
    }

    .rspond-light-red {
        color: var(--rspond-status-danger);
    }

    /* Gray is switched off rather than broken, so it takes the muted text colour: a light that is saying nothing
       should recede, not compete with the three that are. */
    .rspond-light-gray {
        color: var(--rspond-components-text-muted);
    }
}