/*
 * SRH Status Utilities — Figma-aligned bg/text pairings, WCAG AA verified.
 *
 * Class set:
 *   .srh-info / .srh-success / .srh-warning / .srh-error      — filled
 *   .srh-on-info / .srh-on-success / ...                       — outline on white
 *   .srh-{status}.srh-status-50                                — washed bg variant
 *
 * Success 500 + white text = 3.77 (AA-Large only). Body text within
 * .srh-success therefore uses Success 700 (5.20:1 AA on white).
 */

/* Filled */
.srh-info {
	background: var(--srh-info-500);
	color: #FFFFFF;
	border-radius: var(--srh-radius-md);
}
.srh-success {
	background: var(--srh-success-500);
	color: #FFFFFF;
	border-radius: var(--srh-radius-md);
}
.srh-warning {
	background: var(--srh-warning-300);
	color: var(--srh-grey-1000);
	border-radius: var(--srh-radius-md);
}
.srh-error {
	background: var(--srh-error-600);
	color: #FFFFFF;
	border-radius: var(--srh-radius-md);
}

/* Inline body text in .srh-success → Success 700 for AA on white */
.srh-success p,
.srh-success span,
.srh-success .srh-body {
	color: var(--srh-success-700);
}

/* Outline on white */
.srh-on-info {
	background: #FFFFFF;
	color: var(--srh-info-500);
	border: 1px solid var(--srh-info-500);
	border-radius: var(--srh-radius-md);
}
.srh-on-success {
	background: #FFFFFF;
	color: var(--srh-success-700);
	border: 1px solid var(--srh-success-700);
	border-radius: var(--srh-radius-md);
}
.srh-on-warning {
	background: #FFFFFF;
	color: var(--srh-grey-1000);
	border: 1px solid var(--srh-warning-300);
	border-radius: var(--srh-radius-md);
}
.srh-on-error {
	background: #FFFFFF;
	color: var(--srh-error-600);
	border: 1px solid var(--srh-error-600);
	border-radius: var(--srh-radius-md);
}

/* Washed bg variant */
.srh-info.srh-status-50 {
	background: var(--srh-info-50);
	color: var(--srh-info-500);
	border: 1px solid var(--srh-info-500);
}
.srh-success.srh-status-50 {
	background: var(--srh-success-50);
	color: var(--srh-success-700);
	border: 1px solid var(--srh-success-700);
}
.srh-warning.srh-status-50 {
	background: var(--srh-warning-50);
	color: var(--srh-grey-1000);
	border: 1px solid var(--srh-warning-300);
}
.srh-error.srh-status-50 {
	background: var(--srh-error-50);
	color: var(--srh-error-600);
	border: 1px solid var(--srh-error-600);
}