/* Shared badge, notice, empty-state and section-header styles */
.cp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.cp-badge--md {
  font-size: var(--cp-size-secondary);
  padding: 6px 12px;
}

.cp-badge--sm {
  font-size: 0.75rem;
  padding: 4px 8px;
}

.cp-badge--pill {
  border-radius: 999px;
}

.cp-badge--badge {
  border-radius: 10px;
}

.cp-badge--accent {
  background: var(--cp-color-accent-subtle);
  color: var(--cp-color-accent);
  border-color: var(--cp-color-accent-subtle);
}

.cp-badge--neutral {
  background: var(--cp-color-surface-subtle);
  color: var(--cp-color-text-secondary);
  border-color: var(--cp-color-border-subtle);
}

.cp-badge--info {
  background: var(--cp-color-status-info-subtle);
  color: var(--cp-color-status-info);
  border-color: var(--cp-color-status-info-subtle);
}

.cp-badge--success {
  background: var(--cp-color-status-on-track-subtle);
  color: var(--cp-color-status-on-track);
  border-color: var(--cp-color-status-on-track-subtle);
}

.cp-badge--warning {
  background: var(--cp-color-status-at-risk-subtle);
  color: var(--cp-color-status-at-risk);
  border-color: var(--cp-color-status-at-risk-subtle);
}

.cp-badge--danger {
  background: var(--cp-color-status-off-track-subtle);
  color: var(--cp-color-status-off-track);
  border-color: var(--cp-color-status-off-track-subtle);
}

.cp-notice {
  border: 1px solid var(--cp-color-border-subtle);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: var(--cp-size-secondary);
  line-height: var(--cp-line-height-body);
}

.cp-notice--neutral {
  background: var(--cp-color-surface-subtle);
  color: var(--cp-color-text-secondary);
}

.cp-notice--info {
  background: var(--cp-color-status-info-subtle);
  color: var(--cp-color-status-info);
  border-color: color-mix(in srgb, var(--cp-color-status-info-subtle) 65%, var(--cp-color-status-info) 35%);
}

.cp-notice--success {
  background: var(--cp-color-status-on-track-subtle);
  color: var(--cp-color-status-on-track);
  border-color: color-mix(in srgb, var(--cp-color-status-on-track-subtle) 65%, var(--cp-color-status-on-track) 35%);
}

.cp-notice--warning {
  background: var(--cp-color-status-at-risk-subtle);
  color: var(--cp-color-status-at-risk);
  border-color: color-mix(in srgb, var(--cp-color-status-at-risk-subtle) 65%, var(--cp-color-status-at-risk) 35%);
}

.cp-notice--danger {
  background: var(--cp-color-status-off-track-subtle);
  color: var(--cp-color-status-off-track);
  border-color: color-mix(in srgb, var(--cp-color-status-off-track-subtle) 65%, var(--cp-color-status-off-track) 35%);
}

.cp-empty-state {
  border: 1px solid var(--cp-color-border-subtle);
  border-radius: 20px;
  padding: 18px;
  background: var(--cp-color-surface-subtle);
}

.cp-empty-state__title {
  margin: 0 0 8px;
  font-family: var(--cp-font-body);
  font-size: var(--cp-size-card-title);
  font-weight: 600;
  color: var(--cp-color-text-primary);
}

.cp-empty-state__message {
  margin: 0;
  color: var(--cp-color-text-secondary);
  font-size: var(--cp-size-body);
  line-height: var(--cp-line-height-body);
}

.cp-empty-state--neutral {
  background: var(--cp-color-surface-subtle);
}

.cp-empty-state--info {
  background: var(--cp-color-status-info-subtle);
}

.cp-empty-state--success {
  background: var(--cp-color-status-on-track-subtle);
}

.cp-empty-state--warning {
  background: var(--cp-color-status-at-risk-subtle);
}

.cp-empty-state--danger {
  background: var(--cp-color-status-off-track-subtle);
}

.cp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cp-section-header__main {
  display: grid;
  gap: 6px;
}

.cp-section-header__title {
  margin: 0;
}

.cp-section-header__subtitle {
  margin: 0;
  color: var(--cp-color-text-secondary);
}

.cp-section-header__kicker {
  margin: 0;
}