/* Toast notifications — the one place a toast's appearance is defined.
 *
 * The server already knows the category: fire_toast() sends
 * message_type = success | error | warning | info. The template used to take
 * that and hand-assemble five Tailwind class strings per category — twenty
 * strings, each with a dark-mode twin — and no stylesheet held a single toast
 * rule. Changing the error colour meant editing four lines of markup and
 * hoping nothing else painted a toast.
 *
 * Now the template says only what the thing IS (`toast toast--error`) and this
 * file says what that looks like. Changing the error accent is one line.
 *
 * HOW THE STATES WORK
 * Each `.toast--*` sets three custom properties on the container; the parts
 * read them. That is what keeps a state change to one line instead of five —
 * the icon, title and border all inherit from the same declaration.
 *
 * Values are unchanged from the utilities they replace. Where a design token
 * already held the value, it is used even when its name comes from another
 * surface (--hex-rssi-poor is the red-500 the error icon always used); a
 * comment names the utility so the mapping stays checkable.
 */

/* Container -----------------------------------------------------------------
 * Layout (flex, gap, radius, padding, shadow) stays in the markup as utilities:
 * it carries no meaning worth naming. Only colour moves here.
 */
.toast {
    background-color: var(--fg-on-dark);
    border-color: var(--toast-border);
}

.toast__icon {
    color: var(--toast-icon);
}

.toast__title {
    color: var(--toast-title);
}

.toast__body {
    color: var(--fg-body-strong); /* was the semantic .text-body */
}

/* Dismiss button ------------------------------------------------------------
 * Neutral in every state — the close control is not part of the category.
 */
.toast__dismiss {
    color: var(--fg-5);
}

.toast__dismiss:hover {
    background-color: var(--status-neutral-bg);
    color: var(--fg-1);
}

/* The markup keeps Tailwind's `focus:ring-2` for the ring geometry; only the
 * colour belongs to the design system. Tailwind's ring reads this variable, so
 * setting it here replaces `focus:ring-gray-300` without changing the shape.
 */
.toast__dismiss:focus {
    --tw-ring-color: var(--border-medium);
}

/* States --------------------------------------------------------------------
 * One declaration per category. This is the block to edit to change a colour.
 */
.toast--success {
    --toast-border: var(--editor-tenant-border);
    --toast-title: var(--chart-green-darkest);
    --toast-icon: var(--hex-rssi-excellent);
}

.toast--error {
    --toast-border: var(--danger-border);
    --toast-title: var(--hex-rssi-critical);
    --toast-icon: var(--hex-rssi-poor);
}

.toast--warning {
    --toast-border: var(--warning-mid);
    --toast-title: var(--pill-warning-fg);
    --toast-icon: var(--hex-rssi-fair);
}

/* Info is also the fallback: the template's {% else %} branch emits it for any
 * unrecognised message_type, so an unknown category renders as info rather
 * than unpainted.
 */
.toast--info {
    --toast-border: var(--editor-org-border);
    --toast-title: var(--info-strong-fg);
    --toast-icon: var(--hex-gw-3);
}

/* No dark-mode block here, deliberately. @media (prefers-color-scheme: dark)
   is not opt-in: it fires from the viewer's OS, so on a dark desktop it
   repainted every toast while every other surface stayed light. The same
   mistake was already made and documented in table-header.css, whose block was
   deleted for this reason — real dark mode means a full second palette and a
   deliberate toggle, not per-component overrides. */