:root {
  --nitro-brand-500: #3a57e8;
  --nitro-brand-600: #2f46c7;
  --nitro-success-500: #1aa053;
  --nitro-warning-500: #f16a1b;
  --nitro-danger-500: #c03221;
  --nitro-surface: #ffffff;
  --nitro-surface-muted: #f6f7fb;
  --nitro-text: #1f2937;
  --nitro-text-muted: #667085;
  --nitro-border: #dfe3eb;
  --nitro-radius-sm: .5rem;
  --nitro-radius-md: .75rem;
  --nitro-radius-lg: 1rem;
  --nitro-focus: 0 0 0 .2rem rgba(58,87,232,.24);
}

:focus-visible {
  outline: 2px solid var(--nitro-brand-500);
  outline-offset: 2px;
}

.nitro-surface-badge {
  align-items: center;
  background: rgba(58,87,232,.1);
  border: 1px solid rgba(58,87,232,.18);
  border-radius: 999px;
  color: var(--nitro-brand-600);
  display: inline-flex;
  font-size: .75rem;
  font-weight: 700;
  gap: .35rem;
  letter-spacing: .02em;
  padding: .3rem .65rem;
}