/*
 * Status colours for messages and pop-up notices, app-wide.
 *
 * Every Django message list picks one of these with the flash_class filter
 * (core/templatetags/core_filters.py), and every pop-up notice (toast) uses
 * the same classes or tokens, instead of stock Tailwind reds, greens,
 * yellows and blues or the pink/mint accent tokens, which clashed with the
 * brand. All four come from the dusk palette.
 */
:root {
    --flash-success-bg: #e48d5c;              /* warm ember (owner's pick), white text */
    --flash-info-bg: var(--brand-navy);       /* white text */
    --flash-warning-bg: var(--brand-accent);  /* gold, dark text */
    --flash-error-bg: #a8321f;                /* brick, ember's darker sibling; white text */
    --flash-warning-ink: var(--brand-surface-dark, #11192c);

    /* Light gold, for tints beside the navy and ember ones (icon circles,
       count badges, "waiting" chips), with a dark gold that reads on it. */
    --brand-accent-light: #fef5d8;
    --brand-accent-ink: #806000;

    /* Soft status tints (badges, chips, icon tiles) in the same four tones.
       Each ink reads at 4.5:1 or better on its tint. */
    --status-success-bg: rgba(228, 141, 92, 0.16);
    --status-success-border: rgba(228, 141, 92, 0.45);
    --status-success-ink: #9a4a1c;            /* ember, darkened for text */
    --status-info-bg: var(--brand-navy-subtle-bg, #eef2ff);
    --status-info-border: rgba(43, 58, 127, 0.18);
    --status-info-ink: var(--brand-navy);
    --status-warning-bg: var(--brand-accent-light);
    --status-warning-border: rgba(252, 211, 77, 0.75);
    --status-warning-ink: var(--brand-accent-ink);
    --status-error-bg: rgba(168, 50, 31, 0.09);
    --status-error-border: rgba(168, 50, 31, 0.28);
    --status-error-ink: #a8321f;
}

.flash-success { --flash-bg: var(--flash-success-bg); --flash-ink: #ffffff; }
.flash-info { --flash-bg: var(--flash-info-bg); --flash-ink: #ffffff; }
.flash-warning { --flash-bg: var(--flash-warning-bg); --flash-ink: var(--flash-warning-ink); }
.flash-error { --flash-bg: var(--flash-error-bg); --flash-ink: #ffffff; }

.flash-success, .flash-info, .flash-warning, .flash-error {
    background-color: var(--flash-bg) !important;
    border-color: var(--flash-bg) !important;
    color: var(--flash-ink) !important;
}
:is(.flash-success, .flash-info, .flash-warning, .flash-error) :is(button, a, .material-icons, i, strong, svg, p) {
    color: inherit !important;
}
:is(.flash-success, .flash-info, .flash-warning, .flash-error) a {
    text-decoration: underline;
}

/* The shared banner in base.html: stacked banners get a hairline of air,
   and nothing sits below the last one. */
.messages-container {
    display: grid;
    gap: 4px;
}

/* Announcement tags: soft chips in brand tones, chosen per tag by the
   tag_tone filter (announcements/templatetags/announcement_tags.py), so a
   colour stored on the tag can never paint an off-brand badge. */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.tag-chip .material-icons { font-size: 0.95rem !important; color: inherit !important; }
.tag-chip--navy { background: var(--brand-navy-subtle-bg, #eef2ff); border-color: var(--status-info-border); color: var(--brand-navy); }
.tag-chip--periwinkle { background: rgba(75, 91, 163, 0.12); border-color: rgba(75, 91, 163, 0.22); color: var(--brand-navy-light, #4b5ba3); }
.tag-chip--gold { background: var(--brand-accent-light); border-color: var(--status-warning-border); color: var(--brand-accent-ink); }
.tag-chip--ember { background: var(--status-success-bg); border-color: var(--status-success-border); color: var(--status-success-ink); }
.tag-chip--brick { background: var(--status-error-bg); border-color: var(--status-error-border); color: var(--status-error-ink); }
.tag-chip--slate { background: var(--bg-canvas, #f8fafc); border-color: var(--border-subtle, #e2e8f0); color: var(--text-secondary, #64748b); }
.tag-dot { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 9999px; flex-shrink: 0; }
.tag-dot--navy { background: var(--brand-navy); }
.tag-dot--periwinkle { background: var(--brand-navy-light, #4b5ba3); }
.tag-dot--gold { background: var(--brand-accent); }
.tag-dot--ember { background: var(--flash-success-bg); }
.tag-dot--brick { background: var(--flash-error-bg); }
.tag-dot--slate { background: var(--text-secondary, #64748b); }