/* ─────────────────────────────────────────────────────────────────────────
   UX r1 item 55 — severity-scale doctrine.

   The provider review 2026-05-27 flagged that status colors aren't used
   consistently across the EMR: yellow means "waiting/needs attention" on
   the vitals chip and the walk-in row, but orange means "warning/overdue"
   on the Inactivate button and the abnormal-result chip, and red means
   "critical/error" but is ALSO used as a generic count pip for unread
   notifications. A clinician can't predict whether a colored thing is
   urgent, informational, or just a count.

   EXACTLY THREE SEVERITY TIERS — no other tiers may be added without
   approval. The rules:

     Tier 1 — CRITICAL (red)
        Use when the clinician must act immediately or risks patient harm.
        Examples: critical lab value, allergy alert, medication interaction
        of severity ≥ Major, life-threatening vitals, sepsis-bundle trigger.
        Reserved for ACTIONABLE clinical severity. Never use for counts,
        button-default-color, or "important looking" surfaces.

     Tier 2 — WARNING (amber)
        Use when the clinician should act soon or note carefully but the
        item is not life-threatening. Examples: abnormal-but-not-critical
        lab value, overdue task, expired med list, pending allergy review.
        Maps to "needs-attention". Never use for "waiting room" or
        "queued" — those are neutral status, not warnings.

     Tier 3 — INFO (blue)
        Use for informational signals and onboarding affordances that
        carry no urgency. Examples: tip banners, in-app guidance,
        scheduled-but-not-overdue task chip, unread-message pip.
        Use for COUNTS too — count pips are informational, not severity.

   COLORS THAT DO NOT MEAN SEVERITY:
     - GRAY: neutral / chrome / disabled.
     - GREEN: completed / acknowledged / normal — meaning "no severity".
     - BRAND BLUE (--emr-primary): interactive / action / link. Note this
       overlaps visually with --emr-sev-info — that's intentional. If you
       can't tell them apart at a glance, you've used the right tier.

   ENFORCEMENT:
     - Use the CSS variables below — never raw hex for severity.
     - tests/core/ux-r1-cognitive-load-static.spec.ts asserts exactly
       three severity tiers are defined here. A PR that adds a fourth
       tier (e.g. "neutral-warning") flips the gate red on purpose.
     - The chip in StatusBadge.razor.css / patient-tabs.css / app.css
       should be migrated to these tokens over time. The shared
       --emr-severity-* tokens in design-tokens.css are partial aliases
       of these — both work, but new code should use --emr-sev-*.

   THREE TIERS LISTED EXACTLY: critical, warning, info.
   ───────────────────────────────────────────────────────────────────── */

:root {
    /* ── Tier 1: CRITICAL (red) ───────────────────────────────────── */
    --emr-sev-critical-bg: #fef2f2;
    --emr-sev-critical-border: #fca5a5;
    --emr-sev-critical-fill: #dc2626;
    --emr-sev-critical-text: #991b1b;
    --emr-sev-critical-text-on-fill: #ffffff;

    /* ── Tier 2: WARNING (amber) ──────────────────────────────────── */
    --emr-sev-warning-bg: #fffbeb;
    --emr-sev-warning-border: #fcd34d;
    --emr-sev-warning-fill: #f59e0b;
    /* Text on warning-bg is the AAA-contrast brown used in StatusBadge
       (~9.8:1 — see ux-r1 item 27 closeout note). Don't drop to #92400e
       again: it falls below 4.5:1 on pale-warm card backgrounds. */
    --emr-sev-warning-text: #7C2D12;
    --emr-sev-warning-text-on-fill: #1f2937;

    /* ── Tier 3: INFO (blue) ──────────────────────────────────────── */
    --emr-sev-info-bg: #eff6ff;
    --emr-sev-info-border: #bfdbfe;
    --emr-sev-info-fill: #2563eb;
    --emr-sev-info-text: #1e40af;
    --emr-sev-info-text-on-fill: #ffffff;
}

/* KRA-975: opt-in dark mode keeps the same three severity meanings, but uses
   dark-tinted pill surfaces so clinical status does not look like a light-mode
   paste-on chip inside dark chrome. */
[data-theme="dark"] {
    --emr-sev-critical-bg: #3A1518;
    --emr-sev-critical-border: #B91C1C;
    --emr-sev-critical-fill: #F87171;
    --emr-sev-critical-text: #FECACA;
    --emr-sev-critical-text-on-fill: #1F0A0C;

    --emr-sev-warning-bg: #33240B;
    --emr-sev-warning-border: #D97706;
    --emr-sev-warning-fill: #FBBF24;
    --emr-sev-warning-text: #FDE68A;
    --emr-sev-warning-text-on-fill: #1F2937;

    --emr-sev-info-bg: #14233E;
    --emr-sev-info-border: #2563EB;
    --emr-sev-info-fill: #60A5FA;
    --emr-sev-info-text: #BFDBFE;
    --emr-sev-info-text-on-fill: #08111F;
}

/* ── Reusable severity chip classes ──────────────────────────────────── */

.sev-chip {
    align-items: center;
    border-radius: 999px;
    border: 1px solid transparent;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    gap: 4px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 2px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sev-chip--critical {
    background: var(--emr-sev-critical-bg);
    border-color: var(--emr-sev-critical-border);
    color: var(--emr-sev-critical-text);
}

.sev-chip--critical.sev-chip--fill {
    background: var(--emr-sev-critical-fill);
    border-color: var(--emr-sev-critical-fill);
    color: var(--emr-sev-critical-text-on-fill);
}

.sev-chip--warning {
    background: var(--emr-sev-warning-bg);
    border-color: var(--emr-sev-warning-border);
    color: var(--emr-sev-warning-text);
}

.sev-chip--warning.sev-chip--fill {
    background: var(--emr-sev-warning-fill);
    border-color: var(--emr-sev-warning-fill);
    color: var(--emr-sev-warning-text-on-fill);
}

.sev-chip--info {
    background: var(--emr-sev-info-bg);
    border-color: var(--emr-sev-info-border);
    color: var(--emr-sev-info-text);
}

.sev-chip--info.sev-chip--fill {
    background: var(--emr-sev-info-fill);
    border-color: var(--emr-sev-info-fill);
    color: var(--emr-sev-info-text-on-fill);
}