/* Soft status colours: the same red / amber / green / blue meaning, easier on the eyes.
 *
 * Bootstrap paints .badge.bg-danger / .text-bg-warning / ... in full-strength
 * saturated fills. On a list of hundreds of records that reads as a wall of alarms.
 * These rules keep the hue (so red still means "stop", amber "look", green "done") but
 * tint the fill, and draw the label in a darkened / lightened shade of the same hue
 * that keeps AA contrast on the tint in both themes.
 *
 * The hue is the tenant's own: --school-success / -warning / -danger come from the
 * school's theme colours, so a school that re-brands its status colours re-brands
 * every badge with no template change.
 */
:root {
  --rmc-soft-danger: var(--status-danger);
  --rmc-soft-warning: var(--status-warning);
  --rmc-soft-success: var(--status-success);
  --rmc-soft-info: var(--status-info);
  --rmc-soft-surface: var(--surface-elevated, #ffffff);
  --rmc-soft-ink: #0b1220;
  --rmc-soft-fill: 13%;
  --rmc-soft-edge: 34%;
  --rmc-soft-text: 62%;
}
:root[data-theme="dark"], :root[data-bs-theme="dark"], html[data-resolved-theme="dark"] {
  --rmc-soft-surface: var(--surface-elevated, #111827);
  --rmc-soft-ink: #f8fafc;
  --rmc-soft-fill: 22%;
  --rmc-soft-edge: 42%;
  --rmc-soft-text: 55%;
}

/* One rule per tone: tint, hairline edge, readable label. */
.badge.bg-danger, .badge.text-bg-danger,
.badge.bg-warning, .badge.text-bg-warning,
.badge.bg-success, .badge.text-bg-success,
.badge.bg-info, .badge.text-bg-info {
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.badge.bg-danger, .badge.text-bg-danger {
  --_tone: var(--rmc-soft-danger);
}
.badge.bg-warning, .badge.text-bg-warning {
  --_tone: var(--rmc-soft-warning);
}
.badge.bg-success, .badge.text-bg-success {
  --_tone: var(--rmc-soft-success);
}
.badge.bg-info, .badge.text-bg-info {
  --_tone: var(--rmc-soft-info);
}
.badge.bg-danger, .badge.text-bg-danger,
.badge.bg-warning, .badge.text-bg-warning,
.badge.bg-success, .badge.text-bg-success,
.badge.bg-info, .badge.text-bg-info {
  background-color: color-mix(in srgb, var(--_tone) var(--rmc-soft-fill), var(--rmc-soft-surface)) !important;
  border-color: color-mix(in srgb, var(--_tone) var(--rmc-soft-edge), transparent) !important;
  color: color-mix(in srgb, var(--_tone) var(--rmc-soft-text), var(--rmc-soft-ink)) !important;
}

/* The severity chip on the Records-to-fix rows and drawers. */
.rmc-sev { display: inline-block; padding: .18em .55em; border-radius: 999px; font-size: .75rem; font-weight: 600;
  border: 1px solid transparent; line-height: 1.35; }
.rmc-sev--hold { --_tone: var(--rmc-soft-danger); }
.rmc-sev--flag { --_tone: var(--rmc-soft-warning); }
.rmc-sev--ok { --_tone: var(--rmc-soft-success); }
.rmc-sev--hold, .rmc-sev--flag, .rmc-sev--ok {
  background: color-mix(in srgb, var(--_tone) var(--rmc-soft-fill), var(--rmc-soft-surface));
  border-color: color-mix(in srgb, var(--_tone) var(--rmc-soft-edge), transparent);
  color: color-mix(in srgb, var(--_tone) var(--rmc-soft-text), var(--rmc-soft-ink));
}

/* Status tokens follow the tenant's own colours.
 *
 * design-tokens-personality.css fixes --status-* to platform hues, so pills, alerts and
 * charts ignored the colours a school chose on its theme page. Derive them here from
 * --school-success / -warning / -danger (and an info hue), light and dark:
 *   --status-X      the hue itself (dark theme: lifted toward white so it reads on dark)
 *   --status-X-bg   a tint of it on the surface
 *   --status-X-fg   the label colour, darkened (light) or lightened (dark) to keep contrast
 * A tenant that later supplies --school-info / --school-*-dark overrides them with no CSS change.
 */
:root {
  --school-info: var(--school-info-custom, color-mix(in srgb, var(--school-primary, #4f46e5) 35%, #2563eb));
  --status-success: var(--school-success, #16a34a);
  --status-warning: var(--school-warning, #d97706);
  --status-danger: var(--school-danger, #dc2626);
  --status-info: var(--school-info);
}
:root[data-theme="dark"], :root[data-bs-theme="dark"], html[data-resolved-theme="dark"] {
  --status-success: var(--school-success-dark, color-mix(in srgb, var(--school-success, #16a34a) 78%, white));
  --status-warning: var(--school-warning-dark, color-mix(in srgb, var(--school-warning, #d97706) 78%, white));
  --status-danger: var(--school-danger-dark, color-mix(in srgb, var(--school-danger, #dc2626) 78%, white));
  --status-info: var(--school-info-dark, color-mix(in srgb, var(--school-info) 78%, white));
}
:root {
  --status-success-bg: color-mix(in srgb, var(--status-success) var(--rmc-soft-fill), var(--rmc-soft-surface));
  --status-warning-bg: color-mix(in srgb, var(--status-warning) var(--rmc-soft-fill), var(--rmc-soft-surface));
  --status-danger-bg: color-mix(in srgb, var(--status-danger) var(--rmc-soft-fill), var(--rmc-soft-surface));
  --status-info-bg: color-mix(in srgb, var(--status-info) var(--rmc-soft-fill), var(--rmc-soft-surface));
  --status-success-fg: color-mix(in srgb, var(--status-success) var(--rmc-soft-text), var(--rmc-soft-ink));
  --status-warning-fg: color-mix(in srgb, var(--status-warning) var(--rmc-soft-text), var(--rmc-soft-ink));
  --status-danger-fg: color-mix(in srgb, var(--status-danger) var(--rmc-soft-text), var(--rmc-soft-ink));
  --status-info-fg: color-mix(in srgb, var(--status-info) var(--rmc-soft-text), var(--rmc-soft-ink));
}