Status Colors in OKLCH

:root {
  --color-success: oklch(0.75 0.18 145);
  --color-warning: oklch(0.80 0.16 85);
  --color-error: oklch(0.65 0.22 25);
  --color-info: oklch(0.70 0.15 265);
}

.status-badge {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-sans);
}

.status-badge--success {
  background-color: oklch(0.95 0.05 145);
  color: oklch(0.45 0.12 145);
}

.status-badge--warning {
  background-color: oklch(0.96 0.04 85);
  color: oklch(0.50 0.12 85);
}

.status-badge--error {
  background-color: oklch(0.94 0.06 25);
  color: oklch(0.50 0.15 25);
}

.status-badge--info {
  background-color: oklch(0.94 0.04 265);
  color: oklch(0.45 0.12 265);
}

Act as a senior CSS engineer. Create a set of CSS custom properties for semantic status colors (success, warning, error, info) using the oklch() color space.

Requirements:
1. Use oklch() for all colors to ensure perceptual uniformity.
2. Define the following hues:
   - Success: ~145 (Green)
   - Warning: ~85 (Yellow)
   - Error: ~25 (Red)
   - Info: ~265 (Blue)
3. Create a base class .status-badge and modifier classes for each status.
4. Ensure text contrast is accessible (light backgrounds, dark text).
5. Provide two variants:
   a) Standard CSS variables.
   b) Tailwind CSS configuration snippet.

Output only the code blocks.